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. 
Taman Kanak-Kanak Raudhatul Athfal Miftahul Jannah KuntiliKecamatan Sumpiuh Kabupaten Banyumas Provinsi Jawa Tengah - 53195 
- Dimas Okaisy menulis komentar/memulai diskusi di Template blogazine 210492
- Denddy Gustiana menulis komentar/memulai diskusi di Bantu saya menjawab pertanyaan
- Ahmad Nurfadilah menulis komentar/memulai diskusi di Template blogazine 210492
- Ahmad Nurfadilah menulis komentar/memulai diskusi di Template blogazine 210492
- Ahmad Nurfadilah menulis komentar/memulai diskusi di Template blogazine 210492
- Planet Pengetahuan menulis komentar/memulai diskusi di Membuat komentar slide panel pada
- MrDark ShixNhine menulis komentar/memulai diskusi di Css3 column count
10 Komentar:
Selasa, 02 Agustus 2011 13:01:00 WIB Permalink
Capek juga nulis tutorial yang serius. Moga2 nggak ada yang copas. Amiiin..
Senin, 08 Agustus 2011 08:49:00 WIB Permalink
Bedanya cuma ada pada jatah jabatannya. Dalam satu berkas HTML, CLASS bisa dituliskan lebih dari satu, tapi ID hanya boleh dituliskan satu kali saja seumur hidup. Menyedihkan, ya?
Jumat, 12 Agustus 2011 13:23:00 WIB Permalink
save dolo mas, mas bole tanya lagi gk cara mambuat komentar kayak d blogny om ladida gmna y ukuranny kecil gitu selengkapny lihat comment fromny om ladida
Senin, 16 April 2012 04:44:00 WIB Permalink
nich baru kawand yang namanya tutorial..
good jobs..
good jobs..
Sabtu, 28 April 2012 19:11:00 WIB Permalink
Mas untuk blogzine setelah saya memasukan ini dalah entri mode HTML
body, .post-body {}.post-body {}wrappper{}body{display:none !important}#comments{}#sidebar{}footer{}#header{}html{display:none !important}blockquote, q {}
#sidebar-wrapper,#sidebar2-wrapper,#sidebar3-wrapper,{display:none!important;}
#header-wrapper,#credit-wrapper,.menupic,.menu-horisontal{display:none;}
#content-wrapper{width:100%;}
#comments{display:none;width:75%;margin-left:auto;margin-right:auto;margin-top:-10%;}
#comment-editor{width:100%;margin-left:auto;margin-right:auto;}terus saya melayout kok masih tidak nampil juga yach layoutnya, saya pigin merubah blog saya jadi blogazine mas, mohon pencerahannya... 
Sabtu, 28 April 2012 21:06:00 WIB Permalink
Saya sih biasanya menggunakan CSS ini untuk mereset tampilan awal:
html,
body,
#content-wrapper {
margin:0px 0px;
padding:0px 0px;
border:none;
background:transparent;
box-shadow:none;
}
#content-wrapper {
margin:0px auto 0px;
padding:50px 40px 20px;
width:auto;
}
a, a:link,
a:visited,
#blog-pager a {color:pink;}
#nav,
#nav ul,
#nav li,
#nav li a,
#nav li a:hover {
background:transparent;
padding:0px;
margin:0px;
text-transform:none;
}
#sidebar-wrapper,
.breadcrumb {display:none !important;}Tapi itu tidak mutlak, semuanya memiliki perbedaan.
NB: Setelah selektor terakhir tidak perlu ditambah tanda koma lagi:
#sidebar-wrapper,
#sidebar2-wrapper,
#sidebar3-wrapper {display:none!important;}
#header-wrapper,
#credit-wrapper,
.menupic,
.menu-horisontal {display:none;}
#content-wrapper {width:100%;}
#comments {
width:75%;
margin-left:auto;
margin-right:auto;
margin-top:-10%;
}
#comment-editor{
width:100%;
margin-left:auto;
margin-right:auto;
}Kalau selektor
body {} dan html {} dihilangkan ya nggak bakalan kelihatan layoutnya hehe...Terkait: CSS Reset
Sabtu, 28 April 2012 23:11:00 WIB Permalink
Untuk kode yang saya berikan tadi belum saya reset templetenya mengunakan CSS eric mayer, saya mengunakan templete denim yang standar mas kerena templete itu udah lumayan saya pelajari dalamnya, kalau mengunakan css reset eric mayer malah membuat saya binggung dengan text multi colom kerena berantakan sekali kelihatannya. tapi saya akan coba CSS reset mayer dengan memadukan yang barusan diberi sama mas taufik. terima kasih pencerahannya,jika ada masalah saya nanya lagi ok. happy blogging... salam dua jari (telunjuk dan tengah)
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag
<i rel="code">KODE ANDA</i>Kode yang panjang bisa menggunakan tag
<i rel="pre">KODE PANJANG ANDA</i>Untuk menyisipkan gambar, gunakan tag
<i rel="image">URL GAMBAR</i>Untuk menyisipkan judul, gunakan tag
<b rel="h3">JUDUL ANDA DI SINI...</b>Untuk menciptakan efek tebal gunakan tag
<b>TEKS ANDA DI SINI...</b>Untuk menciptakan efek huruf miring gunakan tag
<i>TEKS ANDA DI SINI...</i>Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
SUMBER http://hompimpaalaihumgambreng.blogspot.com/2011/08/aturan-penulisan-selektor-dalam-css.html#.UCinbKDhKuJ
Sekarang semua browser mendukung tag tertentu HTML5 bahkan IE6 pun memahami arti <!doctype html> dan akan membuat halaman dengan benar.
