Tutorial CSS / Sintaks CSS: Selektor, Deklarasi, Komentar, dan Kesalahan

Sebuah aturan CSS menggabungkan selektor dengan deklarasi yang ditulis sebagai properti: nilai; di dalam kurung kurawal. Sintaks yang benar membantu browser menerapkan gaya yang dimaksud, tetapi deklarasi yang salah dapat diabaikan sementara deklarasi valid lainnya tetap berlaku.

Baca bagian-bagian dari aturan CSS

.notice {
  color: #087f5b;
  padding: 16px;
}

Setiap properti mengizinkan nilai yang berbeda. Masukkan nilai warna di color dan nilai panjang di padding. padding: blue; tidak valid karena blue adalah warna, bukan nilai panjang atau persentase yang diterima padding. 16px ditulis dengan angka dan satuan. Jika Anda menggunakan spasi seperti 16 px, itu tidak akan terbaca sebagai satu nilai panjang.

Gunakan kurung kurawal, titik dua, titik koma, dan spasi

Pemutusan baris dan indentasi membantu membuat kode lebih mudah dibaca oleh manusia. Dua aturan berikut berlaku sama karena mereka memiliki selektor yang sama dan deklarasi yang sama. Ketika Anda pertama kali belajar, lebih mudah menemukan simbol yang hilang jika Anda memecah deklarasi baris per baris. Cara memilih selektor sesuai objek yang akan dihias dibandingkan di Selektor Dasar CSS: Tipe, Kelas, ID, dan Atribut.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Meskipun deklarasi terakhir dapat menghilangkan titik koma, menulisnya secara konsisten membuat penambahan di kemudian hari lebih aman. Spasi pada selektor dapat mengubah makna: .notice.urgent cocok dengan elemen yang memiliki kedua kelas, sementara .notice .urgent cocok dengan elemen berkelas urgent yang merupakan keturunan elemen berkelas notice, meskipun bukan anak langsung. Menghapus spasi itu mengubah selektornya. Lihat MDN: Pengantar sintaks CSS.

Mengelompokkan selektor dan menulis komentar

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

Koma menghubungkan beberapa selektor ke blok deklarasi yang sama. h1, h2 memilih h1 dan h2 masing-masing, dan h1 h2 adalah selektor lain yang menemukan h2 di dalam h1. Koma sesuai untuk tujuan menerapkan warna yang sama.

Komentar CSS dimulai dengan /* dan diakhiri dengan */. Pernyataan di dalam komentar tidak dijalankan dalam gaya. Ini dapat digunakan untuk menulis penjelasan atau untuk sementara mengecualikan aturan, tetapi jika simbol penutup dihilangkan, kode di belakangnya mungkin dianggap sebagai komentar. Dalam CSS biasa, // JavaScript tidak digunakan sebagai notasi komentar satu baris.

Bandingkan kesalahan deklarasi dan kesalahan selektor

Ketika browser menemukan kesalahan dalam CSS, ia mengabaikan bagian yang tidak valid dan melanjutkan pemrosesan aturan yang mungkin berlaku. Ini tidak selalu berarti "mengabaikan satu baris yang salah." Delimiter yang hilang atau kesalahan selektor dapat memiliki dampak besar.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Hanya padding: blue yang tidak valid di sini. Kecuali ada aturan lain, warna teks dan warna latar diterapkan, dan padding tidak diubah oleh deklarasi ini. Bahkan jika properti ditulis dengan salah, seperti colro, deklarasi tersebut tidak akan dikenali.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

Blok ini kehilangan titik koma setelah deklarasi pertama. Browser membaca blue background-color: #e9f7ef sebagai nilai dari color, yang tidak valid. Baik warna yang dimaksud maupun deklarasi latar belakang yang dimaksud tidak berlaku, tetapi padding: 16px; masih berlaku. Tambahkan titik koma yang hilang setelah blue.

h1, .notice:made-up-state {
  color: blue;
}

Pseudo-class yang tidak dikenal membuat daftar selektor yang dipisahkan koma biasa ini tidak valid, sehingga aturan juga gagal diterapkan ke h1. Beberapa daftar selektor khusus menggunakan parsing yang lebih toleran. Oleh karena itu, contoh ini tidak menggambarkan perilaku dari setiap konteks daftar-selektor. Lihat MDN: Penanganan kesalahan.

Jalankan contoh lengkap

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Jika Anda menyimpan seluruh kode sebagai index.html dan membukanya, h1 dan h2 berwarna hijau yang sama, dan notice memiliki latar belakang terang, padding 16px, dan border 1px. Kalimat deskriptif muncul pada 18px. font-size adalah properti yang mengatur ukuran font, line-height adalah tinggi baris, dan border mengatur garis tepi. Di sini digunakan sebagai properti tambahan untuk menghubungkan sintaks dan hasil.

Temukan dan perbaiki kesalahan sintaks

Ganti blok .notice di seluruh contoh dengan kode di bawah ini. Tujuannya adalah memperbaiki dua kesalahan sintaks dan membuatnya "teks biru, latar belakang hijau muda, padding 16px." Anda dapat dengan mudah mengembalikannya dengan menyalin file asli ke nama lain sebelum mengubahnya.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Ubah colro menjadi color dan tambahkan titik dua setelah background-color. Simpan dan segarkan: pemberitahuan harus memiliki teks berwarna biru, latar belakang hijau muda, dan padding 16px. Padding sudah valid, jadi beberapa spasi bisa tetap ada bahkan sebelum kesalahan sintaks diperbaiki.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

Jika editan Anda tidak mengubah halaman, periksa terlebih dahulu apakah Anda membuka file yang benar. Kemudian Periksa CSS dengan DevTools: Styles dan Computed untuk melihat nilai mana yang benar-benar berlaku. Bedakan kesalahan sintaks, selektor yang cocok dengan elemen yang salah, dan konflik antara aturan sebelum mengubah lebih banyak nilai.