img {background:#EEEEEE; padding:5px;}
selektor {deklarasi1; deklarasi2;}
selektor {properti1:value1; properti2:value2;}
Selektor terdiri dari deklarasi-deklarasi yang dipisahkan dengan titik koma, setiap deklarasi adalah gabungan antara properti dengan value/nilainya.
img adalah selektor, background dan padding adalah properti, #EEEEEE dan 5px adalah value. background:#EEEEEE; dan padding:5px; adalah deklarasi.Suatu saat mungkin kalian juga akan melihat susunan kode yang tampak berbeda seperti ini:
img {
background:#EEEEEE;
padding:5px;
}
img
{
background:#EEEEEE;
padding:5px;
}
img {
background : #EEEEEE;
padding : 5px;
}
img { background: #EEEEEE; padding: 5px; }Apapun bentuk dan susunan kode yang akan kalian temui nantinya tidak akan mempengaruhi apapun.
Aturan Penulisan Selektor dalam Tag Murni
Untuk tag-tag dengan kondisi yang masih murni bisa kamu tuliskan apa adanya sesuai dengan nama tagnya seperti beberapa contoh berikut:| SELEKTOR | CONTOH KERANGKA | KETERANGAN |
|---|---|---|
| body {deklarasi} | <body>OBJEK</body> | Deklarasi akan mempengaruhi objek-objek di dalam wilayah kekuasaan <body> |
| a {deklarasi} | <a href='#'>OBJEK</a> | Deklarasi akan mempengaruhi objek-objek di dalam wilayah kekuasaan <a> |
| img {deklarasi} | <img src='hompimpa.jpg' /> | Deklarasi akan mempengaruhi elemen gambar |
| ul {deklarasi} | <ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> | Deklarasi akan mempengaruhi semua elemen di dalam wilayah kekuasaan <ul> |
| ol {deklarasi} | <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol> | Deklarasi akan mempengaruhi semua elemen di dalam wilayah kekuasaan <ol> |
| li {deklarasi} | <ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol> | Deklarasi akan mempengaruhi semua elemen <li> baik yang berada di dalam wilayah kekuasaan <ul> maupun <ol> |
| ul li {deklarasi} | <ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol> | Deklarasi akan mempengaruhi elemen <li> di dalam wilayah kekuasaan <ul>, namun tidak akan mempengaruhi elemen <li> di dalam wilayah kekuasaan <ol> |
Penulisan ID dan CLASS
Penulisan selektor ID harus diawali dengan prefiks#, sedangkan selektor CLASS harus diawali dengan prefiks .| SELEKTOR | CONTOH KERANGKA | KETERANGAN |
|---|---|---|
| #hompimpa {deklarasi} | <div id='hompimpa'> OBJEK </div> | Deklarasi akan mempengaruhi objek di dalam elemen yang memiliki ID hompimpa |
| .hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> | Deklarasi akan mempengaruhi objek di dalam elemen yang memiliki CLASS hompimpa |
| span.hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa |
| div.hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki CLASS hompimpa |
| div .hompimpa {deklarasi} | <div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan mempengaruhi elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui memiliki CLASS hompimpa. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh |
| div#hompimpa {deklarasi} | <div id='hompimpa'> OBJEK </div> <span id='hompimpa'> OBJEK </span> | Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki ID hompimpa |
| div #hompimpa {deklarasi} | <div> <div id='hompimpa'> OBJEK </div> <span id='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan mempengaruhi elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui memiliki ID hompimpa. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh |
| div span.hompimpa {deklarasi} | <div> <div id='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan mempengaruhi elemen <span> yang memiliki CLASS hompimpa di dalam elemen <div> induk, namun tidak akan mempengaruhi elemen <div> yang memiliki CLASS hompimpa yang berada di dalam elemen <div> induk. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh |
| #hompimpa {deklarasi} | <div id='hompimpa'> OBJEK </div> <div class='hompimpa'> OBJEK </div> | Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa |
Meringkas Beberapa Selektor bagi Elemen yang Memiliki Deklarasi Sama
Penulisan selektor dapat diringkas dengan memisahkannya menggunakan tanda koma untuk menggabungkan deklarasi-deklarasi yang sama.| SEBELUM DIRINGKAS | SESUDAH DIRINGKAS | CONTOH KERANGKA | KETERANGAN |
|---|---|---|---|
| h1 {color:green;} h2 {color:green;} h3 {color:green;} | h1, h2, h3 {color:green;} | <h1>OBJEK</h1> <h2>OBJEK</h2> <h3>OBJEK</h3> | Deklarasi color:green; akan mempengaruhi elemen <h1>, <h2> dan <h3> |
Penulisan Selektor Atribut dalam CSS
Atribut tag HTML dalam selektor CSS dapat dituliskan dengan menutupinya menggunakan simbol[ dan ]| SELEKTOR | CONTOH KERANGKA | KETERANGAN |
|---|---|---|
| a[title] {deklarasi} | <a href='#' title='hag'>OBJEK</a> <a href='#'>OBJEK</a> <img src='hompimpa.jpg' title='hag' /> | Deklarasi hanya akan mempengaruhi elemen <a> yang memiliki atribut title='' Elemen-elemen bukan <a> yang memiliki atribut title='' tidak akan ikut terpengaruh |
| input[type="button"] {deklarasi} | <input value='OBJEK' type='button' /> <input value='OBJEK' type='text' /> | Deklarasi hanya akan mempengaruhi elemen <input> yang memiliki atribut type='button' Elemen-elemen <input> dengan atribut selain type='button' tidak akan ikut terpengaruh |
Dua Metode Penulisan CSS
Ada dua metode penulisan dalam CSS, yaitu metode penulisan secara terpisah dengan memanfaatkan tag<style>, atau metode penulisan secara langsung dengan memanfaatkan atribut style=''| METODE PENULISAN SECARA TERPISAH DARI OBJEK SASARAN | METODE PENULISAN SECARA LANGSUNG PADA OBJEK SASARAN |
|---|---|
| <style type='text/css'> #hompimpa { proprti:value; properti:value; properti:value; } </style> .... .... <div id='hompimpa'> OBJEK </div> | <div style='properti:value;properti:value;proprti:value;'> OBJEK </div> |
Penulisan CSS secara terpisah dilakukan dengan memisahkan objek sasaran dari selektor yang dituliskan sesuai dengan keadaan objek sasaran agar berfungsi. Tag
<style> beserta komponen-komponen di dalamnya bisa diletakkan di mana saja, namun prosedur peletakkan yang benar adalah di dalam wilayah kekuasaan <head>, sementara objek sasarannya harus berada di dalam wilayah kekuasaan <body>.Penulisan CSS secara langsung dilakukan dengan memasukkan deklarasi-deklarasi ke dalam atribut
style='' tanpa menuliskan selektornya. Atribut class='' dan id='' sudah tidak penting lagi di sini, karena semua deklarasi sudah dituliskan secara langsung pada objek sasaran.
Posting Komentar