HTML - Style Sheet: A Panduan Pemula

Selamat datang, bakal pengembang web! Hari ini, kita akan melihat dunia yang berwarna-warni dari Style Sheet HTML, juga dikenal sebagai CSS (Cascading Style Sheets). Bayangkan HTML sebagai kerangka halaman web Anda, dan CSS sebagai pakaian mode yang membuatnya terlihat menakjubkan. Mari kita mulai perjalanan yang menarik ini bersama-sama!

HTML - Style Sheet

Apa Itu Style Sheet?

Sebelum kita melompat ke dalam, mari kita pahami apa style sheet itu. Style sheet adalah set aturan gaya yang mengatakan ke browser web bagaimana untuk menampilkan dokumen yang ditulis dalam HTML. Itu seperti buku panduan desainer mode untuk halaman web Anda!

Contoh CSS dalam Dokumen HTML

Mari kita mulai dengan contoh sederhana untuk melihat CSS dalam aksi:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>Selamat Datang ke Halaman Stylish Saya!</h1>
<pIni adalah paragraf dengan gaya default.</p>
</body>
</html>

Dalam contoh ini, kita menambahkan tag <style> di dalam bagian <head> dokumen HTML kita. Di dalam tag ini, kita menentukan beberapa aturan CSS:

Kita mengatur warna latar body menjadi abu-abu tua (#f0f0f0) dan mengubah font menjadi Arial.
Kita menggaya tag h1 untuk memiliki warna biru laut dan menengahkan teks di halaman.

Jenis-jenis CSS

Sekarang kita telah melihat CSS dalam aksi, mari kita jelajahi tiga jenis CSS. Bayangkan ini sebagai cara-cara berbeda untuk menambahkan gaya ke pakaian HTML Anda:

1. CSS Inline

CSS Inline seperti menambahkan topi mewah langsung ke pakaian Anda. Itu diterapkan langsung ke elemen HTML menggunakan atribut style.

<h1 style="color: red; font-size: 24px;">Ini adalah judul merah</h1>

Dalam contoh ini, kita membuat judul menjadi merah dan meningkatkan ukurannya menjadi 24 piksel.

2. CSS Internal

CSS Internal seperti memiliki stylist pribadi untuk halaman web tunggal. Itu didefinisikan dalam tag <style> di bagian <head> file HTML, seperti yang kita lihat dalam contoh pertama.

3. CSS Eksternal

CSS Eksternal seperti memiliki panduan mode universal untuk semua halaman web Anda. Itu disimpan dalam file .css terpisah dan dihubungkan ke dokumen HTML Anda.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Selamat Datang ke Halaman Stylish Saya!</h1>
<p>Halaman ini diberikan gaya menggunakan file CSS eksternal.</p>
</body>
</html>

Dalam contoh ini, kita menghubungkan file CSS eksternal bernama styles.css ke dokumen HTML kita.

Contoh penggunaan Style Sheet

Mari kita jelajahi lebih banyak contoh untuk melihat kekuatan CSS:

Menggaya Teks

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

Aturan CSS ini menggaya semua paragraf dengan font Georgia, ukuran 16px, tinggi baris 1.6, dan warna abu-abu tua.

Membuat Tombol

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

CSS ini membuat tombol hijau yang stylish. Anda dapat menerapkannya ke elemen apa pun dengan memberikan kelas "button".

Desain Responsif

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

CSS ini menggunakan queri media untuk mengatur ukuran font saat lebar layar adalah 600px atau kurang, membuat situs web Anda responsif.

Tabel Metode CSS

Berikut adalah tabel praktis yang menggabungkan metode CSS yang kita diskusikan:

Metode	Deskripsi	Keuntungan	Kerugian
CSS Inline	Diterapkan langsung ke elemen HTML	cepat untuk perubahan kecil	tidak dapat digunakan kembali, membuang HTML
CSS Internal	Didefinisikan dalam tag `<style>` di file HTML	Menggunakan halaman tunggal	tidak dapat digunakan kembali antar halaman
CSS Eksternal	Disimpan dalam file .css terpisah	dapat digunakan kembali, menjaga HTML bersih	memerlukan permintaan HTTP tambahan

Ingat, para padawan muda, menguasai CSS seperti belajar menggambar - itu memerlukan latihan, kesabaran, dan sedikit kecerahan kreativitas. Jangan takut untuk mencoba gaya-gaya berbeda dan lihat apa yang cocok terbaik untuk halaman web Anda.

Sekarang kita menutup pelajaran ini, saya teringat dari seorang murid yang pernah mengatakan kepadaku, "CSS membuat halaman web saya menjadi karya digital yang menakjubkan!" Dan itu keindahan CSS - itu memberikan Anda kekuatan untuk mengubah web menjadi kanvas Anda.

Jadi, pergilah, gayakan dengan keberanian, dan mayat halaman web Anda selalu indah!

Credits: Image by storyset