BAB 1: CSS Home
Pengenalan ebook CSS Dasar — apa yang akan dipelajari dan bagaimana CSS mengubah tampilan halaman web.
Bayangkan kamu membangun sebuah rumah. HTML adalah rangka dan temboknya — struktur yang menentukan ada berapa kamar, di mana pintu, di mana jendela. Tapi tanpa cat, tanpa furnitur, tanpa pencahayaan yang tepat, rumah itu terasa dingin dan tidak layak huni. CSS adalah semua itu: cat dindingnya, pilihan furniturnya, lampu yang menciptakan suasana.
Sebelum CSS ada, desainer web harus menyisipkan atribut tampilan langsung ke dalam tag HTML. Warna diatur dengan <font color="red">, lebar tabel dengan width="500", latar belakang dengan bgcolor="#ffffff". Setiap elemen harus dikonfigurasi satu per satu, dan mengubah warna di seluruh website berarti membuka ratusan file dan mengeditnya secara manual. CSS hadir untuk memutus siklus itu.
CSS Adalah Lapisan Presentasi
HTML mendefinisikan apa yang ada di halaman. CSS mendefinisikan bagaimana ia terlihat. Pemisahan ini bukan sekadar kenyamanan teknis — ini adalah prinsip desain yang membuat website lebih mudah dipelihara, lebih cepat dimuat, dan lebih mudah diakses.
Dengan satu file CSS, kamu bisa mengontrol tampilan ribuan halaman sekaligus. Ketika Tokopedia memutuskan untuk mengganti warna primernya, yang diubah bukan setiap halaman produk, bukan setiap tombol, bukan setiap banner — cukup satu atau beberapa baris CSS di satu tempat, dan perubahan itu menjalar ke seluruh website.
Inilah yang dimaksud dengan kaskade dalam nama Cascading Style Sheets. Aturan CSS mengalir dari sumber yang paling umum ke yang paling spesifik, dari satu level ke level berikutnya, membentuk hierarki yang sangat terstruktur.
Apa yang Bisa CSS Lakukan
Hampir semua yang kamu lihat di sebuah halaman web adalah hasil kerja CSS. Berikut gambaran singkat kemampuannya:
- Warna dan tipografi — warna teks, ukuran font, jenis huruf, jarak antar karakter
- Tata letak — bagaimana elemen disusun di halaman, berapa kolom, posisi header dan footer
- Responsivitas — tampilan yang berbeda di ponsel, tablet, dan desktop
- Animasi — transisi halus, gerakan elemen, efek hover
- Visual efek — bayangan, gradasi warna, filter gambar, transparansi
Ini bukan daftar yang lengkap — CSS modern menjangkau jauh lebih dalam dari itu. Tapi gambaran di atas cukup untuk memberi kamu rasa betapa centralnya CSS dalam pengembangan web.
Contoh Pertama: HTML Tanpa CSS
Buka teks editor apapun — VSCode, Notepad, atau yang lain — dan buat file bernama profil.html. Ketik kode berikut:
HTML<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Saya</title>
</head>
<body>
<h1>Budi Santoso</h1>
<p>Seorang developer yang sedang belajar CSS.</p>
<p>Kota asal: Yogyakarta</p>
</body>
</html>
Buka file itu di browser. Yang kamu lihat adalah teks hitam di latar putih, dengan heading yang sedikit lebih besar dari paragraf. Tidak ada warna, tidak ada jarak yang menarik, tidak ada karakter visual sama sekali. Inilah HTML tanpa CSS.
Contoh Kedua: HTML dengan CSS
Sekarang tambahkan blok <style> di dalam <head>:
HTML<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Saya</title>
<style>
body {
font-family: sans-serif;
background-color: #f0f4f8;
max-width: 600px;
margin: 40px auto;
padding: 0 20px;
}
h1 {
color: #1a56db;
font-size: 2rem;
}
p {
color: #4b5563;
line-height: 1.7;
}
</style>
</head>
<body>
<h1>Budi Santoso</h1>
<p>Seorang developer yang sedang belajar CSS.</p>
<p>Kota asal: Yogyakarta</p>
</body>
</html>
Refresh browsernya. Sekarang teksnya menggunakan font sans-serif yang lebih bersih, latar belakang berubah menjadi abu-abu terang, heading berwarna biru, paragraf berwarna abu-abu gelap dengan jarak baris yang lebih nyaman dibaca, dan konten terpusat di tengah halaman dengan lebar maksimal 600px.
Konten HTML-nya tidak berubah sama sekali. Yang berubah hanya tampilannya — dan itu sepenuhnya pekerjaan CSS.
Bagaimana CSS Bekerja
CSS bekerja dengan sistem selektor dan deklarasi. Selektor menentukan elemen HTML mana yang akan diubah tampilannya. Deklarasi menentukan perubahan apa yang diterapkan.
TEXTselektor {
properti: nilai;
}
Dalam contoh di atas, h1 adalah selektor — CSS menarget semua elemen <h1> di halaman. color: #1a56db adalah satu deklarasi: propertinya adalah color, nilainya adalah #1a56db (kode warna biru dalam format heksadesimal).
Sebuah blok CSS bisa berisi banyak deklarasi sekaligus, dan satu file CSS bisa berisi ratusan blok seperti itu. Semua blok itu bekerja bersama, tumpang tindih, dan saling melengkapi untuk menciptakan tampilan akhir yang kamu lihat di browser.
Apa yang Akan Kamu Pelajari
Perjalanan di ebook ini dibagi menjadi beberapa bagian besar. Bagian pertama — CSS Tutorial — membangun fondasi: sintaks, selektor, warna, box model, tipografi, dan layout dasar. Ini adalah pengetahuan yang akan terus kamu pakai di setiap bagian berikutnya.
Setelah fondasi kuat, bagian CSS Advanced memperkenalkan fitur-fitur visual: transform, transisi, animasi, variabel CSS, dan efek gambar. Di sini CSS mulai terasa seperti alat desain yang sesungguhnya.
Bagian terakhir — Flexbox, Grid, dan Responsive Web Design — adalah puncak praktis dari ebook ini. Inilah teknologi yang digunakan developer profesional untuk membangun layout halaman web modern yang bekerja di semua ukuran layar.
Setiap kali membaca, tulis kodenya sendiri. Ketik ulang contoh kode yang ada, ubah nilai-nilainya, dan amati apa yang terjadi. CSS adalah bahasa visual — cara belajar paling efektif adalah melihat hasilnya langsung di browser.
Di contoh kode tadi, kamu sudah melihat potongan seperti color: #1a56db dan font-family: sans-serif — tapi mungkin kamu masih bertanya-tanya: apa tepatnya aturan penulisannya? Mengapa ada tanda titik dua, titik koma, dan kurung kurawal di sana? Itu semua adalah bagian dari sintaks CSS, dan memahaminya dengan benar adalah fondasi sebelum kamu bisa menulis CSS yang berfungsi.