Struktur Kode atau Sintaks Dasar CSS

Struktur Kode atau Sintaks Dasar CSS

Struktur kode CSS terdiri dari tiga bagian:

1. Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita beri style.

Contoh :

h1 {
    color: red;
}

Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).

Selektor dapat berupa nama tag, class, id, dan atribut.

Contoh:

/* Selektor dengan nama tag */
h2 {
    color: blue
}

/* Selektor degnan class */
.bg-yellow {
    backgound-color: yellow;
}

/* selektor dengan ID elemen */
#header {
    background: grey;
}

/* Selektor dengan Atribut */
input[type=text]{
    background: yellow;
}

2. Blok Deklarasi

Blok deklarasi adalah tempat kita menuliskan atribut atau properti CSS yang akan diberikan ke pada elemen yang telah diseleksi.

Contoh:

p {
    font-size: 18px;
}

Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px.

Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.

3. Properti dan Nilainya

Properti adalah sekumpulan aturan yang akan diberikan kepada elemen yang telah dipilih.

Format penulisan properti seperti ini:

properti: "nilai";

blockquote {
    background: pink;
}

Contoh Penulisan CSS.

Silahkan Klik Tombol Coba Sendiri

 

<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>