Tutorial HTML: Penambahan Class dan ID

Dua hal ini akan sangat sering anda jumpai sangat bermain-main dengan HTML dan CSS bahkan Javascript. Tapi, sebelum memahami tutorial html tentang penambahan class dan id, pastikan anda paham dulu apa itu atribut pada html dan juga cara menambahkan kode css pada HTML. Agar lebih memantapkan dalam mempergunakan class dan id.

Silahkan diingat Class dan ID dinamakan Selector/Selektor. Sebenarnya ada banyak sekali selektor yang tersedia, tapi untuk permulaan mari kita bahas kedua selektor class dan id ini. Selektor ini nantinya akan difungsikan sebagai penanda bagi si tag HTML agar bisa berkomunikasi dengan CSS (dan JavaScript). Nah, bagaimana menggunakannya? Mari kita bahas..

Selektor Class

Sama seperti namanya, selektor class (kelas) dipergunakan untuk memberi format style (css) pada suatu elemen. Dengan mengelompokkan elemen tersebut dan memberi efek yang sama. Singkatnya, class yang sama untuk format yang sama.

Pendefenisian class pada HTML dibuat dengan sintaks dasar berikut.

<tag class="namakelas">...</tag>

Sebagai conoh kode kita memberi class pada beberapa<div> berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Class dan Id</title>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</body>
</html>

Jika kita perhatikan kode diatas, terdapat tiga buat elemen <div> dimana setiap elemen diberi class dengan nama box. Nah, setelah memberi class, bagaimana menambahkan CSS nya?

Silahkan diingat, pendefenisian kelas pada CSS diwakilkan dengan tanta “.” (titik), kemudian diikuti nama kelas. Atau sintaks nya sebagai berikut.

.namakelas { 
    // Kode CSS
}

Untuk menambahkannya pada dokumen HTML cukup mudah, dan itu sebabnya diatas tadi ditekankan untuk bisa terlebih dahulu cara menambahkan CSS pada html. Silahkan buka tetap dengan kode tadi diatas, dan rubah menjadi sebagai berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: magenta;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</body>
</html>

Jika dijalankan di browser akan tampil berikut.

HTML Dasar : Class

Dari hasilnya terdapat tiga <div> dengan kelas .box, sebagai tambahan setiap elemen bisa dibubuhi beberapa kelas dan tak ada batasan. Sebagai contoh kode berikut, silahkan improve dan cek hasilnya sendiri.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: magenta;
            margin: 10px;
        }
        .box1 {
            border: 10px solid cyan;
        }
    </style>
</head>
<body>
    <div class="box box1">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</body>
</html>

Selektor ID

Sebenarnya bisa kita identifikasi bagaimana cara kerja selektor ini dari namanya saja. Sama seperti setiap orang punya id (identitas) masung-masing dan sifatnya unik (hanya ada satu). Nah, dari penjelasan singkat itu bisa kita tarik sedikit pemahaman bahwa selektor id merupakan selektor yang unik atau hanya dipunyai oleh satu elemen saja pada suatu dokumen HTML.

Jika pada selektor Class diwakilkan dengan tanda “.”, untuk selektor Id diwakilkan dengan tanda “#” atau paga/sharp. Pendefenisiannya pada html ditulis sebagai berikut.

<tag id="nama">..</tag>

Sebagai contoh ikuti kode berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background: orange;
        }
        #box2 {
            background: green;
            width: 200px;
            height: 200px;
        }
      </style>
</head>
<body>
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
</body>
</html>

Jika kita jalankan kode diatas maka akan menampilkan sebagai berikut,

HTML Dasar : Selektor ID

Bagaimana jika ingin membuat id dan class secara bersamaan? Bisa saja, kita tinggal memakai atribut class dan id secara bersamaan. Tak ada masalah.

Kesimpulan

Penggunaan Selektor Class dan ID sangat sangat diperlukan untuk melakukan pemformatan, baik untuk styling CSS atau scripting pada JS. Untuk setiap elemen bisa dibubuhi beberapa class, berbalik dengan id yang bersifat unik.

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com