Apa Perbedaan class dan ID dalam deklarasi dan penggunaan di CSS?

Table of Contents Show

Belajar Cara Menggunakan Selector ID, Class dan Tag Pada CSS & Perbedaan Ketiganya - Komponen yang ada didalam kode CSS ini terbagi dalam kode penyeleksi yang disebut sebagai Selector. Dan selector ini umumnya dibagi menjadi 3 yaitu selector id, selector class, dan selector tag
Apa perbedaan antara class dan ID dalam CSS?
Apa Perbedaan Selector ID dengan class?
Apa itu ID dalam CSS?
Apa gunanya class pada CSS?

Belajar Cara Menggunakan Selector ID, Class dan Tag Pada CSS & Perbedaan Ketiganya - Komponen yang ada didalam kode CSS ini terbagi dalam kode penyeleksi yang disebut sebagai Selector. Dan selector ini umumnya dibagi menjadi 3 yaitu selector id, selector class, dan selector tag

Belajar Cara Menggunakan Selector ID, Class dan Tag Pada CSS & Perbedaan Ketiganya - Dalam menggunakan kode CSS, ada beberapa aturan baku yang harus dilakukan dengan memperhatikan setiap komponen yang ada dalam kode CSS tersebut. Didalam kode CSS tersebut terbagi dalam beberapa komponen yang memiliki fungsi yang berbeda meskipun dalam pendeklarian kodenya memiliki value atau nilai yang sama.

Komponen yang ada didalam kode CSS ini terbagi dalam kode penyeleksi yang disebut sebagai Selector. Dan selector ini umumnya dibagi menjadi 3 yaitu selector id, selector class, dan selector tag. Ketiga selector ini memiliki fungsi yang berbeda sesuai dengan deklarasi yang diberikan, namun ada yang sama dan pada masing-masing selector memiliki markup HTML yang sama dengan selector pada CSS. Bingung? Yuk kita bahas saja bersama-sama...

Selector Tag
Pada pembahasan sebelumnya mengenai Apa itu CSS, kami sudah menyebut dan memberikan contoh tentang selector tag ini. Selector tag ini didalam markup HTML biasanya ditulis langsung sesuai tag yang ada pasa CSS.

Cara Membuat Selector Tag CSS
Beberapa kode selector tag yang biasanya umum digunakan adalah tag body, p, span, h1, h2, h3, dan sebagainya. Dan penulisannya dalam bentuk kode CSS adalah sebagai berikut:

body {
    background-color: #ffffff; 
}
p {
    color: #000000;
}
h1 {
    color: #000fff;
}
h3 {
    color: #fff000;
}

Jika masing-masing tag memiliki declaration, property dan value yang sama maka penulisannya dalam kode CSS bisa dilakukan menjadi satu yang ditandai dengan tanda koma pada masing-masing selector. Contohnya seperti ini:

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

Maka penulisan kode CSS diatas bisa dibuat seperti berikut:

p, h1, h3, {
    color: #000000;
}

Cara Menggunakan Selector Tag di Markup HTML
Untuk penulisannya dalam markup HTML, maka harus sesuai dengan kode tag tag yang digunakan pada kode CSS. Contohnya seperti berikut ini:

<body>
    <p>Ini adalah tag p</p>
    <h1>Ini adalah tag h1</h1>
    <h3>Ini adalah tag h3</h3>
</body>

Maka hasil tampilan dari markup HTML diatas adalah sebagai berikut:

Selector ID CSS
Sama halnya dengan selector tag yang telah dijelaskan diatas, namun pada selector ini ditandai dengan penggunaan tanda pagar (#) pada selector tagnya. Sedangkan untuk penggunaanya, selector ID hanya bisa digunakan satu kali dalam masing-masing halaman tampilan blog. Misalnya pada bagian header blog, body blog, sidebar blog, dan footer blog hanya memiliki satu ID markup HTML dengan selector ID yang sama, kecuali selector ID yang digunakan berbeda maka bisa menggunakan ID markup HTML yang banyak.

Cara Membuat Selector ID CSS
Sama halnya dengan membuat kode CSS pada selector tag, namun pada selector ID menggunakan tanda pagar pada selectornya sedangkan untuk tagnya bebas menggunakan atribut apa saja. Contohnya adalah sebagai berikut:

#header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;

Kode CSS diatas menggunakan tag

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

6 dengan selector ID karena adanya tanda pagar (#). Selector header ini bisa diganti dengan nama tag lain yang sesuai dengan keinginan pengguna. Misalnya diganti dengan

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

7, maka penulisan kode CSSnya menjadi seperti berikut:

#bagiankepala {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;

Cara Menggunakan Selector ID di Markup HTML
Untuk penggunaan di markup HTML, selector ID tidak sama dengan selector tag. Pada selector tag langsung menggunakan elemen tag itu sendiri secara langsung. Namun pada selector ID, pada markup HTML menggunakan elemen

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

8 sebagai pembuka dan penutup pada kode markup HTML. Selain sebagai kode pembuka dan penutup, elemen

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

8 ini digunakan sebagai pemisah antar selector dalam markup HTML. Contohnya seperti berikut ini:

Kode CSS dengan Selector ID

#header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;

Maka penulisannya dalam markup HTML adalah sebagai berikut:

<div id="header">
Ini adalah judul artikel
</div>

Hasil dari kode HTML diatas, adalah sebagai berikut :

Selector Class CSS
Jika pada selector ID menggunakan tanda pagar (#), untuk selector Class menggunakan tanda titik (.). Namun perbedaannya adalah, selector Class bisa digunakan secara bersamaan dengan selector Class yang lainnya pada saat penulisan di markup HTML. Contoh kode CSS dengan selector Class adalah seperti berikut:

.header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;

Cara Menggunakan Selector Class di Markup HTML
Untuk penggunaan di markup HTML, selector Class sama dengan selector ID yaitu pada markup HTML sama-sama menggunakan elemen

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

8 sebagai pembuka dan penutup pada kode markup HTML. Namun untuk penggunaan selector Class bisa digunakan secara bersamaan. Contohnya seperti berikut ini:

Kode CSS dengan Selector Class

.header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;

Maka penulisannya dalam markup HTML adalah sebagai berikut:

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

0
Hasil dari kode HTML diatas, adalah sebagai berikut :

Jika menggunakan 2 selector Class, dengan kode CSS seperti berikut:

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

1
Maka penulisannya dalam markup HTML adalah sebagai berikut:

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

2
Hasil dari kode HTML diatas, adalah sebagai berikut :

Penggabungan Selector
Jika selector Class bisa digabungkan menjadi satu dalam markup HTML, bisakah selector ID dan Class digabungkan penulisannya di markup HTML? Tentu saja bisa. Untuk penggunaan kode CSS sama seperti yang telah diejaslkan diatas, sedangkan untuk penulisan markup HTMLnya.

Dengan catatan, dalam memberikan atribut pada kode CSS di masing-masing selector adalah berbeda. Contohnya seperti berikut:

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

3
Dan penulisan kode markup HTMLnya adalah sebagai berikut:

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

4
atau

p {
    color: #000000;
}
h1 {
    color: #000000;
}
h3 {
    color: #000000;
}

5
Dari pembahasan mengenai selector ID, Class, dan tag pada kode CSS, sebenarnya sangat mudah dalam membuat sebuah kode CSS yang sesuai dengan kebutuhan. Secara dasarnya memang seperti yang telah dijelaskan diatas namun pada tahapan lanjutan, ada beberap kode CSS dengan berbagai atribut property dan value yang bisa menghadirkan berbagai bentuk tampilan dan efek-efek animasi dengan menggunakan kode CSS. Semoga pembahasan sederhana tentang CSS ini bisa memberikan manfaat dan bisa dipelajari dengan mudah. Terimakasih.

Apa perbedaan antara class dan ID dalam CSS?

ID dipakai jika butuh memanggil satu element khusus, misal scroll ke satu section jika tombol diklik. Nama section harus berbeda-beda sehingga pakai ID. Class biasanya dipakai untuk memberi style pada element. Jika satu kelompok (class) punya style tertentu, maka semua anggota kelompok itu akan punya style yang sama.

Apa Perbedaan Selector ID dengan class?

Selector class adalah kebalikan dari ID, jika ID hanya dipakai sekalai dalam setiap halaman, CLASS merupakan selector yang dapat digunakan / dipanggil secara berulang-ulang. Penulisan kode CSS CLASS diawali dengan titik lihat kode dibawah ini.

Apa itu ID dalam CSS?

ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Contoh di dalam css: #intro {color: blue} .

Apa gunanya class pada CSS?

Class merupakan selector yang dapat kita digunakan oleh lebih dari satu tag html. Artinya beberapa tag html bisa menggunakan css dari class tersebut. Tag class dengan nama yang sama dapat dipakai berulang-ulang pada satu halaman. Satu elemen boleh memiliki lebih dari satu Class yang berbeda-beda.