Belajar CSS — Panduan Interaktif

01

Pengenalan CSS

Apa itu CSS dan bagaimana cara menggunakannya?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan halaman web. Jika HTML adalah kerangka sebuah rumah, maka CSS adalah cat, furnitur, dan dekorasinya — tidak wajib, tapi membuat segalanya jauh lebih nyaman.

Ada 3 cara menambahkan CSS ke halaman HTML:

                  
                
index.html

                <!-- File CSS terpisah, disambungkan di <head>
                  -->
                <head>
                    <link rel="stylesheet" href="style.css">
                </head>
              

✅

Cara terbaik! CSS dipisah ke file sendiri — lebih rapi, mudah dipelihara, dan bisa dipakai ulang untuk banyak halaman HTML.

                  
                
index.html

                <head>
                    <style>
                        body {
                            background-color: #fafafa;
                            color: #333;
                        }
                    </style>
                </head>
              

📝

CSS ditulis langsung di dalam tag <style> di HTML. Cocok untuk halaman kecil atau latihan belajar.

                  
index.html

                <p style="color: red; font-size: 18px; font-weight: bold;">
                    Teks ini berwarna merah dan tebal.
                </p>

⚠️

Ditulis langsung di atribut HTML. Hindari jika memungkinkan — sulit dikelola untuk banyak elemen.

💡

Kata "Cascading" artinya CSS bekerja bertingkat — aturan yang lebih spesifik akan menang dari aturan yang lebih umum.

02

Selector

Cara memilih elemen HTML yang ingin diberi gaya

Selector adalah cara kita "menunjuk" elemen HTML mana yang akan diberi style. Anggap seperti GPS yang mengarahkan CSS ke elemen yang tepat.

style.css — Jenis-jenis Selector

            /* 1. Element selector — semua elemen jenis tersebut */
            p { color: navy; }
            h1 { font-size: 2rem; }

            /* 2. Class selector — elemen dengan class tertentu (bisa dipakai banyak) */
            .tombol { background: #3b82f6; }

            /* 3. ID selector — satu elemen unik di halaman */
            #header { height: 80px; }

            /* 4. Universal — semua elemen */
            * { box-sizing: border-box; }

            /* 5. Descendant — <p> yang ada DI DALAM <div> */
            div p { margin: 0; }

            /* 6. Child langsung */
            ul > li { list-style: none; }

            /* 7. Pseudo-class — kondisi tertentu */
            a:hover { color: red; }
            input:focus { border-color: blue; }
            li:first-child { font-weight: bold; }
          

Demo — Klik elemen untuk melihat selectornya

Ini elemen <p> — diberi style lewat element selector

Ini punya class="highlight" — class selector

Ini punya id="judul" — ID selector

Pseudo-class: link (:link) · dikunjungi (:visited) · hover untuk lihat efek

🎯

Spesifisitas (Specificity): Jika ada konflik, aturan yang lebih spesifik menang.
ID #x (kuat) > Class .x (sedang) > Element p (lemah)

03

Box Model

Setiap elemen HTML adalah sebuah "kotak"

Di CSS, setiap elemen dianggap sebagai kotak yang terdiri dari 4 lapisan: content (isi), padding (jarak dalam), border (garis tepi), dan margin (jarak luar). Memahami ini adalah kunci untuk mengatur layout.

Visualisasi Box Model

▲ margin — jarak dari elemen lain ▲

▶ border — garis tepi

▶ padding — jarak dalam

content
width × height

padding ◀

border ◀

▼ margin ▼

content

padding

border

margin

style.css — Box Model Properties

            .kotak {
                /* === Content === */
                width: 300px;
                height: 150px;

                /* === Padding === */
                padding: 16px; /* semua 4 sisi */
                padding: 16px 24px; /* atas-bawah | kiri-kanan */
                padding: 10px 20px 15px 5px; /* atas | kanan | bawah | kiri */
                padding-top: 8px; /* satu sisi saja */

                /* === Border === */
                border: 2px solid #333; /* tebal | gaya | warna */
                border-radius: 8px; /* sudut membulat */

                /* === Margin === */
                margin: 0 auto; /* trik untuk menengahkan elemen! */
                margin-bottom: 2rem;

                /* === PENTING: box-sizing === */
                /* Default: width hanya menghitung content — padding & border ditambahkan di luar */
                /* border-box: padding & border masuk ke dalam width yang ditentukan */
                box-sizing: border-box; /* ← SELALU gunakan ini! */
            }
          

Tanpa box-sizing: border-box

                width: 200px
+ padding: 24px
+ border: 6px
=
                230px total ⚠️
              

Dengan box-sizing: border-box

                width: 200px
(sudah termasuk padding & border)
=
                200px total ✅
              

04

Warna & Font

Mengatur palet warna dan tipografi

Warna di CSS bisa ditulis dalam beberapa format berbeda:

HEX

#ef4444

RGB

rgb(59,130,246)

HSL

hsl(142,70%,38%)

RGBA (transparan)

rgba(168,85,247,.55)

Gradient

linear-gradient

style.css — Warna & Font

            /* ===== WARNA ===== */
            p { color: #333; } /* warna teks */
            body { background-color: #fafafa; } /* warna latar */
            div { background: linear-gradient(to right, #667eea, #764ba2); }

            /* CSS Variables — warna konsisten di seluruh proyek */
            :root {
                --warna-utama: #3b82f6;
                --warna-aksen: #f59e0b;
                --teks: #1a1714;
            }

            .tombol {
                background: var(--warna-utama);
                color: white;
            }

            /* ===== FONT ===== */
            body {
                font-family: 'Georgia', serif; /* font utama, fallback serif */
                font-size: 1rem; /* 1rem = 16px (default browser) */
                font-weight: 400; /* 100 (tipis) — 900 (tebal) */
                line-height: 1.6; /* jarak antar baris */
                letter-spacing: 0.02em; /* jarak antar huruf */
            }

            h1 {
                font-size: 2.5rem;
                font-weight: 700;
                text-align: center;
            }

            .label {
                text-transform: uppercase; /* HURUF KAPITAL */
                text-decoration: underline; /* garis bawah */
                font-style: italic; /* miring */
            }
          

Demo Tipografi

Judul Besar · 2.2rem · 900

Paragraf dengan line-height: 1.8 — teks lebih mudah dibaca saat diberi jarak baris yang cukup. Idealnya minimal 1.5 untuk body text agar mata tidak lelah.

              font-family: monospace — dipakai untuk kode program
            

label · uppercase · letter-spacing lebar

Background gradient · linear-gradient(135deg, #667eea, #764ba2)

🔡

Gunakan Google Fonts untuk pilihan font yang lebih menarik! Tambahkan tag <link> dari fonts.google.com di <head>, lalu panggil dengan font-family.

05

Flexbox

Layout satu dimensi — baris atau kolom

Flexbox (Flexible Box) adalah sistem layout untuk menyusun elemen dalam satu arah — horizontal (baris) atau vertikal (kolom). Cukup tambahkan display: flex pada elemen container, dan item-item di dalamnya langsung bisa diatur.

style.css — Flexbox Container & Item

            /* ===== PADA CONTAINER (parent) ===== */
            .container {
                display: flex;

                /* Arah: row (default) | column | row-reverse | column-reverse */
                flex-direction: row;

                /* Penyelarasan di sumbu UTAMA (default: arah row → horizontal) */
                justify-content: flex-start;
                /* | center | flex-end | space-between | space-around | space-evenly */

                /* Penyelarasan di sumbu SILANG (tegak lurus) */
                align-items: stretch;
                /* | center | flex-start | flex-end | baseline */

                /* Bolehkah item pindah ke baris baru? */
                flex-wrap: nowrap; /* | wrap */

                gap: 1rem; /* jarak antar item */
            }

            /* ===== PADA ITEM (child) ===== */
            .item {
                flex: 1; /* tumbuh mengisi ruang sisa secara merata */
                flex-grow: 2; /* tumbuh 2x lebih banyak dari item lain */
                flex-shrink: 0; /* tidak boleh menyusut */
                order: 3; /* urutan visual (tanpa ubah HTML) */
                align-self: center; /* override align-items untuk item ini saja */
            }
          

Demo Interaktif Flexbox — Ubah properti dan lihat hasilnya!

Item 1

Item 2

Item 3

Item 4

flex-direction

justify-content

align-items

flex-wrap

💡

Flexbox sangat cocok untuk: navbar, baris kartu (card row), tombol berdampingan, atau apapun yang perlu di-center secara vertikal.

06

CSS Grid

Layout dua dimensi — baris dan kolom sekaligus

CSS Grid adalah sistem layout dua dimensi — kamu bisa mengatur baris dan kolom secara bersamaan. Cocok untuk layout halaman yang lebih kompleks seperti galeri foto, dashboard, atau struktur artikel.

style.css — CSS Grid

            .grid-container {
                display: grid;

                /* 3 kolom sama lebar menggunakan satuan fr (fraction) */
                grid-template-columns: repeat(3, 1fr);

                /* Kombinasi lebar tetap dan fleksibel */
                grid-template-columns: 200px 1fr 2fr;

                /* Baris otomatis */
                grid-auto-rows: minmax(100px, auto);

                gap: 1rem; /* jarak antar sel */
            }

            /* Item yang membentang beberapa kolom/baris */
            .item-besar {
                grid-column: span 2; /* membentang 2 kolom */
                grid-row: span 2; /* membentang 2 baris */
            }

            /* Named areas — layout halaman klasik */
            .halaman {
                display: grid;
                grid-template-areas:
                    "header header header"
                    "sidebar konten konten"
                    "footer footer footer";
                grid-template-columns: 200px 1fr;
            }

            .header { grid-area: header; }
            .sidebar { grid-area: sidebar; }
            .konten { grid-area: konten; }
          

Demo Interaktif CSS Grid

1

2

3

4

5

6

grid-template-columns

gap

📐

Flexbox vs Grid?
Flexbox = satu arah (baris atau kolom).
Grid = dua arah (baris dan kolom).
Keduanya bisa dipadukan!

✨

Satuan fr = "fraction" (bagian dari ruang tersedia). 1fr 2fr artinya kolom kedua dua kali lebih lebar dari kolom pertama.

07

Desain Responsif

Tampilan yang menyesuaikan ukuran layar

Desain responsif membuat halaman web tampil baik di semua ukuran layar — dari HP kecil hingga monitor besar. Kuncinya adalah Media Query — aturan CSS yang hanya aktif saat kondisi tertentu terpenuhi (biasanya ukuran layar).

📱

Langkah pertama — tambahkan tag ini di <head> agar browser mobile tidak mengecilkan halaman:

<meta name="viewport" content="width=device-width,
              initial-scale=1.0">

🖥 Desktop
≥1024px
3 kolom

📱 Tablet
≥768px
2 kolom

📲 Mobile
<768px
1 kolom

style.css — Media Query (pendekatan Mobile-First)

            /* Mobile-First: mulai dari layar terkecil, tambahkan aturan untuk yang lebih besar */

            /* ===== DEFAULT = MOBILE ===== */
            .grid {
                display: grid;
                grid-template-columns: 1fr; /* 1 kolom */
                gap: 1rem;
            }

            .nav-menu { display: none; } /* sembunyikan menu di mobile */
            .hamburger { display: block; } /* tampilkan tombol hamburger */

            /* ===== TABLET KE ATAS (≥ 768px) ===== */
            @media (min-width: 768px) {
                .grid {
                    grid-template-columns: repeat(2, 1fr); /* 2 kolom */
                }
                .nav-menu { display: flex; }
                .hamburger { display: none; }
            }

            /* ===== DESKTOP KE ATAS (≥ 1024px) ===== */
            @media (min-width: 1024px) {
                .grid {
                    grid-template-columns: repeat(3, 1fr); /* 3 kolom */
                }
            }

            /* Bisa juga menggunakan max-width (Desktop-First) */
            @media (max-width: 767px) {
                .font-besar { font-size: 1.5rem; } /* ukuran lebih kecil di mobile */
            }
          

Simulasi Responsif — Klik tombol untuk berganti "perangkat"

📰 Artikel 1Berita terkini

🔬 Artikel 2Teknologi

🌿 Artikel 3Sains & Alam

📐

Breakpoint umum yang dipakai: Mobile <768px · Tablet 768–1023px · Desktop ≥1024px. Tapi selalu sesuaikan dengan konten, bukan ukuran perangkat spesifik.

08

Animasi & Transisi

Membuat elemen bergerak dan terasa hidup

CSS menyediakan dua mekanisme animasi: transition (perubahan halus saat state berubah, misalnya saat hover) dan animation dengan @keyframes (animasi yang berjalan otomatis dan bisa berulang).

style.css — Transition & Transform

            .tombol {
                background: #3b82f6;
                color: white;
                padding: 0.75rem 1.5rem;
                border-radius: 7px;

                /* transition: properti | durasi | timing-function | delay */
                transition: all 0.3s ease;
                /* atau lebih spesifik: */
                transition: background 0.2s ease, transform 0.2s ease;
            }

            .tombol:hover {
                background: #1d4ed8;
                transform: translateY(-4px); /* naik 4px */
                box-shadow: 0 8px 24px rgba(59,130,246,0.35);
            }

            /* Fungsi Transform lainnya */
            .item {
                transform: scale(1.1); /* perbesar 10% */
                transform: rotate(45deg); /* putar 45 derajat */
                transform: translateX(20px); /* geser ke kanan */
                transform: skewX(10deg); /* miring */
                /* Kombinasi: */
                transform: scale(1.05) translateY(-3px);
            }

            /* Timing functions */
            transition-timing-function: ease; /* lambat-cepat-lambat (default) */
            transition-timing-function: linear; /* kecepatan konstan */
            transition-timing-function: ease-in; /* mulai lambat */
            transition-timing-function: ease-out; /* akhir lambat */
            transition-timing-function: ease-in-out; /* keduanya */
          

Demo Transition — Hover tombol di bawah!

✨ Hover Saya!

style.css — @keyframes Animation

            /* Definisi keyframe: tentukan kondisi di tiap titik animasi */
            @keyframes bounce {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-22px);
                }
            }

            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* Terapkan animasi ke elemen */
            .bola {
                /* animation: nama | durasi | timing | delay | iterasi | arah | fill-mode */
                animation: bounce 1s ease-in-out infinite;
            }

            .loading {
                animation: spin 1.5s linear infinite;
            }

            .muncul {
                animation: fadeIn 0.5s ease-out forwards; /* forwards = tahan posisi akhir */
                animation-delay: 0.3s;
            }

            /* Aksesibilitas — matikan animasi jika user minta */
            @media (prefers-reduced-motion: reduce) {
                * {
                    animation: none !important;
                    transition: none !important;
                }
            }
          

Demo Animasi @keyframes

⚽

bounce

⚙️

spin

💚

pulse

✨

slide

🎉

Selamat! Kamu telah menyelesaikan materi CSS ini.

selector box model warna & font flexbox grid media query animasi & transisi

// Langkah selanjutnya: buka CodePen atau VS Code dan mulai bereksperimen! 🚀

CascadingStyle Sheets

Pengenalan CSS

Selector

Box Model

Warna & Font

Flexbox

CSS Grid

Desain Responsif

Animasi & Transisi

Selamat! Kamu telah menyelesaikan materi CSS ini.

Cascading
Style Sheets