Estimasi Waktu Baca: 2 menit
Daftar Isi
Pemanasan โ˜•
Struktur dan Sintaks Dasar CSS ๐Ÿ“„
    Selektor ๐Ÿ“Œ
    Blok Deklarasi ๐Ÿ“‘
    Properti dan Nilainya ๐Ÿ’ผ
Kesimpulan ๐Ÿ“‹
Penutup ๐Ÿšช

Pemanasan โ˜•

Pada pertemuan sebelumnya “Belajar CSS untuk Pertama Kali” kita sudah mengenal tentang CSS dan sekilas juga telah menyinggung mengenai struktur dan sintaks dasar CSS dalam sub bab anatomi CSS.

Tanpa berlama lagi mari kita lanjutkan! ๐Ÿค˜

Struktur dan Sintaks Dasar CSS ๐Ÿ“„

CSS memiliki struktur kode dan sintaks dasar yang terdiri dari tiga bagian penting antara lain:

  • Selektor
  • Blok deklarasi
  • Properti dan nilainya

Selektor ๐Ÿ“Œ

Selektor (selector) merupakan kata kunci untuk menentukan elemen HTML yang akan diberi gaya (style).


/* h1 adalah selektor */
h1{ background-color: yellow; }

Kode di atas akan membuat background berwarna kuning pada semua elemen <h1>.

Kita juga dapat menentukan style yang sama pada lebih dari satu selektor (multiple selector).


h1, h2, h3, h4, h5, h6{ 
        background-color: yellow; 
}

Selektor tidak hanya berupa nama tag HTML, tapi juga dapat berupa id, class, dan atribut.


/* selektor dengan nama tag */
h1{ 
     background-color: yellow; 
}

/* selektor dengan id */
#header{ 
     font-family: arial; 
}

/* selektor dengan class */
.text-primary{ 
     color: blue; 
}

/* selektor dengan atribut */
input[type=text]{
     background-color: green;
}

Blok Deklarasi ๐Ÿ“‘

Dalam CSS deklarasi berisi properti dari selektor dan nilai dari properti tersebut. Deklarasi diawali dan diakhiri dengan kurung kurawal {….}. Hal inilah yang menghasilkan blok deklarasi.

Agar lebih mudah untuk dibaca dan diedit, setiap deklarasi biasanya ditulis dalam baris baru, tidak satu baris.

Penulisan yang kurang baik


h1{ background-color: green; }

Penulisan yang baik


h1{ 
   background-color: green; 
}

Blok deklarasi dapat berisi lebih dari satu properti untuk satu selektor.


h1{ 
   background-color: green;
   color: yellow;
   font-family: arial;
}

Properti dan Nilainya ๐Ÿ’ผ

Properti merupakan atribut atau aturan yang akan diterapkan oleh elemen yang dipilih (selektor).

Properti selalu diikuti oleh titik dua (:) sebelum mendefinisikan nilainya dan diakhiri dengan tanda titik koma (;).

Jika terdapat lebih dari satu properti dalam blok deklarasi maka tiap properti harus dipisahkan dengan titik koma (;).


h1{ 
   background-color: green;
   color: yellow;
   font-family: arial;
}

Sedangkan untuk properti terakhir atau hanya berisi satu properti, boleh memakai titik koma, boleh tidak.

Properti terakhir


h1{ 
   background-color: green;
   color: yellow;
   font-family: arial
}

Deklarasi dengan satu properti


h1{ 
   background-color: green
}

Saran: Lebih baik setiap pendeklarasian properti dan nilainya diakhiri dengan titik koma, hal ini agar kode terlihat lebih rapi.

Kesimpulan ๐Ÿ“‹

Setelah mempelajari materi ini, kita dapat mengambil beberapa poin penting antara lain:

  • Struktur kode dan sintaks dasar CSS terdiri dari tiga bagian penting yaitu selektor, blok deklarasi, dan properti beserta nilainya.
  • Selektor bisa dikatakan elemen yang ditulis secara aturan CSS
  • Selektor dapat berupa nama tag, id, class, dan atribut
  • Satu selektor dapat memiliki lebih dari satu properti dan sebaliknya
  • Blok deklarasi merupakan tempat untuk mendefinisikan properti dari suatu selektor beserta nilainya.
  • Properti merupakan aturan (rule) yang akan digunakan oleh selektor.

Penutup ๐Ÿšช

Dalam kesempatan kali ini kita sudah membahas mengenai struktur dan sintaks dasar CSS

  • Selektor โœ…
  • Blok Deklarasi โœ…
  • Properti dan nilainya โœ…

Apa selanjutnya? ๐Ÿคท

Selanjutnya kita akan membahas tentang bagaimana cara menerapkan CSS ke dokumen HTML. ๐Ÿ˜Š