Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Tiga jenis style rekomendasi CSS:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division.
Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Inline
Pada pendekatan ini, style diterapkan per baris atau per tag melalui atribut style.
Pendekatan inline sangat cocok digunakan untuk pemberian style khusus pada beberapa tag saja
Contoh
<body>
<!-- menerapkan inline style pada paragraf -->
<p style="color:red; font-style:italic">Ini paragraf pertama
<!-- menerapkan inline style pada paragraf -->
<p style="color:blue; font-weight:bold">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
Ini paragraf ketiga
Contoh
<body>
<!-- menerapkan inline style pada paragraf -->
<p style="color:red; font-style:italic">Ini paragraf pertama
<!-- menerapkan inline style pada paragraf -->
<p style="color:blue; font-weight:bold">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
Ini paragraf ketiga
embedded Style Sheet
žPada pendekatan ini, keseluruhan aturan style didefinisikan ke dalam satu blok baru kemudian digunakan di elemen-elemen HTML.
žPendefinisian style ini berdampak pada seluruh elemen paragraf. (lihat contoh 2)
žUntuk lebih menspesifikasikan pemberian style, bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#). (contoh 3)
žKita juga bisa mendefinisikan sebuah aturan untuk lebih dari satu tag. Perhatikan contoh berikut:
b, p, a {
color: red;
font-style: italic;
}
Style di atas akan berlaku untuk semua tag <b>, <p>, dan <a> yang ada di halaman web.
žPendefinisian style ini berdampak pada seluruh elemen paragraf. (lihat contoh 2)
žUntuk lebih menspesifikasikan pemberian style, bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#). (contoh 3)
žKita juga bisa mendefinisikan sebuah aturan untuk lebih dari satu tag. Perhatikan contoh berikut:
b, p, a {
color: red;
font-style: italic;
}
Style di atas akan berlaku untuk semua tag <b>, <p>, dan <a> yang ada di halaman web.
Linked Style Sheet
žPendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan berekstensi css. žPemisahan style ini juga menjadikan pendekatan ini sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
žMisal rule style berikut disimpan dengan nama style.css, maka untuk memanggil file ini bisa dilihat pada contoh 4.
.style1 {
color: red;
font-style: italic;
}
#style2 {
color: blue;
font-weight: bold;
}
Sekian..terimakasih..:)
</body>
</body>
0 comments:
Posting Komentar