#3 CSS – id dan class selector

ID Selector

Id Selector ditulis sebagai attribute pada html untuk menandai elemen mana yang akan kita pilih dan id hanya bisa bekerja dalam satu penandaan saja. Pada halaman CSS id dipanggil dengan tanda hash (#). Berikut contoh penggunaan id :

file index.html

<!DOCTYPE html>
<html>

<head>
    <title>id selector</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>id selector</h1>
    <div id="kotak">Kotak</div>
</body>

</html>

file style.css

#kotak {
    height: 100px;
    width: 100px;
    color: #fff;
    background: red;
    text-align: center;
    line-height: 100px;
}

Class selector

Hampir sama dengan id, class selector ditulis sebagai attribute. Class selector bisa digunakan lebih dari satu penandaan. Pada file CSS class dipanggil dengan tanda titik/dot (.) Berikut contoh penggunaan class :

file index.html

<!DOCTYPE html>
<html>

<head>
    <title>class selector</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>class selector</h1>
    <div class="kotak merah">Kotak</div>
    <div class="kotak biru">Kotak</div>
    <div class="kotak merah">Kotak</div>
    <div class="kotak biru">Kotak</div>
</body>

</html>

file style.css

.kotak {
    height: 100px;
    width: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

.merah {

    background: red;
}

.biru {

    background: blue;
}

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *