Apa yang dimaksud class dalam html?

Question

.class Selector digunakan untuk menyeleksi element berdasarkan nama class atau nilai (value) dari attribute class yang sama pada html element yang sebelumnya telah ditentukan.

Table of Contents Show

SyntaxPenggunaan Sintaksis CSS <header class="main-header"> Belajar Web Design </header> 1
ExampleContoh CSS <header class="main-header"> Belajar Web Design </header> 1
Contoh Lengkap
Multipple ClassClass lebih dari satu nilai (value)
Apa itu class di HTML?
Apa perbedaan ID dan class pada HTML?
Apa itu atribut class?
Apa fungsi id dan class pada CSS?

Penulisan Class Selector diawali dengan tanda titik (.) atau period, kemudian diikuti dengan nama class. Kita bisa menentukan sendiri nama class apa saja yang kita inginkan, asalkan mengikuti aturan berikut:

Nama Class hanya bisa ditulis dengan letters (abjad [A-Z, a-z]), numbers (angka), hyphens (tanda penghubung), dan underscores (tanda garis bawah).
Setelah titik (.) nama class harus diawali dengan letters (huruf alphabet) pada awal karakter. contoh: .wali9 adalah benar, tetapi, .9wali adalah salah.
Nama Class adalah case-sensitive. Artinya perbedaan huruf besar dengan huruf kecil akan berpengaruh. contoh: .content berbeda dengan
```
<header class="main-header">
Belajar Web Design
</header>
```
0 karena pebedaan huruf besar C pada awal karakter.

Class Selector biasanya digunakan untuk memberikan style pada element berdasarkan group tertentu. Satu nama class bisa disisipkan pada beberapa element agar memiliki style yang sama. Jadi, bisa digunakan lebih dari satu deklarasi. Ini, jelas berbeda dengan ID Selector yang hanya bisa digunakan sekali dalam satu halaman.

SyntaxPenggunaan Sintaksis CSS <header class="main-header"> Belajar Web Design </header> 1

.namaClass {
Property: Value;  /* Deklarasi CSS */
}

ExampleContoh CSS <header class="main-header"> Belajar Web Design </header> 1

Di dalam HTML tag, kita menuliskan

<header class="main-header">
Belajar Web Design
</header>

1, kemudian tanda sama dengan (

<header class="main-header">
Belajar Web Design
</header>

4) dan diikuti nama class yang kita inginkan yang diapit dengan tanda petik (

<header class="main-header">
Belajar Web Design
</header>

5). Contoh pada html tag:

<header class="main-header">
Belajar Web Design
</header>

6

HTML

<header class="main-header">
Belajar Web Design
</header>

Kemudian didalam CSS, kita mendeklarasikannya dengan tanda titik (.) kemudian diikuti dengan nama class yang telah disebutkan pada HTML element tersebut.

CSS

.main-header {
font-family: Georgia, serif;
}

Contoh lainnya yang lebih jelas dapat dilihat pada demo editor dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE

editor

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo CSS class Selector - apacara.com</title>
    <style>
      .teks-hijau {color: green}
      .teks-merah {color: red}
    </style>
  </head>
  <body>
    <p>Paragraf ini tidak memiliki <em>Class</em></p>
    <p class="teks-hijau">Paragraf ini memiliki Class <em>teks-hijau</em></p>
    <p class="teks-merah">Paragraf ini memiliki Class <em>teks-merah</em></p>
  </body>
</html>

TIPS

Untuk pembahasan selanjutnya, gunakan Code Editor diatas untuk uji coba dengan cara copy-paste kedalam editor tersebut, ataupun mengetiknya secara manual.

Multipple ClassClass lebih dari satu nilai (value)

Class Attribute juga bisa memiliki value (nilai) lebih dari satu value yang ditulis dengan jarak (spasi) antara satu value dengan value lainnya, contohnya;

HTML

<p class="box hijau">
Paragraf dengan kotak berwarna hijau
</p>

Kode diatas memiliki dua nama class, yaitu box dan hijau, sehingga dalam css masing-masing bisa ditulis dengan style terpisah, contoh:

Apa itu class di HTML?

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.

Apa perbedaan ID dan class pada HTML?

Perbedaan antara keduanya adalah: atribut id bersifat unik, nama id tidak boleh dipakai lebih dari satu kali di dalam satu halaman HTML. sedangkan nilai dari atribut class bisa digunakan berkali-kali.

Apa itu atribut class?

Atribut class adalah salah satu atribut yang sering digunakan pada elemen HTML. Atribut class umumnya digunakan untuk kemudahan dalam mengakses elemen baik itu untuk kebutuhan konfigurasi CSS Selektor ataupun untuk kebutuhan javascript melalui fungsi document.getElementsByClassName() .

Apa fungsi id dan class pada CSS?

Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya ...

kode html