Ketika anda membuka kode yang digunakan dalam desain blog/web akan banyak menemukan kode html dengan selector id dan class. Kedua selector ini berfungsi untuk membentuk style khusus pada elemen html. Id dituliskan dalam bentuk id="xxx" sedang class dituliskan dalam bentuk class="xxx". Penulisan id dan class dalam elemen html berhubungan dengan penggunaan selector id dan class dalam kode css yang digunakan. Dalam kode css, selector id dituliskan sevagai "#" dan class sebagai ".".
Penggunaan selector id dan class
- Selector id digunakan secara khusus pada sebuah elemen tunggal yang berdifat unik. Sebuah elemen dengan id tertentu biasanya diikuti oleh beberapa elemen lain dengan class tertentu ataupun tanpa selector. Elemen dengan selector id bersifat atau mempunyai kekuatan tertentu yang tak dipengaruhi oleh id yang berbeda. Jika sebuah elemen dapat mempunyai beberapa class secara bersamaan, maka id hanya digunakan secara tunggal. Contoh kasus : Jika anda menggunakan id yang sama pada dua gadget atau lebih (di template blogger), maka akan ditolak oleh blogger saat "Save Template" dilakukan.
- Selector class mempunyai fungsi yang sama dengan selector id, dimana bertujuan untuk membentuk sebuah style/gaya tertentu pada sebuah elemen html. Jika id digunakan sebagai penanda unik elemen tunggal, maka selector class dapat digunakan secara bersamaan pada beberapa elemen sekaligus. Beberapa class juga bisa digunakan secara bersamaan pada 1 (satu elemen).
Contoh penggunaan & penulisan selector id
#header-wrapper{
margin:0;
padding:0;
background-color:#528bc5;
text-align:left;
}
#main-wrapper{
margin-left:2%;
width:64%;
float:left;
background-color:#fff;
display:inline;
word-wrap:break-word;
overflow:hidden;
}
p#sastro{
text-align:left;
color:blue;
}<div id="header-wrapper"></div> <div id="main-wrapper"></div> <p id="sastro">Tulis teks disini!</p>
Contoh penggunaan & penulisan selector class
.date-header{
margin:1.5em 0 0;
font-weight:normal;
color:#999999;
font-size:100%;
}
.post{
margin:0 0 1.5em;
padding-bottom:1.5em;
}
.post-title{
margin:0;
padding:0;
font-size:125%;
font-weight:bold;
line-height:1.1em;
}
.post-title .oranye{
color:orange;
font-weight:bold;
}<div class="date-header"></div> <div class="post"></div> <div class="post-title">Tulis teks disini!</div>
Dalam demo di bawah ini ada beberapa contoh penggunaan id dan class. Edit kode untuk mendapatkan hasil berbeda!
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar