Setelah memahami apa itu CSS dan tiga cara menambahkannya ke HTML, sekarang saatnya mempelajari sintaks dasar CSS. Sintaks adalah aturan penulisan yang harus diikuti agar CSS dapat dipahami dan dijalankan oleh browser dengan benar.

Apa Itu Sintaks CSS?

Sintaks CSS adalah aturan atau tata cara penulisan kode CSS. Struktur dasar CSS terdiri dari tiga komponen utama: selektor, properti, dan nilai.

Struktur Dasar CSS:

selektor {
    properti: nilai;
    properti: nilai;
}

Setiap aturan CSS terdiri dari:

Selektor → menentukan elemen HTML mana yang akan diberi gaya
Properti → aspek/style apa yang akan diubah (warna, ukuran, jarak, dll)
Nilai → nilai spesifik yang diberikan ke properti (merah, 16px, 10px, dll)
Tanda kurung kurawal { } → membungkus deklarasi properti dan nilai
Titik koma (;) → mengakhiri setiap deklarasi

Contoh Sederhana

/* Memilih semua elemen */
h1 {
    color: blue;        /* properti: warna teks menjadi biru */
    font-size: 32px;    /* properti: ukuran font 32px */
    text-align: center; /* properti: teks rata tengah */
}

/* Memilih semua elemen dengan class "card" */
.card {
    background-color: #f0f4f8;  /* latar belakang abu-abu muda */
    padding: 20px;              /* jarak dalam 20px */
    border-radius: 10px;        /* sudut melengkung 10px */
}

Ini adalah Heading 1

Ini adalah card dengan class "card". Background abu-abu muda, padding 20px, sudut melengkung.

Hasil dari kode CSS di atas.

1. Selektor (Selector)

Selektor adalah pola yang digunakan untuk memilih elemen HTML mana yang akan diberi gaya. Ada beberapa jenis selektor dasar yang wajib dikuasai.

Jenis-jenis Selektor Dasar:

Jenis Selektor	Simbol	Contoh	Penjelasan
Tag/Element	-	`p { }`	Memilih semua elemen <p>
Class	`.` (titik)	`.card { }`	Memilih semua elemen dengan class "card"
ID	`#` (pagar)	`#header { }`	Memilih elemen dengan ID "header" (hanya satu)
Universal	`*`	`* { }`	Memilih SEMUA elemen

Contoh Selektor dalam Kode:

/* Selektor Tag: semua paragraf */
p {
    color: #333;
}

/* Selektor Class: semua elemen dengan class "btn" */
.btn {
    background-color: #3b82f6;
    padding: 10px 20px;
}

/* Selektor ID: elemen dengan id "logo" */
#logo {
    font-size: 24px;
    font-weight: bold;
}

/* Selektor Universal: semua elemen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Tips Penting:

Class bisa digunakan berkali-kali dalam satu halaman (reusable)
ID hanya bisa digunakan SEKALI dalam satu halaman (unik)
Selektor Universal (*) sangat berguna untuk CSS Reset, tapi hati-hati dengan performa
Untuk styling komponen, gunakan Class, bukan ID

2. Properti (Property)

Properti adalah aspek atau karakteristik dari elemen yang ingin diubah. CSS memiliki ratusan properti yang bisa digunakan. Berikut beberapa properti yang paling sering digunakan:

Kategori	Properti	Fungsi
Teks	`color`, `font-size`, `font-family`, `text-align`, `line-height`	Mengatur tampilan teks
Background	`background-color`, `background-image`, `background-size`	Mengatur latar belakang
Box Model	`margin`, `padding`, `border`, `width`, `height`	Mengatur ukuran dan jarak
Layout	`display`, `position`, `flex`, `grid`	Mengatur tata letak
Efek	`opacity`, `box-shadow`, `border-radius`, `transition`	Menambahkan efek visual

3. Nilai (Value)

Nilai adalah spesifikasi dari properti yang diberikan. Setiap properti memiliki jenis nilai yang berbeda-beda.

Jenis-jenis Nilai CSS:

Jenis Nilai	Contoh	Penjelasan
Keyword	`red`, `center`, `solid`	Nama langsung (mudah diingat)
Ukuran (Panjang)	`16px`, `2rem`, `10em`, `50%`	px, rem, em, %, vw, vh
Warna	`#3b82f6`, `rgb(59,130,246)`, `hsl(217,91%,60%)`	HEX, RGB, RGBA, HSL, HSLA, nama warna
URL	`url('gambar.jpg')`	Untuk gambar atau font
Angka	`0.5`, `1.5`	Untuk opacity, line-height, dll

Aturan Penulisan CSS yang Baik

Berikut aturan yang harus diperhatikan saat menulis CSS:

Setiap deklarasi diakhiri dengan titik koma (;)
Properti dan nilai dipisahkan dengan titik dua (:)
Semua deklarasi dibungkus dengan kurung kurawal { }
CSS case-sensitive (color berbeda dengan Color)
Komentar ditulis dengan /* ... */
Gunakan indentasi (spasi/tab) untuk membuat kode lebih rapi

Contoh Penulisan CSS yang Baik:

/* CSS Reset - mengatur ulang margin default */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling untuk body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f4f8;
    line-height: 1.6;
}

/* Styling untuk heading utama */
h1 {
    color: #3b82f6;
    text-align: center;
    margin-bottom: 20px;
}

/* Styling untuk tombol */
.button {
    display: inline-block;
    background-color: #3b82f6;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #2563eb;
}

Contoh Proyek: Halaman Sederhana dengan CSS

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Sintaks CSS</title>
    <style>
        /* Selektor Universal - Reset margin dan padding */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Selektor Tag - Styling body */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        /* Selektor Class - Styling card */
        .card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        /* Selektor Tag - Styling heading */
        h1 {
            color: #1e293b;
            margin-bottom: 15px;
            font-size: 28px;
        }
        
        /* Selektor Class - Styling subheading */
        .subtitle {
            color: #64748b;
            margin-bottom: 20px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 10px;
        }
        
        /* Selektor Tag - Styling paragraf */
        p {
            color: #334155;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        /* Selektor Class - Styling tombol */
        .btn {
            display: inline-block;
            background-color: #3b82f6;
            color: white;
            padding: 10px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        /* Pseudo-class hover */
        .btn:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
        }
        
        /* Selektor Class - Styling info box */
        .info {
            background-color: #eef2ff;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 14px;
        }
        
        .info code {
            background-color: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
    </style>
</head>
<body>

    <div class="card">
        <h1>Belajar Sintaks CSS</h1>
        <div class="subtitle">Selektor, Properti, dan Nilai</div>
        
        <p>CSS terdiri dari tiga komponen utama: <strong>selektor</strong> (memilih elemen), <strong>properti</strong> (apa yang diubah), dan <strong>nilai</strong> (bagaimana mengubahnya).</p>
        
        <a href="#" class="btn">Pelajari Lebih Lanjut</a>
        
        <div class="info">
            Contoh kode CSS yang digunakan:
            <pre style="background: #1e1e2e; color: #fff; padding: 10px; border-radius: 6px; margin-top: 8px; overflow-x: auto; font-size: 12px;">
.card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.btn {
    background-color: #3b82f6;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
}

.btn:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}
            </pre>
        </div>
    </div>

</body>
</html>

Hasil visual:

Belajar Sintaks CSS

Selektor, Properti, dan Nilai

CSS terdiri dari tiga komponen utama: selektor (memilih elemen), properti (apa yang diubah), dan nilai (bagaimana mengubahnya).

Pelajari Lebih Lanjut

Contoh kode CSS yang digunakan

Kesalahan Umum Pemula

Lupa titik koma (;) di akhir deklarasi → CSS akan error dan properti berikutnya tidak terbaca.
Lupa kurung kurawal penutup } → CSS akan error total.
Typo pada nama properti → background-color bukan backgroundcolor.
Lupa titik (.) untuk class atau pagar (#) untuk ID → card (salah) vs .card (benar).
Spasi yang tidak perlu antara nilai dan satuan → 20 px (salah) vs 20px (benar).

Debugging Tips:

Gunakan Developer Tools (F12) → tab Elements → lihat apakah selector CSS aktif atau dicoret
Jika properti dicoret, berarti ada selector lain yang lebih spesifik atau ada syntax error
Gunakan validator CSS online untuk mengecek kesalahan sintaks

Latihan Singkat

Buat file HTML baru dengan judul "Latihan Sintaks CSS"
Buat selektor tag untuk mengatur warna semua paragraf menjadi biru
Buat selektor class .highlight dengan background kuning
Buat selektor ID #main-title dengan ukuran font 32px dan warna hijau
Buat selektor universal untuk mengatur margin dan padding semua elemen menjadi 0
Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

Sintaks CSS terdiri dari selektor, properti, dan nilai
Selektor → memilih elemen HTML (tag, class, ID, universal)
Properti → aspek yang diubah (color, font-size, margin, dll)
Nilai → spesifikasi dari properti (red, 16px, 10px, dll)
Setiap deklarasi diakhiri dengan titik koma (;)
Class menggunakan titik (.), ID menggunakan pagar (#)
CSS case-sensitive dan komentar ditulis dengan /* ... */

Tantangan: Buat sebuah halaman profil sederhana dengan CSS internal! Persyaratan:

Gunakan selektor tag untuk styling body (font, background)
Gunakan selektor class .profile-card untuk kartu profil (background putih, padding, border-radius, shadow)
Gunakan selektor class .btn untuk tombol (warna biru, padding, border-radius, hover effect)
Gunakan selektor ID #name untuk nama (warna biru, ukuran 24px)
Di bagian bawah halaman, tuliskan semua kode CSS yang digunakan beserta penjelasan selektor, properti, dan nilainya

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #1 - Apa Itu CSS? Cara Kerja dan 3 Cara Menambahkannya ke HTML
Artikel Selanjutnya: CSS Dasar #3 - Mengenal CSS Reset dan Box Sizing

CSS Dasar #2 - Sintaks Dasar CSS: Selektor, Properti, dan Nilai

Apa Itu Sintaks CSS?

Contoh Sederhana

Ini adalah Heading 1

1. Selektor (Selector)

Jenis-jenis Selektor Dasar:

Contoh Selektor dalam Kode:

2. Properti (Property)

3. Nilai (Value)

Jenis-jenis Nilai CSS:

Aturan Penulisan CSS yang Baik

Contoh Penulisan CSS yang Baik:

Contoh Proyek: Halaman Sederhana dengan CSS

Belajar Sintaks CSS

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال