Tentang Buku Ini
Informasi lengkap tentang ebook CSS Dasar: versi CSS yang digunakan, prasyarat, struktur bab, dan konvensi penulisan kode.
Versi CSS
Ebook ini ditulis menggunakan CSS3 dan berbagai fitur modern yang sudah didukung oleh semua browser utama (Chrome, Firefox, Safari, Edge). Seluruh contoh kode telah diverifikasi berjalan di browser modern terkini.
CSS tidak memiliki nomor versi tunggal seperti bahasa pemrograman — spesifikasi CSS berkembang secara modular. Fitur-fitur yang digunakan dalam ebook ini memiliki dukungan browser yang sangat luas dan dapat digunakan di produksi tanpa perlu polyfill.
Untuk mengecek dukungan fitur CSS di browser tertentu, gunakan Can I Use.
Prasyarat
Ebook ini dirancang untuk pemula yang sudah memiliki pemahaman dasar HTML. Tidak diasumsikan pengalaman CSS sebelumnya.
Yang diasumsikan:
- Bisa membuat file HTML dasar
- Memahami konsep tag HTML (elemen, atribut)
- Tahu cara membuka file di browser
Yang tidak diasumsikan:
- Pengalaman CSS atau desain web
- Pengetahuan tentang JavaScript
- Pemahaman tentang framework CSS (Bootstrap, Tailwind)
Struktur Bab
Bab-bab konten dibagi menjadi beberapa bagian:
| Bagian | Topik |
|---|---|
| CSS Tutorial | Fondasi CSS: sintaks, selektor, warna, box model, text, font, layout dasar |
| CSS Advanced | Fitur modern: transform, transition, animasi, variabel CSS, filter |
| CSS Flexbox | Layout satu dimensi dengan Flexbox |
| CSS Grid | Layout dua dimensi dengan CSS Grid |
| CSS Responsive | Desain yang bekerja di semua ukuran layar |
| CSS References | Referensi selektor, fungsi, dan properti CSS |
Konvensi Penulisan Kode
File HTML — Seluruh contoh menggunakan struktur HTML5 standar dengan <!DOCTYPE html>.
CSS inline vs eksternal — Contoh-contoh dasar menggunakan <style> di dalam <head> untuk kemudahan membaca. Di bab-bab selanjutnya, beralih ke file CSS eksternal yang merupakan praktik terbaik untuk proyek nyata.
Komentar kode — Komentar /* ... */ digunakan untuk menjelaskan baris kode yang perlu perhatian khusus.
/* Komentar menjelaskan properti di bawah */
color: #333333;Browser DevTools — Beberapa bab menyarankan penggunaan browser DevTools untuk inspect elemen. Buka dengan F12 atau klik kanan kemudian Inspect.
Melaporkan Kesalahan
Jika kamu menemukan kesalahan — kode yang tidak berjalan, penjelasan yang membingungkan, atau informasi yang sudah tidak akurat — laporkan melalui situs. Setiap laporan dibaca dan direspons.