Pengenalan CSS: Menghias Struktur HTML
1. Apa Itu CSS?
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup (seperti HTML). CSS memisahkan konten (HTML) dari desain visual (CSS), sehingga kode Anda tetap bersih, terstruktur, dan mudah dikelola.
2. Syntax Dasar CSS
Struktur kode CSS sangat sederhana dan selalu terdiri dari tiga bagian utama:
-
Selector: Elemen HTML yang ingin Anda hias (misalnya
h1,p, atau.class). -
Property: Atribut spesifik yang ingin Anda ubah (misalnya
color,font-size,background). -
Value: Nilai yang diberikan pada properti tersebut (misalnya
blue,20px,#ffffff).
Rumus Dasar:
selector { property: value;
}
3. Contoh Implementasi pada Portal Berita
Mari kita terapkan CSS dasar pada elemen-elemen yang sudah kita buat di proyek wireframe SatuMedia sebelumnya.
/* Menghias Judul Utama */
h1 { color: #2c3e50; /* Properti Warna: Nilai Hex */ font-size: 32px; /* Properti Ukuran Font: Nilai Pixel */ text-align: center; /* Properti Perataan Teks: Nilai Center */
} /* Menghias Artikel Berita */
article { background-color: #f9f9f9; padding: 20px; /* Ruang kosong di dalam kotak (sisi dalam) */ margin-bottom: 15px; /* Jarak antar kotak artikel (sisi luar) */ border-left: 5px solid #e74c3c; /* Garis aksen merah di samping kiri */
} /* Menghias Link Navigasi */
nav a { text-decoration: none; /* Menghilangkan garis bawah bawaan link */ color: #3498db; font-weight: bold; /* Menebalkan teks */
}
4. Tiga Cara Memasang CSS
Ada tiga metode utama untuk menerapkan CSS ke dalam dokumen HTML Anda:
| Metode | Letak Kode | Kegunaan & Best Practice |
| Inline CSS | Langsung di dalam tag HTML menggunakan atribut style="...". |
Hanya untuk perubahan cepat/darurat pada satu elemen spesifik. Sangat tidak disarankan untuk proyek besar karena membuat kode berantakan. |
| Internal CSS | Di dalam tag <style> yang diletakkan pada bagian <head> dokumen HTML. |
Cocok digunakan jika Anda hanya membuat satu halaman web tunggal (seperti landing page promosi) yang memiliki gaya uniknya sendiri. |
| External CSS | Berada di file terpisah (berakhiran .css) lalu dipanggil menggunakan tag <link> di dalam <head>. |
Standar Profesional. Satu file CSS bisa digunakan untuk mengatur gaya ratusan halaman HTML sekaligus. Sangat mudah dikelola dan mempercepat loading web. |
Contoh Pemanggilan External CSS (Standar Profesional):
<head> <link rel="stylesheet" href="style.css">
</head>
Kesimpulan
CSS adalah tongkat ajaib yang mengubah kerangka HTML polos menjadi antarmuka visual yang menarik. Dengan memahami konsep Selector, Property, dan Value, serta membiasakan diri menggunakan metode External CSS, Anda sudah mengambil langkah pertama yang tepat untuk membangun struktur web (seperti portal SatuMedia) yang profesional dan mudah dikembangkan di masa depan.
