Setelah mempelajari Tutorial CSS dasar 3 dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akanlanjut mempelajari Tutorial CSS dasar 4 itu sendiri.
Agar lebih mudah dipahami, saya akan langsung membuat file sample kita, yaitu spesifik.html :
Sebelum anda menjalankan file spesifik.html tersebut, silahkan perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang ‘mencoba‘ untuk merubah warna sebuah paragraf. Dan silahkan tebak akan bewarna apa paragraf “Sedang Belajar CSS…”.
Dan, seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS “#aaa” adalah tempat pendefenisisan warna “color:orange”, namun bagaimana ini bisa terjadi? bagaimana dengan ke-4 defenisi lainnya?
Jawabannya: karena selector #aaa dianggap paling spesifik atau paling detail dari ke-5 selector lainnya.
Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5, atau agar lebih mudah nilai 0,1,0,0 bisa ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.
Berikut adalah nilai CSS Specificity untuk selector di dalam CSS:
Sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibuat pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah kode HTML yang ada, atau tidak berefek apa-apa. Mungkin jawabannya adalah nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami aturan prioritas dan ke-spesifik-an CSS ini sangat penting untuk menghindari hal tersebut.
Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan perintah !important.
Perhatikan akhir baris pada selector p, saya menambahkan perintah !important diakhir property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.
Penggunaan perintah !important sebaiknya digunakan jika memang sudah terdesak dan sedapat mungkin dihindari,. Hal ini karena perintah !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.
Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag <body>.
Sebagai contoh, perhatikan potongan HTML berikut ini:
Dari contoh diatas, tag <p> berada di dalam tag <div>, sehingga dapat dikatakan tag <div> adalah induk (parent) dari tag <p>. Sedangkan tag <em> yang berada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.
Jika kita membuat kode CSS sebagai berikut:
Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.
Namun perlu diperhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.
Property seperti background-color yang digunakan untuk mengubah warna latar belakang sebenarnya juga tidak diturunkan, namun ‘seolah-olah’ diturunkan. Hal ini terjadi karena nilai ‘default’ dari property background-color adalah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah juga bewarna seperti induknya.
Sebagai contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html:
Dalam contoh kode HTML diatas, saya menggunakan dua kalimat yang memiliki nama class yang berbeda, yakni class satu dan class dua.
Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang memiliki class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan kepada tag <p>.
Pada class=”dua”, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama dengan yang didefenisikan pada tag induknya.
Sifat inheritance CSS ini akan memudahkan dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup dengan:
Pengertian ke-spesifik-an selector CSS
Jika pada tutorial sebelumnya kita telah membahas tentang urutan prioritas CSS berdasarkan sumber kode CSS tersebut (dimana inline style memiliki prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas kode CSS jika seluruh kode CSS tersebut berada dalam file yang sama. Dalam kasus ini kita akan mempelajari apa yang akan terjadi jika beberapa kode CSS yang dibuat saling menimpa.Agar lebih mudah dipahami, saya akan langsung membuat file sample kita, yaitu spesifik.html :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red;
}
div p {
color:green;
}
#aaa{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="aaa">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Sebelum anda menjalankan file spesifik.html tersebut, silahkan perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang ‘mencoba‘ untuk merubah warna sebuah paragraf. Dan silahkan tebak akan bewarna apa paragraf “Sedang Belajar CSS…”.
Jawabannya: karena selector #aaa dianggap paling spesifik atau paling detail dari ke-5 selector lainnya.
Cara Menghitung ke-spesifik-an Selector CSS
CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5, atau agar lebih mudah nilai 0,1,0,0 bisa ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.
Berikut adalah nilai CSS Specificity untuk selector di dalam CSS:
- Setiap element/tag selector bernilai 0,0,0,1
- Setiap class selector, attribut selector bernilai 0,0,1,0
- Setiap ID selector bernilai 0,1,0,0
- Setiap inline style bernilai 1,0,0,0
- Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
- Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
- Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
- Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
- Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2
Sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibuat pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah kode HTML yang ada, atau tidak berefek apa-apa. Mungkin jawabannya adalah nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami aturan prioritas dan ke-spesifik-an CSS ini sangat penting untuk menghindari hal tersebut.
Mengenal perintah !important
Jika aturan prioritas diatas tidak cukup, CSS menyediakan “senjata” pamungkas, yaitu menggunakan perintah !important.Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan perintah !important.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS !important</title>
<style type="text/css">
p {
color:red !important;
}
div p {
color:green;
}
#aaa{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="aaa" class="kalimat">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Perhatikan akhir baris pada selector p, saya menambahkan perintah !important diakhir property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.
Pengertian Inheritance dalam CSS
Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya.Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag <body>.
Sebagai contoh, perhatikan potongan HTML berikut ini:
| 1 | .<div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div> |
Jika kita membuat kode CSS sebagai berikut:
div {color:green;}Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.
Namun perlu diperhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.
Property seperti background-color yang digunakan untuk mengubah warna latar belakang sebenarnya juga tidak diturunkan, namun ‘seolah-olah’ diturunkan. Hal ini terjadi karena nilai ‘default’ dari property background-color adalah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah juga bewarna seperti induknya.
Mengenal Nilai Property: inherit
Untuk ‘memaksa’ proses penurunan, CSS memiliki nilai property: inherit. Jika sebuah kode CSS memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).Sebagai contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html:
<!DOCTYPE html><html><head> <title>Contoh Inheritance dalam CSS</title> <style type="text/css"> div.satu { border: 1px solid black; color: blue; } div.dua { border: 1px solid black; } p.dua { border: inherit; } </style></head><body> <div class="satu"> <p class="satu"> Kalimat ini tanpa <em class="satu">nilai property inherit</em> CSS </p> </div> <br /> <div class="dua"> <p class="dua"> Kalimat ini menggunakan <em class="dua">nilai property inherit</em> CSS </p> </div></body></html>
Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang memiliki class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan kepada tag <p>.
Pada class=”dua”, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama dengan yang didefenisikan pada tag induknya.
Sifat inheritance CSS ini akan memudahkan dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup dengan:
body {font-size: 14px;}body {font-size: 14px;}Dan seluruh tag yang berada di dalam tag body (hampir semua tag merupakan child dari tag body), ukuran fontnya akan berubah menjadi 14px.Cukup sampai sini dulu penjelasan Tutorial CSS dasar 4,semoga jelas kita lanjut ke Tutorial CSS dasar 5 . 
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.