Tutorial CSS #03: Sintaks Dasar CSS yang Harus Dipahami

Tutorial CSS #03: Sintaks Dasar CSS yang Harus Dipahami
Tutorial CSS #03: Sintaks Dasar CSS yang Harus Dipahami

CSS punya sintaks atau tata cara penulisan kode yang harus diikuti.

Jika kita salah tulis, bisa jadi CSS yang kita buat tidak akan menghasilkan apa-apa di tampilan web.

Table Of Contents

Karena itu, kita wajib memahami sintaks dasar CSS agar tidak salah tulis.

Oke, gimana bentuk sintaksnya?

Mari kita pelajari.

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
Struktur Kode CSS
Struktur Kode

Selector

Selektor (selector) merupakan kata kunci untuk menentukan elemen HTML yang akan kita beri 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 kita lebih mudah untuk membaca dan mengeditnya, saya sarankan untuk menulisnya seperti di bawah ini.

Penulisan yang baik

h1{ 
   background-color: green
} 

Penulisan yang kurang baik

h1{ background-color: green } 

Meskipun di dalam blok deklarasi hanya berisi satu properti dan nilainya.

Namun, blok deklarasi juga dapat berisi lebih dari satu properti untuk satu selector.

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).

Untuk mendefinisikan nilai properti, kita perlu menggunakan tanda titik dua (:) setelah penulisan nama properti.

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

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

Sedangkan untuk properti terakhir atau hanya berisi satu properti, kita boleh memakai titik koma ataupun tidak di akhir penulisan.

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 tidak rancu.

Referensi

[1] CSS Anatomy and Terminology - Catalin

 

© 2023 vishal majumdar - wordpress theme by. Crypto tech news 24. Sheer curtains in dubai.