Perbedaan TAG, ID dan Class Pada CSS

CSS memiliki beberapa komponen yang digunakan dalam proses development web. Beberapa komponen paling umum adalah TAG, ID dan Class. Ketiga komponen tersebut, masih terlihat membingungkan bagi pemula. Oleh karena itu artikel ini akan menjelaskan perbedaan antara TAG, ID dan Class pada CSS serta bagaimana penggunaannya.

TAG

TAG adalah komponen atau penyeleksi dalam CSS yang mirip dengan tagline pada HTML, seperti tagline p, h1, body, dan lainnya. Penulisan TAG harus sesuai dengan tagline yang ada di HTML

Apapun perubahan yang dibuat pada CSS, jika tagline tersebut digunakan di HTML, maka semua yang menggunakan tagline tersebut akan berubah tampilannya, lihat contoh dibawah ini :

Style.css

body{
    background-color: chartreuse; 
}
p{
    color: tomato;
}
h1{
    color: blue;
}

h3{
    color: gold;
}

MainPageKedua.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
    Ini adalah tulisan tanpa tagline  putugunacom
    <p>Ini adalah tulisan dengan tagline P putugunacom</p>
    <h1>Ini adalah tulisan dengan tagline h1 putugunacom</h1>
    <h3>Ini adalah tulisan dengan tagline h3 putugunacom</h3>
</body>
</html>

Pada kode HTML diatas terlihat masing-masing kalimat menggunakan tagline yang berbeda sesuai dengan TAG yang di buat pada file CSS. Hasilnya akan berubah sesuai dengan modifikasi pada CSS ny, lihat gambar dibawah ini :

Output TAG

Bagaimana cara pemanggilan TAG di HTML?

Baca juga : Cara yang baik bertanya di forum pemrograman

Tidak ada cara yang spesial yang digunakan untuk memanggil TAG CSS di HTML, cukup dengan menuliskan tagline nya saja. Jika di CSS ditulis h1{…}, maka panggilah tagline h1 sesuai dengan kaidah penulisan tagline pada HTML, yaitu <h1>text kamu</h1>

ID

ID adalah salah satu komponen dalam CSS yang bercirikan tanda pagar (#). Berbeda dengan penamaan TAG yang harus sesuai dengan nama tagline di HTML, penamaan ID bebas, asalkan ada tanda pagar didepannya

Style.css

#pembungkusKalimat{
    background-color: darkslategrey;
    padding: 5px 5px 5px 5px;
}

#pembungkusKalimat p, h1{
    color: gold;
}

MainPageKedua.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
<div id="pembungkusKalimat">
    Tulisan ini berada dalam DIV ID putugunacom
    <p>Tulisan ini menggunakan tagline p dalam DIV ID putugunacom</p>
    <h1>Tulisan ini menggunakan tagline h1 dalam DIV ID putugunacom</h1>
</div>
</body>
</html>

Hasil dari kode HTML diatas, adalah sebagai berikut :

Output ID

Baca juga : Cara penulisan attribute, class, method pada Android Studio

Background tersebut berubah bukan karena tagline <body>, tapi tagline <div>, lihat di CSS nya, tagline <body> tidak di tulis apa-apa, jadi hasil pada HTML nya pun tidak akan berwarna apa-apa, hanya warna defaultnya putih.

Bagaimana cara pemanggilan ID?

Pemanggilan ID dilakukan dengan menggunakan bantuan tagline <div id=”pembungkusKalimat”>. Lihat kembali kode CSS #pembungkusKalimat, disana diset background-color : darkslategrey;, maka background didalam <div id=”pembungkusKalimat”>…</div> akan berubah menjadi warna darkslategrey, meskipun background bodynya berbeda warna. Pada output gambar diatas kan jelas, backgroundnya warna putih, sedangkan div nya berwarna gelap (darkslategrey).

Apa bedanya #pembungkusKalimat{} dan #pembungkusKalimat p, h1{} ?

#pembungkusKalimat yang pertama adalah sebagai inisialisasi ID. Jika tanpa inisialisasi seperti itu, maka ID #pembungkusKalimat tidak dapat diakses. Artinya jika langsung menulis #pembungkusKalimat p, h1{}, maka ID pembungkusKalimat tidak dapat diakses.

Sedangkan #pembungkusKalimat p, h1{} artinya semua tagline <p> dan tagline <h1> yang berada didalam tagline <div id=”pembungkusKalimat”> akan berubah sesuai dengan settingan yang ada di CSS nya.

Jika kalian ingin merubah tampilan tagline <h3> di dalam <div id=”pembungkusKalimat”>, maka tambahkan saja tagline baru h3, menjadi seperti ini #pembungkusKalimat p, h1, h3{}.

Class

Baca juga : Belajar Menggunakan Fragment Pada Android

Komponen class pada CSS bercirikan tanda titik (.) sebelum nama classnya. Penamaan class bebas dengan syarat harus ada tanda titik pada awal penamaan.

Style.css

.kotakTulis {
    background-color: blue;
    padding: 5px 5px 5px 5px;
}

.kotakTulis p, h1{
    color: aliceblue;
}

MainPageKedua.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
<div class="kotakTulis">
    Tulisan ini berada dalam DIV CLASS putugunacom
    <p>Tulisan ini menggunakan tagline p dalam DIV CLASS putugunacom</p>
    <h1>Tulisan ini menggunakan tagline h1 dalam DIV CLASS putugunacom</h1>
</div>
</body>
</html>

Hasil dari code diatas akan sesuai dengan setting style class di CSS nya, seperti gambar dibawah ini :

Output Class

Bagaimana cara pemanggilan Class?

Hampir sama seperti pemanggilan ID, pemanggilan class juga dilakukan melalui tagline <div>. Bedanya setelah menggunakan attribute class, yaitu <div class=”kotakTulis”>…</div>. Apapun yang dirubah pada class .kotakTulis pada CSS, maka akan seperti itulah hasilnya pada HTML nya.

Apa bedanya .kotakTulis{} dan .kotakTulis p, h1{} ?

Ini penjelasannya sama persis dengan ID yaitu, .kotakTulis{} adalah inisialisasi yang pertama, dan .kotakTulis p, h1{…} adalah menentukan tampilan tagline p dan h1 yang berada <div class=”kotakTulis”>.

Jadi Apa Perbedaan TAG, ID dan Class?

Perbedaan secara global dan sederhana adalah sebagai berikut :

TAG adalah komponen yang ada pada CSS yang mirip dengan tagline di HTML. Digunakan untuk merubah tampilan tagline HTML, seperti <body>, <h1>, <p>, <h2> dan lainnya.

ID adalah komponen yang ada pada CSS yang bersifat Unik. Artinya cuma ada satu dalam satu file CSS. Ciri yang paling mencolok adalah penggunaan tanda pagar (#). ID biasanya digunakan pada bagian yang bersifat khusu dan jelas seperti #header, #footer, #wrapper, #sidebar dan lainnya.

Class adalah komponen yang ada pada CSS dengan ciri ada tanda titik pada awal penamaannya. Berbeda dengan ID yang dibuat khusus untuk hal-hal khusus dan unik, komponen class bisa dibuat suka-suka. Tujuan utamanya adalah mempercantik halaman. Class bisa digunakan di dalam komponen ID, artinya begini : <div id=”wrapper”> … <div class=”kotakMasuk”>…</div> … </div>.

Penutup

Sebenarnya ada beberapa hal atau kondisi lagi yang terjadi pada TAG, ID dan Class namun tidak terlalu urgent, kalian bisa temukan sendiri nanti saat proses development. Yang terpenting adalah kalian sudah tau apa perbedaan TAG, ID dan Class dan bagaimana cara penggunaannya.

Semoga artikel yang saya posting kali ini bisa membantu teman-teman yang sedang belajar CSS dan HTML.

(Visited 78 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini