Cara menggunakan id kelas html

Table of Contents Show

Pelajari Cara Menggunakan ID, Class, dan Tag Selector di CSS & Perbedaan Antara Ketiganya - Komponen dalam kode CSS ini dibagi menjadi kode-kode pemilih yang disebut Selectors. Dan selector ini secara umum terbagi menjadi 3 yaitu selector id, selector class, dan selector tag
Kapan menggunakan ID dan kelas?
Apa perbedaan antara ID dan kelas dalam HTML?
Apa itu ID dalam HTML?
Apa kegunaan kelas dalam HTML?

Pelajari Cara Menggunakan ID, Class, dan Tag Selector di CSS & Perbedaan Antara Ketiganya - Komponen dalam kode CSS ini dibagi menjadi kode-kode pemilih yang disebut Selectors. Dan selector ini secara umum terbagi menjadi 3 yaitu selector id, selector class, dan selector tag

Pelajari Cara Menggunakan ID, Class dan Tag Selector di CSS & Perbedaan Ketiganya - Dalam menggunakan kode CSS, ada beberapa aturan baku yang harus diikuti dengan memperhatikan setiap komponen dalam kode CSS. Pada kode CSS dibagi menjadi beberapa komponen yang memiliki fungsi yang berbeda-beda, walaupun secara ringkas kode tersebut memiliki nilai yang sama.

Komponen-komponen dalam kode CSS ini dibagi menjadi kode-kode pemilih yang disebut Selectors. Dan selector ini secara umum terbagi menjadi 3 yaitu selector id, selector class, dan selector tag. Ketiga selektor ini memiliki fungsi yang berbeda sesuai dengan deklarasi yang diberikan, namun ada yang sama dan masing-masing selektor memiliki markup HTML yang sama dengan selektor pada CSS. Bingung?

Pemilih Tag
Pada pembahasan sebelumnya tentang Apa itu CSS, kami sudah menyebutkan dan memberikan contoh tag pemilih ini. Tag pemilih dalam markup HTML ini biasanya ditulis langsung sesuai dengan tag CSS yang ada

Cara Membuat Pemilih Tag CSS
Beberapa kode pemilih tag yang umum digunakan adalah tag body, p, span, h1, h2, h3, dll. Dan penulisan dalam bentuk kode CSS adalah sebagai berikut

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

Jika setiap tag memiliki deklarasi, properti, dan nilai yang sama maka penulisan kode CSS dapat dilakukan sebagai satu kesatuan yang ditandai dengan koma pada setiap pemilih. Misalnya seperti ini

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

_
Jadi penulisan kode CSS di atas dapat dilakukan seperti berikut

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

Cara Menggunakan Tag Pemilih di Markup HTML
Untuk penulisan di markup HTML, harus sesuai dengan kode tag yang digunakan pada kode CSS. Contohnya adalah sebagai berikut

<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

Pemilih ID CSS
Sama halnya dengan tag pemilih yang telah dijelaskan di atas, namun pemilih ini ditandai dengan penggunaan tanda pagar (#) pada tag pemilih. Adapun penggunaannya, pemilih ID hanya dapat digunakan satu kali di setiap halaman tampilan blog. Misalnya header blog, body blog, sidebar blog, dan footer blog hanya memiliki satu ID markup HTML dengan ID pemilih yang sama, hanya saja ID pemilih yang digunakan berbeda, sehingga Anda dapat menggunakan banyak ID markup HTML

Cara Membuat Pemilih ID CSS
Sama halnya dengan membuat kode CSS pada pemilih tag, namun pada pemilih ID menggunakan tanda pagar pada pemilih, sedangkan untuk tag dapat 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 pemilih ID karena tanda pagar (#). Pemilih tajuk ini dapat 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 CSS menjadi seperti berikut

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

Cara Menggunakan Pemilih ID di Markup HTML
Untuk digunakan dalam markup HTML, pemilih ID tidak sama dengan pemilih tag. Di pemilih tag langsung, elemen tag itu sendiri digunakan secara langsung. Namun, pada pemilih ID, markup HTML menggunakan elemen

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

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

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

_8 ini digunakan sebagai pemisah antar selektor pada markup HTML. Contohnya adalah sebagai berikut

Kode CSS dengan Selector ID

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

_
Jadi penulisan dalam markup HTML adalah sebagai berikut

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

Hasil dari kode HTML diatas, adalah sebagai berikut

Pemilih Kelas CSS
Jika pemilih ID menggunakan pagar (#), untuk pemilih Kelas gunakan titik (. ). Namun bedanya, pemilih Kelas dapat digunakan bersamaan dengan pemilih Kelas lainnya saat menulis di markup HTML. Contoh kode CSS dengan pemilih Kelas adalah sebagai berikut

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

Cara Menggunakan Kelas Selector di Markup HTML
Untuk penggunaan dalam markup HTML, pemilih Class sama dengan pemilih ID, yaitu dalam markup HTML, kedua elemen

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

8 digunakan sebagai pembuka dan penutup kode markup HTML. Namun untuk penggunaan Class Selector bisa digunakan secara bersamaan. Contohnya adalah sebagai berikut

Kode CSS dengan Kelas Selector

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

Jadi penulisan 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 class selector, dengan kode CSS sebagai berikut

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

_1
Jadi penulisan dalam markup HTML adalah sebagai berikut

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

_2
Hasil dari kode HTML diatas, adalah sebagai berikut

Menggabungkan Pemilih
Jika pemilih Kelas dapat digabungkan menjadi satu dalam markup HTML, dapatkah ID dan pemilih Kelas digabungkan dalam markup HTML? . Untuk penggunaan kode CSS sama seperti penjelasan di atas, sedangkan untuk penulisan markup HTML

Dengan catatan, dalam pemberian atribut pada kode CSS di setiap selektor berbeda-beda. Contohnya adalah sebagai berikut

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

_3
Dan penulisan kode markup HTML 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 tentang selector ID, Class, dan tag pada kode CSS, sebenarnya sangat mudah untuk membuat kode CSS yang sesuai dengan kebutuhan. Pada dasarnya seperti yang dijelaskan di atas namun pada tahap lanjutan, terdapat beberapa kode CSS dengan berbagai atribut properti dan nilai yang dapat menghadirkan berbagai bentuk tampilan dan efek animasi dengan menggunakan kode CSS. Semoga pembahasan sederhana tentang CSS ini dapat memberikan manfaat dan dapat dipelajari dengan mudah. Terima kasih

Kapan menggunakan ID dan kelas?

ID digunakan jika Anda perlu memanggil elemen tertentu, misalnya menggulir ke suatu bagian jika tombol diklik. Nama bagian harus berbeda, jadi gunakan ID . Class biasanya digunakan untuk menata elemen. Jika sebuah grup ( kelas ) memiliki gaya tertentu, maka semua anggota grup tersebut akan memiliki gaya yang sama.

Apa perbedaan antara ID dan kelas dalam HTML?

Perbedaan keduanya adalah. atribut id unik, nama id tidak dapat digunakan lebih dari satu kali dalam satu halaman HTML . sedangkan nilai dari atribut class dapat digunakan berkali-kali.

Apa itu ID dalam HTML?

ID adalah pemilih yang digunakan oleh tag html , ini yang disarankan, karena < /a> ID sendiri hanya dapat digunakan untuk satu tag html . Setiap elemen hanya boleh memiliki satu tag id .

Apa kegunaan kelas dalam HTML?

Mengetahui Kelas dalam HTML . Berbeda dengan id yang bersifat unik, class berfungsi untuk menentukan nama class dari suatu elemen. Berbeda dengan id yang bersifat unik, class boleh digunakan oleh lebih dari satu elemen yang ditandainya. Atribut class juga sering digunakan untuk menunjuk ke nama class di lembar gaya ( lembar gaya).