Pengenalan ID dan Class Pada CSS

Sebelum anda melanjutkan membaca tulisan ini, pastikan anda telah memahami dasar-dasar penulisan syntax css, anda bisa melihat pada artikel sebelumnya tentang pengenalan css. Pada tulisan kali ini targetnya anda akan mampu memahami dan selanjutnya menggunakan ID dan Class pada CSS.

Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.
Selector ID
Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
Contoh selector ID

#par1
{
     text-align:center;
     color:red;
}

Pada bagian dokumen HTML, untuk menggunakan style tersebut, misalnya pada sebuah paragraph, bisa dituliskan:

<p id="par1">Ini adalah sebuah paragraph</p>

Penulisan nama id sebaiknya tidak diawali dengan nomor, karena tidak akan dikenali pada browser Mozilla Firefox

Selector Class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh selector class

.komentar 
{
     text-align:left;
     color:red;
}

Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan

<p class="komentar"> Ini adalah paragraph komentar </p>

<div class="komentar">Ini bagian komentar</p>

Bagian mana saja dari sebuah dokumen html yang memanggil class ini, akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan akan berada di tengah dan berwarna merah.  Pada kondisi lain, kita menginginkan apabila sebuah class hanya berlaku pada sebuah paragraph saja. Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai berikut:

p.komentar {text-align:center;}

Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki class=”komentar” saja.

Cukup sampai disini tulisan kali ini, berikutnya akan dilanjutkan dengan 3 cara memasukkan dokumen css ke dalam halaman web anda. Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…

Incoming search terms:

Be Sociable, Share!

Related Posts:

9 Comments

Add a Comment

Your email address will not be published. Required fields are marked *