CSS Class dan CSS Id

CSS Class dan CSS Id. Untuk membuat style suatu tag atau elemen HTML, CSS memungkinkan kita secara khusus atau spesifik mengidentifikasi tag atau elemen HTML yang disebut dengan CSS class dan CSS Id.

CSS Class

CSS Class adalah sintax CSS yang digunakan untuk memformat tag atau elemen HTML dengan properti dan value yang sama, dimana tag atau elemen HTML tersebut akan muncul lebih dari satu kali dalam halaman web.

Sebagai contoh dalam suatu halaman web pasti terdapat beberapa paragraf dan jika seluruh paragraf itu ingin diformat dengan warna font, jenis font dan size font yang sama, maka cukup mendefenisihkan style sheetnya dengan memberikan class pada tag p tersebut, sebagai contoh;

isi paragraf

. Untuk memberikan style yang sama pada paragraf-paragraf tersebut tinggal memanggil class center dari tag p diatas untuk diformat dengan CSS.

Style yang dibuat dengan CSS class juga bisa diaplikasikan kedalam tag atau elemen HTML yang berbeda. Sebagai contoh untuk tag p dan tag h bisa diformat dengan class yang sama, sehingga ketika kita memanggil class yang sudah dibuat, p dan h akan muncul dengan syle yang sama.

Format penulisannya adalah;

Selector.class-name {property:value;} atau .class-name {property:value;}

Misalnya;

p.center
{
color:red;
font-family:trebuchet;
text-align: center;
font-size:20px;
}

Maka seluruh paragraf dengan class “center” akan tampil dengan warna font merah, jenis font trebuchet dan ukuran fontnya 20px. Akan tetapi bagaimana jika kita ingin membuat tampilan antar paragraf berbeda? Untuk pengaturan inilah dibutuhkan CSS Class.

Untuk mempermudah pemahaman akan CSS Class ini kita akan langsung masuk ke contoh aplikasi. Dalam contoh ini kita akan menggunakan Internal CSS.

Contoh aplikasi;

1. #header akan memanggil id header untuk diformat dengan CSS.
2. Dikarenakan id header berada dalam tag
   maka style CSS hanya akan memformat bagian yang dibatasi oleh tag
   tersebut.
3. Dalam prakteknya CSS id bisa digunakan lebih dari satu kali untuk elemen atau tag HTML yang berbeda akan tetapi penggunaan ini tidak dianjurkan oleh W3C ( World Wide Web Concorsium ) dan juga penggunaan CSS id lebih dari satu kali akan membuat halaman web tidak valid.
4. Jangan membuat angka sebagai nama id karena id tersebut tidak akan terbaca untuk internet browser seperti Mozilla Firefox.

Hasil Aplikasi;



Karena pada dasarnya CSS class dan CSS id adalah sama maka;

1. Jika style CSS yang anda buat akan diaplikasikan ke dalam tag-tag HTML lebih dari satu kali, misalnya untuhk h1, h2, h3 anda ingin memberikan properti dan value yang sama, maka gunakan CSS class.
2. Jika style CSS yang anda buat akan diaplikasikan ke dalam tag HTML dengan id yang unik dan hanya akan dimunculkan sekali saja maka gunakan CSS id. Contoh untuk memformat header, siderbar atau outer gunakan CSS id.

Cukup sekian posting mengenai CSS class dan CSS id, semoga bermanfaat. Penulis sangat yakin bahwa sebuah topik atau materi jika dibahas secara bersama-sama dengan kemungkian tingkat pemahaman atau pengetahuan yang berbeda akan membuat topik atau materi tersebut bisa dipahami lebih mudah dan lebih mendalam, sehingga suatu saat kita akan menjadi salah satu ahli dalam topik atau materi tersebut.

Posting dikuting dari sumber : http://blogcaholic.blogspot.com