HTML - Style Sheet: Panduan untuk Pemula

Selamat datang, para pengembang web masa depan! Hari ini, kita akan mendalam ke 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!

HTML - Style Sheet

Apa Itu Style Sheet?

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

Contoh CSS dalam Dokumen HTML

mari 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 di Halaman Web Stylish Saya!</h1>
<pIni adalah paragraf dengan styling default.</p>
</body>
</html>

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

Kita mengatur warna latar belakang 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 sudah 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 adalah seperti menambahkan topi mewah langsung ke pakaian Anda. Ini 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 adalah seperti memiliki stylist pribadi untuk halaman web tunggal. Ini ditetapkan dalam tag <style> di bagian <head> file HTML, seperti yang kita lihat dalam contoh pertama.

3. CSS Eksternal

CSS Eksternal adalah seperti memiliki panduan mode universal untuk semua halaman web Anda. Ini 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 di Halaman Web Stylish Saya!</h1>
<p>Halaman ini diberi 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 jelajahi beberapa contoh lain 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 berwarna hijau yang stylish. Anda dapat menerapkan ini 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 website 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, memblok HTML
CSS Internal	Ditetapkan di tag `<style>` di file HTML	Diterapkan ke halaman tunggal	tidak dapat digunakan kembali antar halaman
CSS Eksternal	Disimpan di file .css terpisah	dapat digunakan kembali, menjaga HTML bersih	memerlukan permintaan HTTP tambahan

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

Sekarang, saat kita mengakhiri pelajaran ini, saya ingat kata-kata seorang murid yang pernah mengatakan ke saya, "CSS membuat halaman web membosanku menjadi karya seni digital!" Dan itu keindahan CSS - itu memberikan Anda kekuatan untuk mengubah web menjadi kanvas Anda.

Jadi, pergilah, gayakan dengan keberanian, dan may your webpages always be fabulous!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Blok

Tutorial Selanjutnya:

HTML - Pemformatan