Belajar Koding HTML & CSS Bagian 21: Menentukan Warna Pada Tulisan, Background Dengan CSS
.png)
Untuk menentukan warna pada elemen
HTML menggunakan CSS, Anda dapat menggunakan properti color
untuk warna teks dan background-color untuk warna latar belakang. CSS
mendukung berbagai format warna seperti nama warna, kode heksadesimal (HEX),
RGB, RGBA, HSL, dan HSLA
🎨 Menentukan Warna Teks dengan color
Properti color
digunakan untuk mengatur warna teks pada elemen HTML.
Contoh:
h1 {
color: red; /*
Menggunakan nama warna */
}
p {
color: #00FF00; /*
Menggunakan kode HEX */
}
span {
color: rgb(0, 0, 255);
/* Menggunakan RGB */
}
Dalam contoh di atas, elemen <h1>
akan memiliki teks berwarna merah, <p> berwarna hijau, dan <span>
berwarna biru.
🖌️ Menentukan Warna Latar Belakang dengan
background-color
Properti background-color digunakan untuk mengatur warna latar belakang elemen
Contoh:
div {
background-color:
yellow; /* Menggunakan nama warna */
}
section {
background-color: #FF5733;
/* Menggunakan kode HEX */
}
article {
background-color: rgba(0,
255, 0, 0.5); /* Menggunakan RGBA dengan transparansi */
}
Pada contoh di atas, elemen <div>
akan memiliki latar belakang kuning, <section> dengan warna oranye kemerahan, dan <article> dengan latar belakang hijau transparan.
🌈 Format Warna yang Didukung
CSS mendukung beberapa format
penulisan warna:
- Nama
Warna: Seperti
red, blue, green.
- Kode
HEX: Seperti
#FF0000 untuk merah.
- RGB: Seperti rgb(255, 0, 0) untuk merah.
- RGBA: Seperti rgba(255, 0, 0, 0.5) untuk merah dengan
transparansi 50%.
- HSL: Seperti hsl(0, 100%, 50%) untuk merah.
- HSLA: Seperti hsla(0, 100%, 50%, 0.5) untuk merah dengan
transparansi 50%.
Anda dapat memilih format yang
paling sesuai dengan kebutuhan desain Anda.
🧪 Contoh Praktis
Berikut contoh HTML dan CSS
sederhana yang mengatur warna teks dan latar belakang:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Warna dengan CSS</title>
<style>
body {
background-color:
#f0f0f0;
}
h1 {
color: navy;
}
p {
background-color:
lightyellow;
color:
darkgreen;
padding: 10px;
}
</style>
</head>
<body>
<h1>Selamat
Datang</h1>
<p>Ini adalah
paragraf dengan warna latar belakang dan teks yang diatur menggunakan CSS.</p>
</body>
</html>
 |
| Tampilan Hasil (Output) Menentukan Warna PadaTulisan dan Background |
Dalam contoh di atas, halaman
memiliki latar belakang abu-abu muda, judul <h1> berwarna biru tua, dan paragraf <p>
dengan latar belakang kuning muda dan teks hijau tua.
💡 Tips Tambahan
- Gunakan
rgba() atau hsla() untuk menambahkan efek
transparansi pada warna.
- Kombinasikan
warna teks dan latar belakang dengan kontras yang baik untuk meningkatkan
keterbacaan.
- Manfaatkan
alat bantu seperti color picker pada browser atau editor kode untuk memilih warna
dengan lebih mudah.
0 Response to "Belajar Koding HTML & CSS Bagian 21: Menentukan Warna Pada Tulisan, Background Dengan CSS"
Post a Comment