Selasa

Belajar CSS Bagian 2 : Selector ID dan Class



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.

0 comments

Posting Komentar

Silahkan Berikan Komentar Anda Disini.

Ping your blog, website, or RSS feed for Free