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 ialah adonan antara properti dengan value/nilainya.
img ialah selektor, background dan padding ialah properti, #EEEEEE dan 5px ialah value. background:#EEEEEE; dan padding:5px; ialah deklarasi.Suatu dikala mungkin kalian juga akan melihat susunan aba-aba yang tampak berbeda ibarat 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 aba-aba yang akan kalian temui nantinya tidak akan mempengaruhi apapun.
Aturan Penulisan Selektor dalam Tag Murni
Untuk tag-tag dengan kondisi yang masih murni sanggup kau tuliskan apa adanya sesuai dengan nama tagnya ibarat beberapa teladan 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 mempunyai ID hompimpa |
| .hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> | Deklarasi akan mempengaruhi objek di dalam elemen yang mempunyai 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 mempunyai CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang mempunyai 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 mempunyai CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang mempunyai 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 mempunyai 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 mempunyai ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang mempunyai 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 mempunyai 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 mempunyai CLASS hompimpa di dalam elemen <div> induk, namun tidak akan mempengaruhi elemen <div> yang mempunyai 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 mempunyai ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang mempunyai CLASS hompimpa |
Meringkas Beberapa Selektor bagi Elemen yang Memiliki Deklarasi Sama
Penulisan selektor sanggup diringkas dengan memisahkannya memakai 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 sanggup dituliskan dengan menutupinya memakai 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 mempunyai atribut title='' Elemen-elemen bukan <a> yang mempunyai 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 mempunyai 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 eksklusif 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 target dari selektor yang dituliskan sesuai dengan keadaan objek target semoga berfungsi. Tag
<style> beserta komponen-komponen di dalamnya sanggup diletakkan di mana saja, namun mekanisme peletakkan yang benar ialah di dalam wilayah kekuasaan <head>, sementara objek sasarannya harus berada di dalam wilayah kekuasaan <body>.Penulisan CSS secara eksklusif dilakukan dengan memasukkan deklarasi-deklarasi ke dalam atribut
style='' tanpa menuliskan selektornya. Atribut class='' dan id='' sudah tidak penting lagi di sini, alasannya semua deklarasi sudah dituliskan secara eksklusif pada objek sasaran. Sumber https://www.dte.web.id/