Bentuk penerapan CSS seperti contoh-contoh pada postingan sebelumnya (Part 1) memiliki kelemahan yaitu style yang ditetapkan akan berlaku untuk keseluruhan penggunaan satu tag tertentu. Misalnya didefinisikan suatu CSS sebagai berikut :
<style type="text/css”>
h1{color:red; fontstyle:italic;}
</style>
h1{color:red; fontstyle:italic;}
</style>
Akibatnya adalah setiap kali tag <H1> digunakan, maka secara default header yang dihasilkan akan berwarna mewar dan terkena efek cetak miring. Padahal ada kalanya dalam suatu halaman yang saya dibutuhkan penggunaan tag <H1> dengan style yang berbeda. Untuk itu dibutuhkan sebuah cara agar suatu style dapat dipakai pada tag apapun. Hal ini dimungkinkan dengan adanya Class dan ID dalam CSS.
Class
Dengan menggunakan class dalam CSS maka kita dapat membuat style-style yang berbeda untuk jenis tag yang sama (disebut private class), atau membuat style yang sama untuk semua jenis tag yang berbeda (disebut public class). Pendefinisian style untuk class harus didahului tanda . (titik) lalu diikuti nama class.Contoh Public Class :
.warnakanan{color:blue; text-align:right;}
Penerapannya pada tag HTML :
<h2 class="warnakanan">progweb</h2>
<p class="warnatengah">pemrograman web</p> Contoh Private Class :
h1.merah{color:red;}
h1.biru{color:blue;} Penerapannya pada tag HTML :
<h1 class="merah">h1.merah</h1>
<h1 class="biru">h1.biru</h1>
ID
ID memiliki sifat yang hampir sama dengan class yaitu style dapat diterapkan pada tag, bedanya tag dengan id tertentu bisa memperoleh tambahan style. Sehingga jika kita telah membuat class-class yang diterapkan pada tag sejenis, tetapi diinginkan salah satu tag memperoleh style yang agak berbeda maka kita dapat menggunakan id. Pendefinisian style untuk id harus didahului tanda # lalu diikuti nama dari id.Contoh penggunaan id :
.merah{color:red;}
#tebal{font-weight;}
Penerapannya pada tag HTML : <p class="merah">Paragraf Merah</p>
<p class="merah" id="tebal">Paragraf Merah dan Tebal</p> Pengimplementasian CSS
Pengimplementasian CSS dapat dilakukan dengan 3 cara, yaitu : 1. Inline Style : dengan menambahkan atribut style dalam tag HTML.
Contoh :
<h1 style="property1:nilai; property2:nilai; property-n:nilai;">
2. Internal Style Sheet : style didefinisikan di dalam tag <head>...</head>.
Contoh :
<style type="text/css">
selector{property1:nilai;property2:nilai;property-n:nilai;}
</style>
3. External Style Sheet : style didefinisikan pada dokumen khusus (di luar dokumen HTML)
berektensi *.css. Untuk memanggilnya, dalam tag <head>...</head> pada dokumen HTML
ditambahkan sebuah tag link.
Contoh :
<link rel="stylesheet" type="text/css" href="tema.css">
Pendefinisian style pada dokumen .ccs tidak memerlukan tag <html></html>, hanya perlu
menuliskan selector dan property-nya.
Contoh :
menuliskan selector dan property-nya.
Contoh :
selector{property1:nilai;property2:nilai;property-n:nilai;}
NB:
Ketiga cara pendefinisian style sheet di atas dapat digunakan secara bersamaan jika diinginkan. Namun jika di antara beberapa style sheet terdapat selector dan property yang sama tetapi dengan nilai yang berbeda, maka style yang didefinisikan paling akhirlah yang akan ditampilkan.
Misalnya kita telah menggunakan External Style Sheet tetapi kita juga menggunakan Internal Style Sheet pada dokumen HTML dengan selector dan property yang sama seperti yang telah didefinisikan pada External Style Sheet tetapi nilainya berbeda, maka nilai Internal Style Sheet-lah yang akan tampil. Begitu pula dengan Inline Style.
1 komentar:
Terima kasih telah membaca tulisan saya kali ini.
Mudah-mudahan dapat berguna bagi Anda, baik sebagai bahan pembelajaran ataupun sebagai reverensi.
Kritik atau saran dari Anda akan sangat berguna untuk perbaikan kedepannya.
Jika ada, langsung saja tinggalkan komentar Anda disini.
Sekian,
Salam WEB mastah! :)
Posting Komentar