Pengenalan ID dan Class Pada CSS

Pengenalan ID dan Class Pada CSS    

                             Assalamu'alaikm Wr.Wb

A. PENDAHULUAN 
        Bertemu lagi dengan blog yang sederhana ini, kali ini saya membahas tentang ID dan Class Pada CSS.

B. LATAR BELAKANG
       ID didefinisikan dengan menggunakan tanda ” # ” dan CLASS didefinisikan dengan menggunakan tanda titik ” . ” .

Read more at www.spiderbeat.com: ID dan CLASS dalam CSS

C. TUJUAN
       Pada tulisan kali ini targetnya anda akan mampu memahami dan selanjutnya menggunakan ID dan Class pada CSS.

D. PEMBAHASAN 
      ID dan CLASS dalam pemrograman CSS Adalah selector yang dibuat oleh seorang webmaster dalam memanipulasi pada satu elemen pada halaman HTML / web.
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

1

#par1

2

{

3	text-align:center;

4	color:red;

5

}

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

1	<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

1

.komentar

2

{

3	text-align:left;

4	color:red;

5

}

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

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

1	<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:

1	p.komentar {text-align:center;}

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

Read more at www.spiderbeat.com: ID dan CLASS dalam CSS

E. KESIMPULAN
        Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…

F. PENUTUP
      Cukup sampai disini tulisan kali ini, dan sampai jumpa lagi.



                         Wassalamu'alaikum Wr.Wb