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/
Definisi CSS
Definisi CSS
Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.
Contoh IP kelas A,B dan C
Kelas – Kelas IP Address
a. Kelas A
Range IP Address : 1.xxx.xxx.xxx sampai 126.xxx.xxx.xxx
Jumlah Network ID : 126
Jumlah Host ID (IP) : 16.777.214 pada tiap jaringan kelas A
Network ID : IP Address Kelompok satu
Host ID : IP Address Kelompok dua, tiga dan empat
Subnet Musk : 255.0.0.0
b. Kelas B
Range IP Address : 128.0.xxx.xxx sampai 191.155.xxx.xxx
Jumlah Network ID : 16.384
Jumlah Host ID (IP) : 65.532 pada tiap jaringan kelas B
Network ID : IP Address Kelompok satu dan dua
Host ID : IP Address Kelompok tiga dan empat
Subnet Musk : 255.255.0.0
c. Kelas C
Range IP Address : 192.0.0.xxx sampai 223.255.255.xxx
Jumlah Network ID : 2.097.152
Jumlah Host ID (IP) : 254 pada tiap jaringan kelas C
Network ID : IP Address Kelompok satu, dua dan tiga
Host ID : IP Address Kelompok empat
Subnet Musk : 255.255.255.0
Sumber: http://id.shvoong.com/how-to/computers-and-internet/2175099-kelas-kelas-ip-address-dan/#ixzz2NBSs4snh
Contoh HTML
<html>
<head>
<title> tempat menulis judul halaman web </html>
<head>
<body>
tempat untuk menulis isi dari halaman web
</body>
</html>
nah sekarang langsung saja kita coba latihan,,
langkah pertama
buka lah satu program aplikasi pengolah kata seperti notepad atau wordpad ataupun aplikasi pengolah kata lainnya.
langkah kedua
tuliskan tag html di bawah ini pada aplikasi pengolah kata:
<html>
<head>
<title>
LATIHAN 1 HTML OLEH ALIM di INDONESI4KU.WORDPRESS.COM
</title>
</head>
<body>
<br>
<p>HTML adalah bahasa standar yang digunakan untuk membuat halaman web.<br>
salah satu tutorial atau contoh latihannya dapat anda lihat di situs<br>
Indonesi4ku.wordpress.com.
</body>
</html>
PENGANTAR HTML
Pengertian dan kegunaan HTML. Selamat datang di personal blog saya :D terima kasih telah mau berkunjung, ini merupakan Artikel pertama saya tetang HTML dan dan sekaligus perdana untuk lebel HTML. Di sini saya akan membahas tetang HTML pastinya, saya akan memulai dari dasar-dasar HTML sampai tingkat menengah, mungkin sebagian orang yang tidak tau tetang apa sih HTML itu, buat apa sih HTML itu, dan lain sebagainya. pada postingan perdana ini akan kita bahas dari pengertian HTML dan hal-hal lainnya tetang HTML.
Apa sih HTML itu ?
HTML merupakan Singkatan dari Hyper Text Markup Language, Hyper text adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju. Pada pengertiannya di sini Markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web. Language atau dalam bahasa indonesia bisa di artikan 'Bahasa', Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
dalam situs wikipedia, HTML atau Hyper Text Markup Language merupakan bahasa markup yang digunakan untuk membuat sebuah halaman web/situs, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web/situs. HTML bisa juga di artikan sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web/situs dengan lengkap kepada pengguna.
Apa sih kegunaan HTML itu?
HTML itu sama dengan hal yang Buku dan HTML sebagai lembaran kertas atau halaman di dalam buku maupun sebagai cover atau sampul buku, dalam arti lain HMTL merupakan Halaman atau tampilan sebuah documen yang ada di media internet, di dalam HTML ktia juga bisa Memodifikasi format teks, Mengintegerasikan gambar dengan tulisan, Menampilkan daftar sesuatu dalam bentuk point-point (item), dapat Menampilkan informasi dalam bentuk tabel, dan lain sebagainya.
nah mungkin itu saja yang dapat saya sampaikan melalui artikel Pengertian dan kegunaan HTML, semua ini berdasarkan apa yang telah saya ketahui, untuk lebih jelasnya kalian bisa mencari sendiri pengertian dan kegunaan HTML di google.co.id. Terima kasih atas kunjunganya di personal blog ahmadfahrizal.net
Sumber Artikel : http://www.ahmadfahrizal.net/2012/06/pengertian-dan-kegunaan-html.html#ixzz2Mx9qxCk5