Selamat! Anda telah menyelesaikan seri HTML Dasar. Sekarang saatnya melangkah ke level berikutnya: CSS (Cascading Style Sheets). Jika HTML adalah kerangka rumah, maka CSS adalah cat, dekorasi, dan furnitur yang membuat rumah tersebut menjadi indah dan nyaman dipandang.
Apa Itu CSS?
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak halaman web. Dengan CSS, kita bisa mengatur warna, ukuran font, jarak antar elemen, posisi elemen, animasi, dan masih banyak lagi.
- HTML = Struktur / kerangka (seperti pondasi, dinding, atap rumah)
- CSS = Tampilan / dekorasi (seperti cat, keramik, furnitur, lampu)
- JavaScript = Interaktivitas (seperti listrik, kulkas, AC, pintu otomatis)
Mengapa CSS Sangat Penting?
Bayangkan jika internet hanya terdiri dari teks hitam di latar putih tanpa gaya apapun. Membosankan, bukan? Berikut alasan mengapa CSS sangat penting:
- Membuat website menarik secara visual
- Meningkatkan pengalaman pengguna (User Experience)
- Memungkinkan layout responsif (tampil baik di HP, tablet, dan desktop)
- Memisahkan struktur (HTML) dari tampilan (CSS) sehingga kode lebih rapi
- Menghemat waktu karena satu file CSS bisa digunakan untuk banyak halaman
Cara Kerja CSS
CSS bekerja dengan cara memilih elemen HTML (menggunakan selector) lalu menerapkan properti dan nilai pada elemen tersebut.
Struktur dasar aturan CSS:
selector {
properti: nilai;
properti: nilai;
}
Contoh: Memilih semua paragraf (<p>) dan mengubah warnanya menjadi biru serta ukuran font menjadi 16px.
p {
color: blue;
font-size: 16px;
}
padalah selector (memilih semua elemen <p>)color: blue;adalah deklarasi (mengubah warna teks menjadi biru)font-size: 16px;adalah deklarasi (mengubah ukuran font menjadi 16px)
3 Cara Menambahkan CSS ke HTML
Ada tiga cara untuk menambahkan CSS ke halaman HTML. Masing-masing memiliki kelebihan dan kekurangan.
| Metode | Cara Penulisan | Cakupan | Kapan Pakai? |
|---|---|---|---|
| Inline CSS | Atribut style di elemen HTML |
1 elemen saja | Styling cepat, testing |
| Internal CSS | Tag <style> di dalam <head> |
1 halaman HTML | Website 1 halaman, prototipe |
| External CSS | File .css terpisah, dihubungkan dengan <link> |
Seluruh halaman website | Website profesional (disarankan) |
1. Inline CSS (CSS Langsung di Elemen)
Inline CSS ditulis langsung di atribut style dalam tag HTML. Ini cara tercepat tapi paling tidak disarankan untuk website besar karena sulit di-maintenance.
Contoh:
<h1 style="color: blue; text-align: center;">Judul dengan Inline CSS</h1> <p style="font-size: 18px; color: green; font-weight: bold;">Paragraf dengan gaya sendiri</p>
Hasilnya:
Judul dengan Inline CSS
Paragraf dengan gaya sendiri
- Sulit di-maintenance (setiap elemen harus diedit satu per satu)
- Tidak bisa digunakan ulang (reusable)
- Membuat HTML jadi berantakan dan sulit dibaca
- Tidak bisa memanfaatkan fitur CSS seperti class, pseudo-class, dll
2. Internal CSS (CSS di Dalam File HTML)
Internal CSS ditulis di dalam tag <style> yang diletakkan di <head>. Ini lebih rapi daripada inline karena bisa mengatur banyak elemen sekaligus dalam satu halaman.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
padding: 20px;
}
h1 {
color: #3b82f6;
text-align: center;
border-bottom: 3px solid #3b82f6;
padding-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.6;
color: #333;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah contoh <span class="highlight">Internal CSS</span>. Semua styling ada di dalam file HTML yang sama.</p>
</body>
</html>
Hasilnya:
- Lebih rapi daripada inline CSS
- Bisa menggunakan selector (class, id, tag)
- Cocok untuk website 1 halaman (landing page)
- Tidak perlu file tambahan
- Tidak bisa digunakan di halaman lain (harus copy-paste)
- Membuat file HTML semakin besar
3. External CSS (File CSS Terpisah) - PALING DISARANKAN
External CSS adalah cara profesional dan paling disarankan untuk website. Kita menulis CSS di file terpisah dengan ekstensi .css, lalu menghubungkannya ke HTML menggunakan tag <link>.
Langkah-langkah:
1. Buat file HTML (index.html):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Website dengan External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah contoh External CSS. File CSS terpisah dari HTML.</p>
<div class="card">
<h3>Card 1</h3>
<p>Ini adalah kartu dengan gaya dari file CSS eksternal.</p>
</div>
</body>
</html>
2. Buat file CSS (style.css) di folder yang sama:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f4f8;
}
h1 {
color: #3b82f6;
text-align: center;
border-bottom: 3px solid #3b82f6;
padding-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.6;
color: #333;
}
.card {
background: white;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin-top: 0;
color: #1e40af;
}
Hasilnya (setelah dihubungkan):
- Satu file CSS bisa digunakan untuk banyak halaman (reusable)
- HTML jadi lebih bersih dan mudah dibaca
- Loading lebih cepat karena browser menyimpan cache file CSS
- Memudahkan tim developer bekerja (HTML dan CSS terpisah)
- Mendukung semua fitur CSS (media query, animation, dll)
Perbandingan Ketiga Metode
| Aspek | Inline CSS | Internal CSS | External CSS |
|---|---|---|---|
| Tempat penulisan | Atribut style |
Tag <style> di <head> |
File .css terpisah |
| Cakupan | 1 elemen | 1 halaman | Banyak halaman |
| Dapat digunakan ulang | Tidak | Tidak (halaman lain) | Ya |
| Maintenance | Sulit | Sedang | Mudah |
| Rekomendasi | Hanya untuk testing | Website 1 halaman | Website profesional |
Latihan Singkat
- Buat file HTML baru dengan judul "Latihan CSS"
- Buat inline CSS untuk mewarnai satu heading menjadi merah
- Buat internal CSS di dalam tag
<style>untuk mengatur background halaman menjadi abu-abu muda - Buat external CSS dengan membuat file
style.cssdan hubungkan ke HTML. Di file CSS, buat class.boxdengan background biru, padding 20px, border-radius 10px - Simpan dan buka di browser. Amati mana yang berhasil dan mana yang tidak
Intisari Hari Ini
- CSS adalah bahasa untuk mengatur tampilan website
- Inline CSS → atribut
styledi elemen (cakupan 1 elemen, tidak disarankan) - Internal CSS → tag
<style>di<head>(cakupan 1 halaman) - External CSS → file
.cssterpisah + tag<link>(cakupan banyak halaman) → PALING DISARANKAN - Untuk website profesional, selalu gunakan External CSS
- External CSS membuat HTML bersih, reusable, dan loading lebih cepat karena cache
- Satu file CSS (style.css) digunakan untuk kedua halaman
- Setiap halaman memiliki: heading, paragraf, dan tombol
- Gunakan CSS untuk mengatur warna, font, border-radius, dan hover effect pada tombol
- Buat link navigasi antar kedua halaman
- Di bagian bawah halaman, tuliskan penjelasan mengapa External CSS adalah cara terbaik
Selamat mencoba!
Artikel Sebelumnya: [Selesai] Seri HTML Dasar
Artikel Selanjutnya: CSS Dasar #2 - Sintaks Dasar CSS: Selektor, Properti, dan Nilai