Sekarang kita masuk ke tutorial belajar css bagian kedua,
disini saya akan mencoba membahas mengenai selector ID dan Class.
Fungsi Selector ID dan Class.
ID digunakan untuk style elemen tunggal dan biasanya
memiliki banyak property didalamnya. Penulisan selector ID di css diawalai
dengan tanda “#” dan implementasi di HTML diawali dengan tanda <div id=”nama
selector”> dan diakhiri dengan tanda </div>
Class digunakan untuk menentukan style pada sekelompok
element, bentuk penulisan di css diawali dengan tanda ‘.’ Dan implementasi di
html pada property yang ingin digunakan tambahkan kata class = “namaclass”.
Contoh penggunaan selector ID dan Class.
Buat sebuah file css baru, lalu beri nama dengan contohid.css.
Lalu ketikan code berikut ini :
#contohid /*--deklarasi selector ID--*/
{
color : blue;
background-color : yellow;
font-size : 20px;
text-align : center;
}
.contohclass /*--deklarasi selector class--*/
{
background-color : blue;
color : white;
text-align : center;
}
Kita lihat pada code diatas pengimplementasian selector ID
diawali dengan tanda ‘#’ lalu diikuti dengan deklarasi yang berisi property dan
valuenya. Sedangkan selector Class diawali dengan tanda ‘.’ Yang diikuti juga
dengan property beserta valuenya.
Buat juga sebuah file html baru, beri nama home.html lalu
masukan code html berikut ini :
<html>
<head>
<title>Belajar CSS 2</title>
<link rel = "stylesheet" href="contohid.css" type="text/css">
<body>
<div id = "contohid">
<p>Ini adalah contoh text yang mengimplementasikan selector id</p>
</div>
<p>ini adalah contoh text yang tidak mengimplementasikan selector id</pd>
<p class="contohclass">contoh text dengan selector class</p>
<p>contoh text tanpa selector class</p>
</body>
</html>
Maka nanti tampilannya akan menjadi seperti gambar dibawah
ini :
Ok semoga tutorial belajar css bagian kedua ini dapat
memberikan sedikit pencerahan bagi para pembaca, sampai jumpa pada tutorial
selanjutnya.
