Setelah kamu memahami HTML dasar, langkah berikutnya dalam belajar web development adalah CSS.
Jika HTML adalah kerangka website, maka CSS adalah desainnya.
Tanpa CSS, website hanya terlihat seperti dokumen teks biasa.
Dalam roadmap belajar programming, tahap ini sangat penting karena CSS merupakan skill dasar bagi frontend developer.
Jika kamu belum membaca artikel sebelumnya, kamu bisa mempelajarinya terlebih dahulu:
- 👉 Dasar HTML untuk Pemula
- 👉 Git dan GitHub untuk Pemula
- 👉 Cara Install VS Code untuk Pemula
- 👉 Roadmap Belajar Programming dari Nol Sampai Kerja
- 👉 Perbedaan Frontend vs Backend vs Fullstack
Sekarang kita mulai belajar CSS.
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets.
CSS digunakan untuk mengatur tampilan halaman website seperti:
- Warna
- Font
- Layout
- Spacing
- Animasi sederhana
Dengan CSS, website menjadi lebih modern dan menarik.
Cara Kerja CSS
CSS bekerja dengan cara menargetkan elemen HTML lalu memberikan styling.
Contohnya:
h1 {
color: blue;
}
Artinya semua elemen <h1> akan berwarna biru.
Cara Menambahkan CSS ke HTML
Ada tiga cara menggunakan CSS.
1️⃣ Inline CSS
CSS ditulis langsung pada tag HTML.
Contoh:
<h1 style="color:red;">Halo Dunia</h1>
Namun cara ini jarang digunakan karena sulit dikelola.
2️⃣ Internal CSS
CSS ditulis di dalam tag <style> pada file HTML.
Contoh:
<style>
h1 {
color: blue;
}
</style>
3️⃣ External CSS (Cara Terbaik)
CSS ditulis di file terpisah.
Contoh:
index.html
<link rel="stylesheet" href="style.css">
style.css
h1 {
color: blue;
}
Cara ini paling profesional.
Struktur Dasar CSS
Struktur CSS terdiri dari:
selector {
property: value;
}
Contoh:
p {
font-size: 18px;
}
Penjelasan:
- selector → elemen HTML yang ditargetkan
- property → jenis styling
- value → nilai styling
Properti CSS Dasar yang Wajib Dipelajari
1️⃣ Color
Mengubah warna teks.
p {
color: red;
}
2️⃣ Background Color
Memberikan warna latar.
body {
background-color: lightgray;
}
3️⃣ Font Size
Mengatur ukuran teks.
h1 {
font-size: 32px;
}
4️⃣ Margin
Memberikan jarak luar elemen.
div {
margin: 20px;
}
5️⃣ Padding
Memberikan jarak dalam elemen.
div {
padding: 20px;
}
Contoh Mini Project HTML + CSS
Mari kita buat halaman sederhana.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Website Saya</title>
<link rel="stylesheet" href="style.css">
</head><body><h1>NgodingDaily</h1><p>Belajar Ngoding Setiap Hari</p></body>
</html>
style.css
body {
background-color: #f4f4f4;
font-family: Arial;
}h1 {
color: #1E40AF;
}p {
font-size: 18px;
}
Sekarang website terlihat jauh lebih menarik.
Kenapa CSS Penting untuk Developer?
Jika kamu ingin menjadi frontend developer, CSS adalah skill utama.
Dalam artikel tentang frontend vs backend, kita sudah membahas bahwa frontend bertanggung jawab terhadap tampilan website.
Tanpa CSS, frontend tidak bisa bekerja dengan baik.
CSS Skill yang Akan Dipelajari Setelah Ini
Setelah CSS dasar, kamu akan belajar:
- Flexbox
- Grid
- Responsive design
- Animasi CSS
- Framework seperti Tailwind atau Bootstrap
Semua itu dibangun di atas CSS dasar.
Kesalahan Umum Pemula
❌ Terlalu cepat belajar framework
❌ Tidak memahami layout dasar
❌ Menghafal tanpa praktik
❌ Tidak membuat project
Ingat:
Belajar coding harus dengan praktik.
Latihan Project CSS
Coba buat:
- Landing page sederhana
- Website profil pribadi
- Halaman produk
- Blog sederhana
Upload project ke GitHub agar bisa menjadi portfolio.
Hubungan CSS dengan Karier Web Developer
Skill CSS sangat dibutuhkan dalam industri teknologi.
Banyak pekerjaan membutuhkan:
- Frontend developer
- UI developer
- Web designer
Jika kamu mengikuti roadmap belajar programming, CSS adalah langkah penting sebelum belajar JavaScript.
FAQ
Apakah CSS sulit dipelajari?
Tidak. CSS cukup mudah jika dipelajari secara bertahap.
Berapa lama belajar CSS?
Dasar CSS bisa dipelajari dalam 2–3 minggu.
Apakah HTML dan CSS cukup untuk membuat website?
Ya, tetapi website akan lebih interaktif jika ditambahkan JavaScript.
Apakah CSS masih relevan?
Sangat relevan. Semua website modern menggunakan CSS.
Kesimpulan
CSS adalah teknologi yang membuat website terlihat profesional.
Setelah memahami HTML dan CSS, kamu sudah memiliki fondasi kuat untuk menjadi web developer.
Langkah berikutnya adalah mempelajari JavaScript agar website menjadi interaktif.
Di NgodingDaily kita belajar langkah demi langkah.
Belajar Ngoding Setiap Hari 🚀
