Halo teman-teman semuanya, setelah kita memahami bagaimana cara memilih elemen dengan selector, sekarang saatnya kita belajar memberi tampilan pada elemen HTML dengan properti CSS yang paling dasar dan paling sering digunakan, yaitu color, font, dan background.
Dengan tiga properti ini, kita bisa membuat halaman web menjadi lebih hidup dan menarik secara visual.
1. Color: Mengatur Warna Teks
Properti color digunakan untuk mengubah warna teks.
p {
color: green;
}
Kita bisa menggunakan berbagai format warna, seperti:
- Nama warna:
red, blue, black
- Hex code:
#ff0000, #333333
- RGB:
rgb(255, 0, 0)
- HSL:
hsl(0, 100%, 50%)
Contoh:
h1 {
color: #3498db;
}
2. Font: Mengatur Jenis dan Ukuran Tulisan
-
Font Family
Properti font-family menentukan jenis huruf yang digunakan.
p {
font-family: Arial, sans-serif;
}
Biasakan selalu menyertakan fallback, misalnya sans-serif, jika font utama tidak tersedia di sistem pengguna.
-
Font Size
Untuk mengatur ukuran huruf, kita gunakan font-size.
h1 {
font-size: 24px;
}
Satuan umum:
px (pixel)em (relatif terhadap elemen induk)rem (relatif terhadap root)% (persentase)
-
Font Weight
Untuk mengatur ketebalan tulisan.
strong {
font-weight: bold;
}
3. Background: Memberi Warna atau Gambar Latar
-
Background Color
Digunakan untuk memberi warna latar belakang.
div {
background-color: #f1f1f1;
}
-
Background Image
Kita juga bisa menambahkan gambar sebagai latar.
body {
background-image: url('gambar.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Contoh Lengkap
Berikut adalah contoh HTML dan CSS yang menggunakan properti dasar seperti color, font-family, font-size, dan background-color. Tujuannya agar tampilan halaman terlihat lebih rapi dan menarik secara visual.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Properti Dasar CSS</title>
<style>
body {
background-color: #f9f9f9; /* Memberi warna latar belakang halaman */
font-family: 'Segoe UI', sans-serif; /* Mengatur jenis huruf */
color: #333; /* Warna teks umum */
}
h1 {
color: #2c3e50; /* Warna judul */
font-size: 28px; /* Ukuran judul */
}
p {
font-size: 16px;
font-weight: normal;
}
.highlight {
color: white;
background-color: #e74c3c; /* Warna latar untuk teks khusus */
font-weight: bold;
}
</style>
</head>
<body>
<h1>Selamat Datang di Santri Koding</h1>
<p>Ini adalah paragraf biasa dengan font yang nyaman dibaca.</p>
<p class="highlight">Paragraf ini menggunakan background dan teks khusus.</p>
</body>
</html>
Kesimpulan
Pada materi ini, kita telah mengenal tiga properti dasar dalam CSS, yaitu color untuk warna teks, font untuk pengaturan tulisan, dan background untuk memberi latar belakang.
Di artikel berikutnya, kita akan belajar tentang Box Model, konsep penting yang menjadi dasar layout dan struktur elemen dalam halaman web.
Terima Kasih