Struktur Dasar Syntax CSS

1. Selector

Selector adalah bagian dari CSS yang digunakan untuk memilih elemen HTML yang ingin kita beri gaya. Selector ini menentukan elemen mana yang akan dipengaruhi oleh aturan yang ada.

Ada berbagai jenis selector yang dapat digunakan dalam CSS, seperti:

• Element selector: Memilih elemen HTML berdasarkan nama tag-nya.

• Class selector: Memilih elemen berdasarkan kelas (class) yang ditetapkan.

• ID selector: Memilih elemen berdasarkan ID yang unik.

• Universal selector: Memilih semua elemen dalam dokumen HTML.

Contoh selector:

• h1: memilih semua elemen <h1>.

• .class-name: memilih semua elemen dengan kelas "class-name".

• #id-name: memilih elemen dengan ID "id-name".

2. Declaration 

Declaration adalah bagian yang mendefinisikan gaya atau style yang diterapkan pada elemen yang dipilih oleh selector. Declaration terdiri dari dua bagian utama:

• Property: Nama properti gaya yang ingin diubah. Contoh properti CSS meliputi color, fontsize, background-color, dan banyak lagi.

• Value: Nilai yang ingin diterapkan pada properti tersebut. Nilai ini bisa berupa angka, warna, ukuran, atau unit lainnya sesuai dengan properti yang dipilih.

Setiap declaration ditulis dalam format berikut: property: value;

3. Format Dasar CSS

Format dasar sebuah aturan CSS adalah sebagai berikut:

selector {
    property: value;
}

Di dalam aturan CSS, setiap deklarasi dipisahkan dengan tanda titik koma (;), dan seluruh deklarasi diletakkan di dalam tanda kurung kurawal ({}). Properti dan nilai dipisahkan oleh tanda titik dua (:).

Contoh CSS yang lengkap:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Pada contoh di atas:

• Selector: h1 (semua elemen <h1>).

• Deklarasi: Tiga deklarasi diterapkan pada elemen <h1>:

  • color: blue; - Mengatur warna teks menjadi biru.

  • font-size: 24px; Mengatur ukuran font menjadi 24 piksel.

  • text-align: center; Mengatur teks agar berada di tengah halaman.

4. Aturan Penulisan CSS

Menulis CSS dengan rapi dan konsisten sangat penting agar kode mudah dibaca dan dikelola. Berikut adalah beberapa aturan penulisan yang disarankan:

• Setiap deklarasi harus dipisahkan dengan tanda titik koma (; (kecuali deklarasi terakhir).

• Gunakan spasi setelah tanda titik dua (:) untuk meningkatkan keterbacaan.

• Untuk memudahkan pemeliharaan, pisahkan setiap properti dalam satu baris.

• Gunakan indentasi untuk mengorganisir blok kode, terutama ketika ada aturan CSS yang bersarang.

Contoh penulisan yang baik:

p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

Penulisan kode CSS yang konsisten sangat penting dalam proyek yang lebih besar, terutama ketika bekerja dalam tim.

5. Contoh Simple

Berikut ini adalah contoh sederhana untuk mengatur warna latar belakang halaman, ukuran teks, dan margin menggunakan CSS:

body {
    background-color: #f0f0f0;  /* Warna latar belakang */
    font-size: 16px;             /* Ukuran teks */
    margin: 0;                   /* Menghilangkan margin default */
}

• Selector: body (seluruh halaman web).

• Deklarasi: Mengatur warna latar belakang dengan background-color, ukuran teks dengan font-size, dan margin dengan margin.

6. Best Practices dalam Penulisan CSS

• Gunakan penamaan yang jelas dan deskriptif untuk kelas dan ID. Misalnya, daripada menggunakan nama kelas seperti .box, gunakan .product-card atau .header-logo untuk menggambarkan elemen tersebut dengan lebih jelas.

• Terapkan komentar dalam CSS untuk menjelaskan bagian-bagian penting atau aturan yang lebih rumit, terutama dalam proyek besar.

• Hindari duplikasi aturan CSS untuk elemen yang sama. Gunakan selector yang lebih spesifik jika perlu.

• Gunakan tools seperti CSS preprocessors (Sass atau LESS) atau CSS frameworks (Bootstrap, Tailwind) untuk meningkatkan efisiensi penulisan dan organisasi kode.

Selanjutnya, kita akan membahas tentang selektor CSS, jenis-jenisnya, dan bagaimana cara menggunakannya untuk menargetkan elemen-elemen HTML tertentu.