Penggunaan ID & Class Dalam CSS

Setelah kita sudah mengetahui Sintaks CSS, Kali ini kita akan mempelajari tentang ID & Class Dalam CSS. Selain tag elemen HTML yang menjadi Selector, Ternyata ID & Class juga bisa menjadi selector. Ini dikarenakan untuk memberikan beberapa style berbeda dalam satu elemen HTML.

Contohnya kita membuat 2 paragraf dengan style berbeda. Paragraf 1 menggunakan huruf berwarna putih & Paragraf 2 menggunakan huruf berwarna hitam. Solusinya anda dapat membuat ID / Class dalam tag HTML yang mana ID & Class tersebut akan diberikan Style berbeda. ID &Class dapat dibuat dengan kata sesuai keinginan kita & untuk penerapannya kita harus memanggil id / class dalam tag HTML.

Contoh penggunaan ID menggunakan # dalam CSS

#hitam {

    color:#000;

    font-size:18px;

}

#putih {

    color:#fff;

    font-size:18px;

}

Penerapan ID dalam HTML bisa anda tulis sebagai berikut

1

2

3

4

5

6

7

<p id="hitam">

    Ini Tulisan Warna Hitam

</p>

<p id="putih">

    Ini Tulisan Warna Putih

</p>

Contoh penggunaan Class menggunakan . dalam CSS

.hitam {

    color:#000;

    font-size:18px;

}

.putih {

    color:#fff;

    font-size:18px;

}

Penerapan Class dalam HTML bisa anda tulis sebagai berikut

1

2

3

4

5

6

7

<p class="hitam">

    Ini Tulisan Warna Hitam

</p>

<p class="putih">

    Ini Tulisan Warna Putih

</p>

Untuk penjelasan lebih lanjut tentang Selector & Atribut CSS akan saya bahas dalam artikel tentang pembelajaran CSS yang saya rangkum dalam Daftar Isi Belajar CSS Untuk Pemula.

Created By : Nurul Imam Date : 5 - November - 2013