- Eksternal style sheet
- Internal style sheet
- inline style
Eksternal Style Sheet
Sebuah style sheet eksternal adalah ideal ketika gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapatmengubah tampilan seluruh situs Web dengan mengubah satu file.Setiap halaman harus link ke style sheet menggunakan tag <link>.Tag <link> masuk ke dalam bagian head:
Sebuah style sheet eksternal adalah ideal ketika gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapatmengubah tampilan seluruh situs Web dengan mengubah satu file.Setiap halaman harus link ke style sheet menggunakan tag <link>.Tag <link> masuk ke dalam bagian head:
Contohnya:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>Style sheet eksternal dapat ditulis dalam editor teks apapun. File tersebut seharusnya tidak berisi tag html. Style sheet Anda harusdisimpan dengan ekstensi css.. Sebuah contoh dari sebuah filestyle sheet yang ditunjukkan di bawah ini:
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}Internal Style Sheet
Sebuah style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, dengan menggunakan tag <style>,seperti ini:
<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>Inline Styles
Gaya inline akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. Gunakan metode ini hemat!
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS.Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>Silahkan dicoba sendiri.
Keterangan lanjutan:
Multi Style Sheets
Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.
Sebagai contoh, sebuah style sheet eksternal memiliki sifat-sifat untuk pemilih h3,contoh:
h3{color:red;text-align:left;font-size:8pt;}Dari contoh diatas maka semua tag HTML h3 akan mengikuti css diatas kecuali h3 memiliki tag id atau class. Selamat mencoba.
Keterangan penting:
Jangan meninggalkan spasi antara nilai properti dan satuan!"margin-left: 20 px" (Tapi "margin-left: 20px") akan bekerja di IE,tapi tidak di Firefox atau Opera.