CSS Dasar
CSS Menengah

CSS Id Dan Class


Dalam CSS anda bisa membuat selector sendiri yang disebut dengan id dan class.

ID Selector

Semua elemen HTML yang memiliki id sama dengan nama style id yang anda deklarasikan akan memiliki style yang sama sesuai dengan id tersebut.

Id selector didefinisikan dengan tanda "#".

Misalkan pada contoh kode CSS berikut

#idku{color:red;}

Maka semua elemen HTML yang memiliki id = "idku" akan memiliki style yang sama, yaitu color:red.

Codingku HTML Editori
<!DOCTYPE html>

<html>

<head>

<style>

#idku{ color:red;} /* ini adalah definisi id css */

</style>

</head>

<body>

<p id="idku">Paragraf ini ber-id : idku </p>

<p>Paragraf ini paragraf tanpa id </p>

<p id="idloe">Paragraf ini ber-id : idloe </p>

</body>

</html>

Coba sendiri »

Bila anda perhatikan pada contoh di atas, paragraf dengan id="idloe" tidak memiliki perubahan atau sama dengan paragraf tanpa id karena "idloe" belum di atur di CSS.


Class Selector

Perbedaan utama dengan id selector adalah bila id selector digunakan untuk mendefinisikan satu elemen HTML sedangkan class selector umumnya digunakan untuk mendefinisikan style satu kelompok dari banya elemen.

Class selector didefinisikan dengan tanda titik ".".

.kelasku{color:green;}

Dari contoh kode CSS di atas :

  • .kelasku adalah nama dari kelas.
  • Semua elemen HTML dengan class "kelasku" akan berwarna green/hijau.

Codingku HTML Editori
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.kelasku { color:green; }

</style>

</head>

<body>

<h2 class="kelasku">Ini adalah heading dengan CSS class "kelasku"</h2>

</body>

</html>

Coba sendiri »

Anda juga bisa membuat class khusus bagi elemen-elemen tertentu.

p.kelasku{font-size:28px;}

Semua paragraf dengan class "kelasku" akan memiliki font-size sebesar 28 px.

Codingku HTML Editori
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p.kelasku { font-size:28px; }

</style>

</head>

<body>

<p class="kelasku">Ini adalah paragraf dengan class 'kelasku'</p>

</body>

</html>

Coba sendiri »


Situs ini masih dalam versi beta, artinya masih dalam proses pengembangan baik dari segi bug maupun isi yg kurang lengkap. Silahkan melihat-lihat yang sudah ada sementara ini, tiap hari kami akan berusaha untuk melengkapi kekurangannya...