Link dan CSS eksternal

12:33 AM
Sekedar mengingatkan..., style CSS bisa digunakan dengan tiga cara. Cara-cara penggunaan CSS yaitu :
  1. Inline-style CSS => menggunakan atribut style.
  2. Embeded style CSS => menggunakan tag style.
  3. External CSS => menggunakan tag link dan file CSS.
Saya sudah menunjukkan penggunaan embedded style, dan sudah pernah menggunakan inline-style. Sekarang, saya akan menunjukkan cara penggunaan file CSS.

File CSS bisa digunakan pada file HTML dengan menggunakan tag <link>. Penggunaan file CSS akan sangat menguntungkan dan menyederhanakan penulisan style CSS yang sama untuk file HTML yang berbeda.

Sebelum mulai mengetik kode HTML dan style CSS, mari kita buat folder kosong untuk meletakkan file kita.

Setelah folder kosong dibuat. Ketik style CSS di bawah ini di text editor.
.styleku{
    width : 300px;
    height : auto;
}

.styleku1{
    color : #00FF00;
    background : brown;
}
.styleku2{
    color : #FF0000;
    background : yellow;
}
Simpan file yang sudah kalian ketik dengan nama "cssku.css" di folder kosong yang sudah kalian buat. Selanjutnya, buat dan buka file baru, lalu ketik kode HTML di bawah ini. 
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
    <h2>Belajar HTML</h2>
    <div class="styleku">
        <div class="styleku1">
            <p>Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah paragraf pertama.
            </p>
        </div>
        <div class="styleku2">
            <p>Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah paragraf kedua.
            </p>
        </div>
    </div>
</BODY>
</HTML>


Simpan kode HTML tersebut dengan nama "coba.htm". Jika sudah disimpan di folder yang sama dengan file "styleku.css", kalian seharusnya sudah bisa melihat hasilnya berwarna-warni sesuai dengan nilai properti CSS-nya.

Dalam kode HTML tersebut,  ada tag <link> yang memiliki atribut "rel" dengan nilai "stylesheet" dan juga atribut "href" yang yang menunjukkan nama file yang digunakan sebagai style HTML tersebut. Jika kalian menghilangkan tag <link> atau atribut href, maka tampilan halaman HTML-nya akan berubah.

Selain stylesheet, atribut "rel" pada tag <link> bisa mempunyai nilai-nilainya di bawah ini.
  1. alternate
  2. author
  3. dns-prefetch
  4. help
  5. icon
  6. license
  7. next
  8. pingback
  9. preconnect
  10. prefetch
  11. preload
  12. prerender
  13. prev
  14. search
  15. stylesheet
Kegunaan file yang ditunjuk "href" akan disesuaikan dengan nilai dari atribut "rel".

Malas mengetik? Atau hasilnya tidak sesuai? Kalian bisa mendownload file HTML dan CSS-nya di sini

Subscribe to: Post Comments (Atom)