Belajar css 3: memahami sintax dan selector di css

Bagaimana cara mudah belajar css? ya dengan memahami sintax dan selector di css. Dengan begitu kita akan mengetahui cara menggunakan css dalam proses pembuatan website.

css sendiri mempunyai seperangkat aturan dalam setiap penulisan kodenya. Jika kita pelajari, css menggunakan ruleset yaitu sebuah aturan dalam menuliskan setiap baris kode/sintaxnya.

Pertanyaannya aturan yang bagaimana?

ok, pahami dahulu penjelasan sintax css berikut.

Sintax di css

Sintax di css biasanya akan memiliki struktur sebagai berikut:

selector {
  property: value;
}

Dari struktur kode css diatas yang dimaksud dengan ruleset ialah gabungan atau kombinasi antara selector dengan deklarasi blok css.

Agar lebih mudah dipahami, berikut contoh deklarasi sintax/kode css-nya.

div {
  background: yellow;
  width: 300px;
  height: 300px;
}

Selector merupakan target elemen html yang akan di berikan style/gaya di css, dalam contoh diatas ialah elemen html div atau didalam css disebut selector div.

Lalu bagaimana dengan blok deklarasi?, Blok deklarasi dikelompokkan dalam blok. Setiap blok deklarasi berisi deklarasi CSS yang dibungkus dengan kurung kurawal pembuka dan kurung kurawal penutup.

Bingung apa itu blok deklarasi di css? lihat di gambar berikut!

Deklarasi atau deklarasi CSS terdapat di dalam blok deklarasi. Setiap deklarasi harus dipisahkan dengan titik koma; jika tidak, kode tidak akan berfungsi.

Tidak hanya itu dalam deklarasi css juga, diperbolehkan untuk tidak menempatkan titik koma di deklarasi terakhir.

// contoh deklarasi css tanpa titik koma di deklarasi terakhir
h1 {
  font-size: 10px;
  font-weight: bold
}

Properti dan Nilai di CSS

• properti: pengenal yang dapat dibaca manusia yang menunjukkan fitur gaya seperti apa yang akan diubah
• nilai : diberikan ke properti yang menunjukkan bagaimana fitur gaya tertentu harus diubah

Yang harus diperhatikan baik dari properti dan nilai ialah peka terhadap huruf besar-kecil dalam CSS dan sebaiknya dalam penulisan properti dan nilai di CSS, gunakan huruf kecil saja dalam hal ini tidak menggunakan huruf besar.

Mengapa demikian? itu karena nantinya browser tidak dapat mengidentifikasi setiap kode css yang kita buat jika mencampur huruf besar dan kecil didalam kode css kita.

Contoh properti serta nilai dari kode css yang salah

p {
  Font-Size: 10px;
  BACKGROUND: 20PX;
}

h2 {
  font-Size: 12px;
  font-WEIGHT: bold;
}

berikut penulisan kode css yang benar baik dari segi properti dan nilainya.

p {
  font-size: 10px;
  background: 20px;
}

h2 {
  font-size: 12px;
  font-weight: bold;
}

Di CSS, ada lebih dari 300 properti dan nilai yang berbeda serta hampir tak terbatas. Catatan! Tidak semua pasangan properti dan nilai diperbolehkan. Setiap properti memiliki daftar nilai valid yang telah ditentukan.

Baiklah sampai disini semoga bisa dipahami, selanjutnya kita akan belajar selector di css.

Selector di css

Di css terdapat 3 selector yang biasanya sering digunakan diantaranya.

1. elemen selector

Selector elemen ini menggunakan elemen html sebagai selectornya, yaitu tiap-tiap nama tag yang ada di html merupakan selector css itu sendiri.

Berikut contoh penggunaan selector elemen di css.

h1 {
  color: blue;
}

p {
  font-size: 10px;
}

2. class selector

Class selector merupakan selector yang terdiri dari titik ( . ) diikuti dengan nama kelas. Nama kelas didefinisikan menggunakan atribut class. Selector kelas CSS sangat berguna saat menargetkan elemen yang berbeda.

Selain itu juga beberapa elemen dapat memiliki nilai kelas yang sama.

Berikut contoh penggunaan class selector di css.

.underlined-text {
  text-decoration: underline;
}

.bold-text {
  font-weight: bold;
}

Elemen HTML dapat memiliki beberapa nama kelas yang dipisahkan oleh spasi. Contoh di bawah ini sebuah elemen <p> yang memiliki atribut class="underlined-text" dan class="underlined-text bold-text".

<p class="underlined-text bold-text">belajar class selector css</p>

contoh kode cssnya.

.underlined-text {
  text-decoration: underline;
}

.bold-text {
  font-weight: bold;
}

3. id selector

Selector ID merupakan selector yang terdiri dari hash ( # ) diikuti dengan nama ID.

Nama ID sendiri diambil dari nama atribut id yang ada di elemen html yang akan diberikan gaya dengan css.

Selector ID sangat berguna ketika kita mau menargetkan satu elemen saja di html.

Lihat contoh kode berikut.

#blue {
   background-color: blue;
   width: 200px;
   height: 200px;
}
#red {
   background-color: red;
   width: 200px;
   height: 200px;
}

Spesifik selector

Di css kita juga bisa menargetkan secara spesifik elemen apa yang akan kita ubah stylenya dengan css, dan hal ini biasa disebut dengan spesifik selector.

Penting diketahui kita hanya dapat menargetkan elemen HTML tertentu dengan kelas atau id yang diberikan.

Contoh di bawah ini hanya memilih elemen <p> dengan atribut class="red" dan id="green".

p.red {
   color: red;
}
p#green {
   color: green;
}

Grouping Selector/mengelompokan selector

Terkadang beberapa aturan CSS mungkin memiliki deklarasi serupa. Perhatikan contoh di bawah ini:

h1 { 
  font-family : Times New Roman; 
  color: green; 
} 
p { 
  font-family: Times New Roman; 
  color: green; 
}

Dari contoh kode diatas tampak tidak efisien bukan? daripada mengulangi deklarasi yang sama seperti kode diatas, kita cukup memiliki sekelompok selector yang ada di dalam kumpulan aturan CSS.

Sekelompok selector tersebut terdiri dari selector yang dipisahkan oleh koma.

Sebagai contoh.

h1, p {
  font-family: Times New Roman; 
  color: green; 
}

Kesimpulan

Dari pembahasan yang telah dijelaskan diatas, kita belajar banyak hal dalam sintax css sekaligus mengenal 3 selector yang biasanya digunakan di css yaitu elemen, class dan id selector. Sekaligus mengenal tentang spesifik selector dan pengelompokan selector (grouping).

Demikianlah pembahasan kita kali ini bagaimana belajar serta memahami sintax dan selector di css.

semoga bermanfaat buat teman-teman yang sedang belajar dasar-dasar css.

Selanjutnya belajar apa?

Silahkan baca artikel berikut untuk melatih pemahaman kamu tentang penggunaan warna pada css.

Pelajari : Belajar css 4: warna pada css