Setelah mempelajari Tutorial CSS dasar 2 dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akanlanjut mempelajari Tutorial CSS dasar 3 itu sendiri.
CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.
Agar mudah memahami cara penggabungan selector CSS ini kita akan mempersiapkan sebuah halaman HTML dummy untuk bahan pembelajaran. Silahkan ketik kode HTML berikut, dan save sebagai belajar_css.html
Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag header (<h2>), paragraf(<p>), dan list (<ol>).
Perhatikan juga pada bagian <head> dari belajar_css.html tersebut saya juga menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang ada juga telah memiliki atribut seperti “class” dan “id” yang siap di-“style” menggunakan CSS.
Tujuan pertama kita, adalah:
Tujuan kedua adalah :
Namun CSS memiliki cara yang lebih efisien jika yang kita inginkan adalah style yang sama untuk kedua tag. Kita bisa menggabungkan kode CSS diatas menjadi:
Tanda koma (“,”) sebagai pemisah menginstruksikan kepada browser bahwa
kedua tag akan berwarna biru. Tidak ada batasan seberapa banyak selector
yang bisa digunakan. Katakan kita ingin seluruh tag header dari <h1> sampai <h6> bewarna biru, maka kode CSSnya adalah:
Tujuan ketiga :
Namun kode CSS tersebut akan membuat seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h1> akan berwarna merah. Sehingga, jika ditambahkan syarat hanya untuk tag <strong>yang berada di dalam tag <p>, maka kita harus menulis selector CSS menjadi:
Maksud dari kode “p strong” adalah seluruh tag <strong> yang berada di dalam tag <p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. (Selector: p strong, berbeda pengertiannya dengan selector: p, strong)
Untuk contoh extreme, katakan kita memiliki halaman HTML yang cukup rumit, sehingga kita menginginkan warna merah untuk “seluruh tag <i> yang berada di dalam tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>”, maka kode CSSnya adalah:
Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling terakhir, dimana dalam contoh diatas, hanya tag <i> saja yang akan bewarna merah.
Melanjutkan pembahasan selector, untuk ujuan keempat kita:
h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut.
Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini:
Sebagai penutup, hasil akhir dari halaman HTML belajar_css.html kita adalah sebagai berikut:
Sampai disini setidaknya anda sudah bisa membaca maksud dari sebagian
besar selector dalam CSS. Sebagai contoh, anda tentunya tidak bingung
membaca kode CSS berikut.
Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas tentang prioritas CSS dilihat dari kespesifikannya.
Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode CSS berikut:
Lalu sebagai sample HTML, saya menggunakan prioritas.html, savelah kedua file pada folder yang sama:
Cara Penggunaan Selector CSS
Pada tutorial CSS sebelumnya, kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik.CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.
Agar mudah memahami cara penggabungan selector CSS ini kita akan mempersiapkan sebuah halaman HTML dummy untuk bahan pembelajaran. Silahkan ketik kode HTML berikut, dan save sebagai belajar_css.html
<!DOCTYPE html><html> <head> <title>Belajar CSS</title> <style type="text/css"> </style></head><body> <h2 class="judul">Belajar CSS</h2> <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p> <p id="belajar_html" class="paragraf" >Saya sedang belajar HTML dari <a href="http://inf0kunet.blogspot.com" target="_blank">infoku.net</a> akan terbuka pada tab baru</p> <p id="belajar_css" class="paragraf"> Saya sedang belajar CSS, mohon jangan diganggu</p> <br /> <h3 class="judul subheader">Daftar Belanjaan</h3> <ol> <li><em>Minyak Goreng</em></li> <li>Sabun Mandi</li> <li>Deterjen</li> <li>Shampoo</li> <li>Obat Nyamuk</li> </ol> </body></html>
Perhatikan juga pada bagian <head> dari belajar_css.html tersebut saya juga menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang ada juga telah memiliki atribut seperti “class” dan “id” yang siap di-“style” menggunakan CSS.
Tujuan pertama kita, adalah:
1. Membuat seluruh tag header <h2> berwarna biru
Karena kita menginginkan seluruh tag berwarna biru, maka tinggal menggunakan CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bagian head:h2 { color: blue; }Tujuan kedua adalah :
2. Membuat seluruh tag header <h3> juga berwarna biru
Untuk keperluan ini, kita tinggal menambahkan kode CSS seperti contoh <h2> sebelumnya, sebagai berikut:h2 { color: blue; }h3 { color: blue; }h2 , h3 { color: blue; }h1 , h2, h3 , h4, h5 , h6{ color: blue; }3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna merah
Jika yang kita maksud adalah seluruh tag <strong> dimanapun tag tersebut berada, maka kode CSSnya cukup sebagai berikut:strong { color:red; }p strong { color:red; }Untuk contoh extreme, katakan kita memiliki halaman HTML yang cukup rumit, sehingga kita menginginkan warna merah untuk “seluruh tag <i> yang berada di dalam tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>”, maka kode CSSnya adalah:
h2 span i { color:red; }Melanjutkan pembahasan selector, untuk ujuan keempat kita:
4. Seluruh tag <h2> yang memiliki class judul, dan seluruh tag yang memiliki class paragraf menjadi italic (huruf miring)
Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah:h2.judul , .paragraf { font-style: italic; }h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut.
Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini:
5. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id “belajar_html”, tag p dengan id “belajar_css” dan seluruh tag h3 yang memiliki class “subheader”
Tujuan diatas terkesan rumit, namun jika anda telah paham tujuan 1 sampai dengan 4 sebelumnya, maka kode CSS berikut akan menjelaskannya:#belajar_html, p#belajar_css, h3.subheader { font-size:14pt; }<!DOCTYPE html><html> <head> <title>Belajar CSS</title> <style type="text/css"> h2 , h3{ color: blue; } p strong { color:red; } h2.judul , .paragraf { font-style: italic; } #belajar_html, p#belajar_css, h3.subheader { font-size:14pt; } </style></head><body> <h2 class="judul">Belajar CSS</h2> <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p> <p id="belajar_html" class="paragraf" >Saya sedang belajar HTML dari <a href="http://inf0kunet.blogspotcom" target="_blank">infoku.net</a> akan terbuka pada tab baru</p> <p id="belajar_css" class="paragraf"> Saya sedang belajar CSS, mohon jangan diganggu</p> <br /> <h3 class="judul subheader">Daftar Belanjaan</h3> <ol> <li><em>Minyak Goreng</em></li> <li>Sabun Mandi</li> <li>Deterjen</li> <li>Shampoo</li> <li>Obat Nyamuk</li> </ol> </body></html>
Pengertian Cascading dari CSS
CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas tentang prioritas CSS dilihat dari kespesifikannya.
Efek Cascading berdasarkan sumber kode CSS
Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada saat yang sama kita juga membuat internel style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode CSS berikut:
h2 { color:blue; }Lalu sebagai sample HTML, saya menggunakan prioritas.html, savelah kedua file pada folder yang sama:
<!DOCTYPE html><html><head> <title>Contoh Kasus Cascading CSS</title> <link rel="stylesheet" type="text/css" href="prioritas.css"> <style type="text/css"> h2 { color:red; } </style></head><body> <h2> Akan berwarna apa saya?..1 </h2> <h2 style="color:green"> Akan berwarna apa saya?..2 </h2></body></html>
Perhatikan bahwa sebelum tag <style>, saya “memanggil” file prioritas.css terlebih dahulu. Lalu pada tag <h2> yang kedua saya menambahkan atribut “color:green” pada tag <h2>.
Jika kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan bewarna merah dan biru, dan tidak ada yang bewarna biru.
Dari contoh sederhana diatas, tag <h2> sebenarnya “dikenakan” atau “diubah” oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu kode yang akan “menang”.
Dalam masalah ‘timpa-menimpa’ ini, CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling ‘bentrok’, maka urutan prioritasnya adalah sebagai berikut (dari yang paling kuat):
Sedangkan text “Akan berwana apa saya?..2” berwarna hijau karena inline style color:green lebih mendapat prioritas daripada external style color:blue maupun internal style color:red.
Cukup sampai sini dulu penjelasan Tutorial CSS dasar 3,semoga jelas kita lanjut ke Tutorial CSS dasar 4 .
Jika kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan bewarna merah dan biru, dan tidak ada yang bewarna biru.
Dari contoh sederhana diatas, tag <h2> sebenarnya “dikenakan” atau “diubah” oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu kode yang akan “menang”.
Dalam masalah ‘timpa-menimpa’ ini, CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling ‘bentrok’, maka urutan prioritasnya adalah sebagai berikut (dari yang paling kuat):
- Inline style, yakni style yang langsung melekat pada tag.
- Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>)
- Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import
Sedangkan text “Akan berwana apa saya?..2” berwarna hijau karena inline style color:green lebih mendapat prioritas daripada external style color:blue maupun internal style color:red.
Cukup sampai sini dulu penjelasan Tutorial CSS dasar 3,semoga jelas kita lanjut ke Tutorial CSS dasar 4 .
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.