Halo teman-teman semuanya, setelah sebelumnya kita mempelajari dasar-dasar HTML, sekarang saatnya kita berkenalan dengan CSS, teknologi yang digunakan untuk mempercantik tampilan halaman web.
Dengan memahami CSS, kita bisa mengatur warna, ukuran, layout, dan banyak aspek visual lainnya agar halaman web terlihat lebih menarik dan profesional.
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa yang digunakan untuk mengatur tampilan elemen HTML di halaman web.
Jika HTML berfungsi untuk membangun struktur, maka CSS adalah alat untuk mempercantik tampilannya.
Contohnya:
<p style="color: blue;">Ini paragraf berwarna biru</p>
Cara Menambahkan CSS ke HTML
Ada tiga cara utama untuk menambahkan CSS ke dalam HTML:
-
Inline CSS
Menuliskan CSS langsung di atribut style dalam tag HTML.
<h1 style="color: red;">Judul Merah</h1>
Cocok untuk styling cepat, tapi tidak disarankan untuk proyek besar karena tidak rapi dan sulit dikelola.
-
Internal CSS
Menuliskan CSS di dalam tag <style> di bagian <head> HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>Paragraf hijau</p>
</body>
</html>
Cocok digunakan jika style hanya digunakan di satu halaman saja.
-
External CSS
Menuliskan CSS di file terpisah (misalnya style.css) dan menghubungkannya ke HTML dengan tag <link>.
<!-- di dalam file HTML -->
<head>
<link rel="stylesheet" href="style.css">
</head>
/* di dalam file style.css */
p {
color: purple;
}
Ini adalah cara yang paling direkomendasikan karena lebih rapi dan mudah untuk dikelola di proyek besar.
Kesimpulan:
- CSS digunakan untuk mengatur tampilan elemen HTML.
- Ada tiga cara menambahkan CSS: Inline, Internal, dan External.
- Untuk proyek besar, sebaiknya gunakan External CSS.
Di artikel selanjutnya, kita akan belajar tentang Selector dalam CSS — bagaimana cara kita memilih elemen HTML yang ingin kita beri style.
Terima kasih