Contoh kegunana id fan class di CSS
Contoh kegunana id fan class di CSS
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.
<!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>
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.
<!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>
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.
<!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>
Comments
Post a Comment