Codingku

Syntax CSS: Penjelasan Selector, Property dan Value CSS

Akhlis akhlis

CSS memiliki aturan syntax atau disebut CSS rule yang sederhana dan mudah dipahami.

CSS Rule terdiri dari selector dan declaration block.

css rule

Selector digunakan untuk mengaitkan atau menghubungkan kode CSS dengan tag HTML yang ingin diberi style (diubah tampilannya).

Fungsi selector ini yaitu mencari elemen web yang ingin diberi style atau diubah tampilannya dengan cara memanggil nama tag, nama class, nama id, atau nama atribut.

Misalnya dengan mencari seluruh tag <p> atau mencari seluruh tag HTML yang memiliki atribut class="primary".

Sedangkan declaration block merupakan baris kode yang digunakan untuk mendeklarasikan style elemen dengan property CSS.

Setiap declaration block bisa memuat satu atau lebih declaration yang menyertakan nama dan nilai properti CSS yang dipisah dengan tanda titik dua/colon (:).

Dan masing-masing declaration biasanya diakhiri dengan tanda titik koma/semicolon (;).

Dalam satu declaration block dikelilingi oleh tanda kurung kurawa/curly braces. ({...}).

Property CSS

Property CSS adalah nama jenis style yang digunakan untuk menentukan tampilan elemen HTML.

CSS memiliki puluhan property yang bisa kamu pelajari di Referensi Property CSS.

Misalnya, untuk menentukan warna teks paragraf bisa menggunakan property CSS color.

Contoh:

p {
    color: red;
}

Keterangan:

  • p disebut sebagai selector
  • color disebut sebagai property
  • red disebut sebagai value

Value CSS

Value CSS adalah nilai dari property CSS.

Misalnya, untuk menentukan warna teks paragraf menjadi merah, kamu bisa menggunakan property CSS color kemudian diberi value red.

Contoh:

p {
    color: red;
}

Keterangan:

  • p disebut sebagai selector
  • color disebut sebagai property
  • red disebut sebagai value

Jika ingin mengganti warna teks paragrafnya menjadi biru, kamu tinggal mengganti nilai property CSSnya menjadi color: blue;

Kesimpulan

Selector, property, dan value ini merupakan komponen inti dari CSS yang harus benar-benar kamu pahami.

Karena hampir semua tutorial CSS berikutnya akan membahas tentang ketiga aspek penting ini.

Agar mudah diingat, Jika selector berfungsi untuk mencari elemen apa yang akan diberi style, misalnya tag p atau class="success".

Maka property berfungsi untuk memberi efek apa yang harus diterapkan pada elemen tersebut.

Seperti: warna apa?, ukuran berapa?, atau jenis font apa?

Sedangkan value berfungsi untuk menentukan nilai dari property. Misalnya warna merah, biru, atau hijau.