Oke, kita lanjut ke materi kedua dalam panduan CSS: Sintaks Dasar CSS. Di sini kita akan membedah "aturan main" atau tata bahasa dasar CSS.

Ngertiin Bahasa CSS: Kenalan Sama Selector, Property, dan Value

Udah tau kan kalau CSS itu tugasnya "mendandani" elemen HTML? Nah, biar bisa nyuruh CSS buat ngelakuin itu, kita perlu ngerti dulu "bahasa" atau sintaks dasar yang dipake sama CSS. Tenang, gak sesusah belajar bahasa baru kok, aturannya cukup simpel!

Setiap "perintah" yang kita kasih ke CSS buat ngubah tampilan elemen HTML itu disebut Aturan CSS (CSS Rule). Satu aturan CSS ini biasanya terdiri dari beberapa bagian penting.

Anatomi Sebuah Aturan CSS: Bedah Bagiannya!

Bayangin kamu lagi ngasih instruksi ke asisten desainer (yaitu browser) buat ngubah tampilan sesuatu. Kurang lebih begini struktur perintahnya di CSS:

/* Ini adalah contoh satu Aturan CSS Lengkap */
 
selektor {
    properti: nilai;
    properti-lain: nilai-lain; /* Bisa ada banyak pasangan properti:nilai */
}

Mari kita bedah satu per satu "aktor" di atas:

1. Selektor (Selector):

   • Ini adalah bagian paling depan dari aturan CSS. Tugasnya adalah memilih atau menargetkan elemen HTML mana yang mau kita kasih style.
   • Selektor ini bisa berupa nama tag HTML (misalnya h1, p, div), nama class (misalnya .tombol-biru), ID unik (misalnya #logo-utama), atau kombinasi yang lebih kompleks (yang bakal kita pelajari nanti).
   • Contoh di atas, selektor adalah placeholder. Kalau kita mau ngasih style ke semua paragraf, selektornya adalah p.

2. Blok Deklarasi (Declaration Block):

   • Ini adalah bagian yang diapit sama kurung kurawal { }.
   • Di dalem blok inilah kita nulis semua "perintah styling" buat elemen yang udah dipilih sama selektor.

3. Deklarasi (Declaration):

   • Setiap "perintah styling" di dalem blok deklarasi itu disebut deklarasi.
   • Satu deklarasi terdiri dari dua bagian yang dipisahin sama titik dua :.
     • Properti (Property): Ini adalah aspek atau karakteristik visual dari elemen yang mau kita ubah. Misalnya, color (buat warna teks), font-size (buat ukuran font), background-color (buat warna latar belakang), width (buat lebar).
     • Nilai (Value): Ini adalah pengaturan spesifik yang kita mau terapin ke properti tersebut. Misalnya, buat properti color, nilainya bisa red, #FF0000, atau rgb(255, 0, 0). Buat font-size, nilainya bisa 16px atau 1.2em.
   • Setiap deklarasi wajib diakhiri dengan titik koma ;. Ini penting buat misahin satu deklarasi dengan deklarasi berikutnya kalau ada banyak. Walaupun deklarasi terakhir di dalem blok kadang gak wajib pake titik koma, praktik terbaiknya adalah selalu pake titik koma di setiap akhir deklarasi biar konsisten dan ngindarin error kalau nanti nambahin deklarasi baru.

Contoh Aturan CSS yang Lebih Nyata:

/* Aturan 1: Semua elemen h1 akan punya teks warna biru tua dan rata tengah */
h1 {
    color: navy;
    text-align: center;
}
 
/* Aturan 2: Semua elemen paragraf (p) akan punya ukuran font 16 pixel */
p {
    font-size: 16px;
    line-height: 1.5; /* Jarak antar baris 1.5 kali ukuran font */
}
 
/* Aturan 3: Elemen yang punya class "sorot" akan punya background kuning */
.sorot {
    background-color: yellow;
    padding: 10px; /* Jarak antara konten dan border di dalam elemen */
}

Mari kita bedah Aturan 1 (h1):

• h1 adalah selektornya. Dia milih semua elemen <h1> di halaman HTML.
• { ... } adalah blok deklarasinya.
• color: navy; adalah deklarasi pertama:
  • color adalah propertinya.
  • navy adalah nilainya.
  • Diakhiri dengan titik koma ;.
• text-align: center; adalah deklarasi kedua:
  • text-align adalah propertinya.
  • center adalah nilainya.
  • Diakhiri dengan titik koma ;.

Gampang kan? Intinya: Pilih elemennya (selektor), terus di dalem kurung kurawal, kasih tau mau diapain aja (properti: nilai;).

Spasi dan Baris Baru di CSS (Whitespace)

CSS itu lumayan cuek sama spasi ekstra atau baris baru (whitespace) yang kamu tulis di kode. Ini berarti kamu bisa ngatur format kodemu biar lebih gampang dibaca.

Misalnya, dua contoh di bawah ini bakal ngasih hasil yang sama persis:

Contoh 1 (Rapat):

p{color:blue;font-size:14px;}

Contoh 2 (Lebih Rapi dan Direkomendasikan):

p {
    color: blue;
    font-size: 14px;
}

Jelas kan, Contoh 2 jauh lebih enak dibaca dan di-maintain? Jadi, biasain nulis kode CSS yang rapi dengan indentasi dan baris baru yang pas. Kebanyakan developer nulis setiap deklarasi di baris baru dan ngasih indentasi di dalem blok deklarasi.

Komentar di CSS: Catatan Buat Dirimu (dan Orang Lain)

Sama kayak di HTML, kamu juga bisa nambahin komentar di kode CSS-mu. Komentar ini gak bakal diproses sama browser, jadi aman buat naruh catatan, penjelasan, atau buat sementara "matiin" sebagian kode pas lagi nge-debug.

Komentar di CSS diapit sama /* dan */.

/* Ini adalah komentar satu baris */
 
p {
    color: green; /* Ini komentar di akhir baris, menjelaskan properti color */
    font-size: 16px;
}
 
/*
Ini adalah contoh
komentar yang
terdiri dari beberapa baris.
Bagian kode di bawah ini sementara saya non-aktifkan:
 
h2 {
    color: orange;
}
*/
 
.info {
    border: 1px solid gray; /* Tambahkan border abu-abu */
}

Komentar ini berguna banget, apalagi kalau kode CSS-mu udah mulai panjang dan kompleks, atau kalau kamu kerja bareng tim.

Nah, itu dia dasar-dasar sintaks CSS. Udah kebayang kan gimana "ngobrol" sama CSS? Kuncinya ada di selektor, properti, dan nilai. Di materi-materi berikutnya, kita bakal banyak banget ngoprek ketiga hal ini, terutama berbagai jenis selektor dan properti-properti keren yang bisa bikin websitemu makin ciamik.

Siap buat lanjut ke cara nambahin CSS ini ke file HTML-mu?