Pada pembahasan kali ini, kita akan membahas CSS. Sebelumnya, kita sudah sempat menyinggung sedikit tentang CSS. Lalu, sebenarnya apa itu CSS?
CSS merupakan singkatan dari Cascading Style Sheets, yaitu sebuah style sheet language yang digunakan untuk mengatur dan mendeskripsikan tampilan dari sebuah dokumen. Yang dimaksud dokumen di sini adalah dokumen HTML.
HTML sendiri merupakan salah satu jenis dokumen yang digunakan untuk membangun struktur sebuah halaman web. Jika diibaratkan, HTML berfungsi sebagai kerangka atau struktur, sedangkan CSS berfungsi untuk memperindah tampilan dari struktur tersebut.
• Belajar Coding Bagian 9: Membuat Elemen Formulir HTML (Lengkap & Detail)
• Arsitektur Aplikasi Web Modern dengan Frontend HTML, CSS, JavaScript dan Backend Node.js + Express
Dengan CSS, kita bisa mengatur berbagai hal seperti:
-
Warna teks
-
Ukuran font
-
Jarak antar elemen
-
Tata letak halaman
-
Efek visual lainnya
Cara Menggunakan CSS
Secara umum, terdapat tiga cara untuk menggunakan CSS pada HTML, yaitu Inline CSS, Internal CSS, dan External CSS.
1. Inline CSS
Inline CSS adalah cara penulisan CSS langsung di dalam tag HTML menggunakan atribut style.
Contohnya, jika kita ingin mengubah warna teks paragraf menjadi merah:
<p style="color: red;">Ini adalah paragraf berwarna merah</p>
Cara ini cocok untuk pengujian cepat, tetapi tidak disarankan untuk penggunaan skala besar karena sulit dikelola.
2. Internal CSS
Internal CSS ditulis di dalam tag <style> yang berada pada bagian <head> di file HTML.
Contohnya:
<head> <style> p { color: red; } </style> </head>
Dengan cara ini, kita bisa mengatur lebih dari satu elemen sekaligus, seperti p, h1, a, dan elemen lainnya. Internal CSS lebih rapi dibanding inline, tetapi masih terbatas hanya untuk satu file HTML.
3. External CSS
External CSS adalah cara yang paling sering dan paling disarankan. Pada metode ini, CSS ditulis di file terpisah dengan ekstensi .css, lalu dihubungkan ke file HTML.
Contoh file CSS (style.css):
p { color: red; }
Kemudian dihubungkan ke HTML menggunakan tag <link>:
<link rel="stylesheet" href="style.css">
Jika file HTML dan CSS berada dalam folder yang sama, cukup tuliskan nama filenya saja.
Kenapa Lebih Disarankan Menggunakan External CSS?
External CSS sangat berguna ketika:
-
Website memiliki banyak halaman
-
Kode HTML menjadi panjang dan kompleks
-
Tampilan perlu konsisten di seluruh halaman
Jika CSS ditulis langsung di dalam HTML, kode akan menjadi sulit dibaca dan dirawat. Selain itu, perubahan kecil bisa menjadi rumit karena harus mencari satu per satu di dalam tag HTML.
Dengan External CSS:
-
Kode lebih rapi dan terstruktur
-
Lebih mudah dibaca dan dipelihara
-
Perubahan tampilan bisa dilakukan dari satu file saja
Karena alasan inilah, pada praktik selanjutnya kita akan lebih sering menggunakan External CSS.
Penutup
CSS adalah bagian penting dalam pengembangan web karena berperan besar dalam menentukan tampilan dan kenyamanan pengguna. Pada materi selanjutnya, kita akan mulai mempraktikkan CSS secara langsung sambil membuat sebuah halaman company profile sederhana agar pemahaman menjadi lebih nyata dan aplikatif.
