Mengeanal CSS Specifity Serta Contohnya
Mengenal CSS Specificity
Specificity atau “Kekhususan” pada CSS adalah aturan pemberian bobot nilai pada elemen-elemen tertentu di CSS. Semakin tinggi nilainya maka properti-properti CSS pada elemen tersebut yang dimunculkan.
Sesuai dengan arti harfiah dari “Cascading Style Sheet”, semakin ke bawah dan semakin dalam elemennya, maka nilai specificity-nya akan semakin besar. Pelajaran mengenai CSS Specificity ini penting karena ini adalah konsep dasar dari penulisan CSS.
Dalam tahap awal pembuatan CSS, web designer pada umumnya memulai dengan menentukan style-style basis untuk elemen HTML yang akan dipakai. Style-style basis atau mendasar ini adalah style yang nantinya akan paling banyak digunakan di dalam website. Kita tentunya tidak ingin menulis style untuk setiap elemen satu persatu karena akan memakan waktu dan tidak efisien. Sebagai contoh, kita akan menentukan style untuk font yang paling banyak digunakan.
body { font: normal 12px/150% verdana, arial, sans-serif;}
Style diatas umumnya ditempatkan pada elemen <body>. Berhubung <body> mencakup seluruh elemen yang ada dalam setiap website, style-style yang didefinisikan di dalam body akan diwariskan (inherited) kepada setiap elemen yang terkandung didalamnya. Sebagai contoh apabila di dalam <body> terdapat elemen <p> atau <div>, maka kedua elemen tersebut akan memiliki jenis font yang sama dengan body. Disinilah CSS Specificity berperan penting.
Mari kita lihat skenario lain untuk menjelaskan peran CSS Specificity. Dengan tetap menggunakan CSS seperti diatas, kita buat HTML seperti berikut ini:
<html> <body> <h1>Judul Ini Memiliki Font Georgia</h1> <p>Paragraf ini tetap menggunakan Font dari Body</p> </body></html>
Pada skenario ini, saya menginginkan agar elemen h1 memiliki jenis font-family Georgia. Berhubung Body telah mendefinisikan jenis font-family menjadi Verdana, maka khusus untuk elemen h1 kita harus membuat definisi style yang baru. Seperti berikut ini:
body { font: normal 12px/150% verdana, arial, sans-serif;}h1 { font-family: georgia; }
Karena definisi style untuk h1 diletakkan setelah body, maka setiap elemen h1 didalam body akan mematuhi style yang didefinisikan khusus untuk h1. Bagaimana jika h1 diletakkan sebelum body? Hal ini akan membuat style yang didefinisikan untuk h1 akan dibatalkan oleh body karena CSS merender style sesuai urutan penulisan. Ini adalah contoh CSS Specificity yang sangat sederhana.
Mengenal Strata/Tingkatan Pada CSS
Strata atau tingkatan inilah yang menentukan CSS Specificity. Pada contoh sebelumnya kita mensertakan dua elemen, h1 dan body. Kedua elemen tersebut dan seluruh elemen HTML lainnya memiliki strata yang sama di hadapan CSS. Yang membedakan hanyalah urutan penulisan mereka. W3C memberikan penjelasan bagaimana menentukan strata di CSS. Untuk mempermudah kita dapat menentukan “kekuatan” dari masing-masing strata dengan 4 digit angka. Keempat digit angka tersebut menempati posisi: a, b, c dan d. Keempat strata tersebut adalah:
Inline style, adalah atribut style=" " yang ditempatkan pada tag HTML. Strata ini menempati urutan tertinggi dan menempati posisi “a” pada peta “kekuatan” strata. Nilai pada strata ini selalu 1Atribut ID, pada CSS ditandai dengan “#”. Ditempatkan pada posisi “b”, nilainya tergantung dari jumlah atribut ID yang akan didefinisikanAtribut Class, pada CSS ditandai dengan “.” . Ditempatkan pada posisi “c”, nilainya tergantung dari jumlah atribut Class yang akan didefinisikanElemen, setiap elemen yang didefinisikan pada CSS menempat posisi “d”. Strata terkecil yang nilainya tergantung dari jumlah elemen yang didefinisikan
Masih bingung? Mari kita beri beberapa skenario!
#container p { color: blue;} /* nilai specificity: 0,1,0,1 */ p { color: red;} /* nilai specificity: 0,0,0,1 */
Pada contoh diatas, tulisan pada p akan berwarna biru walaupun p { color: red; } ditulis paling akhir.
#container p { color: blue;} /* nilai specificity: 0,1,0,1 */#container .content p { color:red;} /* nilai specificity: 0,1,1,1 */
Jika ditotal, 111 > 101, maka tulisan pada p akan berwarna merah.
div p { color: blue;} /* nilai specificity: 0,0,0,2 */.div p { color:red;} /* nilai specificity: 0,0,1,1 */
Lihat perbedaannya? Div yang kedua adalah atribut Class, maka memiliki nilai 10. P akan berwarna merah.
div p { color: blue;} /* nilai specificity: 0,0,0,2 */td div p { color:red;} /* nilai specificity: 0,0,0,3 */
Jika memiliki strata yang sama, maka nilainya akan ditambahkan sesuai jumlah strata tersebut. P akan berwarna merah.
#container div .content p { color: blue;} /* nilai specificity: 0,1,1,2 */#container ul li p { color:red;} /* nilai specificity: 0,1,0,3 */
Cukup jelas, bukan? Mari kita terapkan pada HTML :)
<html> <head> <style type="text/css"> #container p { color: blue;} /* nilai specificity: 0,1,0,1 */ #container .content p { color:red;} /* nilai specificity: 0,1,1,1 */ </style> </head> <body> <div id="container"> <p>Paragraf ini tetap menggunakan Font dari Body</p> </div> </body></html>
Dari nilai specificity-nya, baris kedua lebih tinggi dari baris pertama. Namun pada kenyataannya setelah diterapkan pada HTML, CSS justru mengacu pada baris pertama! Mengapa demikian? Lihat struktur HTML-nya:
<div id="container"> <p>Paragraf ini tetap menggunakan Font dari Body</p></div>
P hanya dikelilingin oleh div dengan ID “container”. Sedangkan pada baris kedua CSS terdapat Class “content”, sehingga baris kedua CSS tersebut tidak akan digunakan apabila struktur tag HTML sudah sesuai dengan baris tersebut. Inilah “kekhususan” dari CSS yang harus selalu diperhatikan! Nilai dari CSS Specificity baru dapat diaplikasikan apabila sudah memenuhi kriteria kekhususan yang didefinisikan pada CSS. Untuk memenuhi kriteria CSS baris kedua tersebut, tag HTML harus memilik struktur #container > .content > p. :D Coba perhatikan juga kasus seperti ini:
<html> <head> <style type="text/css"> #container p { color: blue;} /* nilai specificity: 0,1,0,1 */ #container .content p { color:red;} /* nilai specificity: 0,1,1,1 */ </style> </head> <body><div id="container"> <p style="color: green;">Paragraf ini tetap menggunakan Font dari Body</p></div> </body></html>
Dalam hal ini p akan berwarna hijau (green) karena memiliki inline style. Lihat kembali penjelasan strata, inline style adalah strata terkuat dengan nilai 1000 :).
Menggunakan !important
Ada kalanya kita menjumpai suatu kasus dimana sebuah atribut CSS tidak ingin diubah dan dipengaruhi oleh specificity dari elemen lain. Dalam hal ini, kita bisa mengesampingkan aturan CSS Specificity dengan memasukkan aturan baru, yakni !important. Contoh penggunaannya adalah sebagai berikut:
<html> <head> <style type="text/css"> p { color: yellow !important; } #container p { color: blue;} /* nilai specificity: 0,1,0,1 */ #container .content p { color:red;} /* nilai specificity: 0,1,1,1 */ </style> </head> <body><div id="container"> <p style="color: green;">Paragraf ini tetap menggunakan Font dari Body</p></div> </body></html>
!important diletakkan setelah value atribut di definisikan dan sebelum atribut ditutup dengan “;”. Aturan !important menandakan bahwa apapun value yang didefinisikan sebelum !important tidak boleh berubah walaupun ada inline style sekalipun. Dalam hal ini, warna p adalah kuning :).
Demikian tutorial kali ini mengenai CSS Specificity. :) Jika anda memahami ini, maka anda akan paham sebagian besar dari CSS. Pertanyaan silakan berikan melalui komen.
Photo by: Kevin Poh (http://www.flickr.com/photos/kevinpoh/3548617540/)
Posted 1 year ago
#css #pemula #specificity
7 notes
Dec 23 2011
10:00 am
Bagaimana Memulai Belajar CSS?
Tutorial ini hanyalah tutorial singkat untuk memulai belajar CSS. Saya akan menjelaskan bagaimana cara kerja CSS dan bagaimana CSS bisa membantu anda untuk mendesain sebuah website. Mari kita mulai!
Berkenalan Dengan CSS
Beda dengan HTML yang merupakan Markup Language, CSS hanya berperan di atribut “style” di setiap markup HTML. CSS bisa dibuat dalam file terpisah dengan extension “.css” ataupun diterapkan langsung pada atribut “style” di setiap markup HTML. Contoh CSS pada markup html
<p style="color: #ffffff;"></p>
Contoh mengimpor file CSS ke dalam file HTML:
<link rel="stylesheet" type="text/css" href="style.css" />
Tips: Sebisa mungkin hindari penulisan atribut “style” dalam markup HTML. Penulisan tersebut akan menyulitkan anda untuk debugging CSS di masa depan, serta akan menambah ukuran file HTML anda.
Apa yang bisa dilakukan CSS untuk memudahkan hidup anda?
Mudah saja, CSS bisa mempersingkat waktu anda untuk mendesain website. Ambil contoh seperti ini: secara default semua browser akan memberikan warna hitam (#000000) untuk tulisan di paragraf (<p>). Jika ingin mengubah warna menjadi merah (#ff0000), maka yang dilakukan adalah menuliskan style="color:#ff0000;" di setiap atribut <p>, seperti ini:
<p style="color:#ff0000;">Tulisan ini berwarna merah</p><p style="color:#ff0000;">Tulisan ini juga</p><p style="color:#ff0000;">Yang ini juga warnanya</p>
Ada 30 paragraf? Maka ditulis juga 30 kali. Tapi jika anda menggunakan file .css, anda cukup menuliskan seperti ini:
p { color: #ff0000; }
Kode CSS diatas ini akan membuat warna tulisan di semua paragraf menjadi merah. Mudah, ‘kan?
Menulis Kode CSS, berkenalan dengan Selector, Property, dan Value
Penulisan CSS dibagi menjadi tiga bagian: Selector, Property, dan Value. Selector bisa diisi oleh:
HTML Markup: p, a, div, table, dan lain-lainClass, ditandai dengan tanda titik sebelum nama kelas: .first, .section, dllID, ditandai dengan tanda pagar sebelum nama ID: #first, #section, dllPseudo-Class, ditandai dengan tanda titik dua sebelum nama kelas, terdiri dari :active, :hover, :focus, dll
Setiap Markup HTML bisa memiliki Property yang berbeda-beda. Ada Property yang berlaku untuk semua Markup dan ada yang tidak. Berikut ini tabel yang bisa anda jadikan referensi untuk Property: http://www.w3.org/TR/CSS2/propidx.html
Mencari Software untuk Membantu Anda Menulis CSS
Sebuah software/aplikasi dapat membantu pemula untuk menulis kode CSS. Disarankan memiliki fitur intellisense, sehingga ketika mengetik akan muncul rekomendasi Property yang ingin ditulis. Ini adalah tampilan intellisense di Coda:
Umumnya penulisan kode CSS merupakan satu dari sekian banyak fitur dari Software tersebut, sehingga kata kunci yang lebih tepat untuk mencarinya di Google adalah: “Source Code Editor”. Saya sudah mencoba beberapa software berikut:
Dreamweaver, berbayar. Saya tinggalkan karena terlalu berat dan WYSIWYG nya ga akuratNetBeans, gratis. Saya tinggalkan karena terlalu beratNotepad++, gratis. Saya tinggalkan karena lagi kesengsem dengan MacCoda, berbayar. Sampai saat ini masih saya pakai. Benar-benar memuaskan, baik itu tampilan, kecepatan, dan fungsi :DEspresso, berbayar. Benar-benar memuaskan dari segi produktifitas dan tampilannya. Akan saya beli kalau ada rejeki berlebih :DTextMate, berbayar. Speed is the key. Sayangnya ga ada intellisense. Cocok untuk programmer kawakan yang sudah hapal semua syntax diluar kepala
Yak, itu saja yang perlu anda pelajari di awal! Alasan penulisan artikel ini diawali dari pertanyaan yang sering saya peroleh dari rekan-rekan developer: “Mulainya dari mana?” dan langsung disambut dengan “Jangan suruh gw ngeliat w3schools!”. Semoga di lain kesempatan akan saya jawab dengan: “Mulai dari artikel ini”. Ibaratnya film, artikel ini hanyalah sebuah teaser :D. Dari artikel ini akan berkembang artikel-artikel lainnya yang akan menjelaskan topik-topik tentang CSS dengan lebih detail.
sumber : cssasyik.com/