Warna itu penting, apalagi kalau kamu lagi ngoding tampilan web. Gak cuma soal estetika, tapi juga soal kenyamanan mata pengguna. Nah, di CSS, ngatur warna itu gampang banget kok. Yuk kita bahas bareng-bareng!
1. CSS Color Names
CSS udah nyediain banyak nama warna bawaan yang bisa langsung dipakai. Gak perlu ribet ngapalin kode hex dulu.
Contoh:
h1 {
color: red;
}
p {
background-color: lightblue;
}Beberapa contoh nama warna yang umum:
- red
- blue
- green
- yellow
- orange
- black
- white
- gray
- pink
Total ada lebih dari 140 nama warna yang bisa kamu pakai. Kalau penasaran, kamu bisa cek di situs W3Schools – CSS Color Names.
Contoh kode dengan internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Judul Merah</h1>
<p>Ini paragraf dengan background lightblue.</p>
</body>
</html>Hasilnya:
2. CSS Background Color
Mau kasih warna di belakang elemen? Gunakan properti background-color.
Contoh:
body {
background-color: #f0f0f0;
}
div {
background-color: navy;
}Tips: Pilih warna latar yang kontras sama teks biar tetap mudah dibaca.
Contoh kode program dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
}
div {
background-color: navy;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div>Ini div dengan background navy</div>
</body>
</html>Hasilnya:
3. CSS Text Color
Untuk mengatur warna teks, pakai properti color.
Contoh:
h2 {
color: #333;
}
a {
color: teal;
}Pastikan warna teks cocok dengan latarnya, supaya gak bikin mata sakit atau susah dibaca.
Contoh kode menggunakan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: #333;
}
a {
color: teal;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Subjudul</h2>
<a href="#">Ini link berwarna teal</a>
</body>
</html>Hasilnya:
4. CSS Border Color
Selain teks dan latar, kamu juga bisa ngatur warna garis pinggir alias border.
Contoh:
.box {
border: 2px solid green;
}
.alert {
border: 1px dashed red;
}Bisa juga pakai properti border-color kalau kamu mau atur warna tiap sisi:
div {
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;
}Contoh kode menggunakan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid green;
padding: 10px;
}
.alert {
border: 1px dashed red;
padding: 10px;
}
.multi-border {
border-style: solid;
border-width: 3px;
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Box dengan border hijau</div>
<div class="alert">Pesan peringatan dengan border merah dashed</div>
<div class="multi-border">Border warna-warni di tiap sisi</div>
</body>
</html>Hasilnya:
5. CSS Color Values
Selain pakai nama warna, kamu juga bisa pakai nilai warna yang lebih fleksibel:
a. Hexadecimal (#rrggbb)
p {
color: #ff5733; /* Oranye terang */
}b. RGB (rgb(red, green, blue))
p {
color: rgb(255, 99, 71); /* Tomato */
}c. RGBA (rgb + alpha (transparansi))
div {
background-color: rgba(0, 0, 0, 0.5); /* Hitam transparan */
}d. HSL (hue, saturation, lightness)
h1 {
color: hsl(120, 100%, 25%); /* Hijau tua */
}e. HSLA (versi transparan dari HSL)
section {
background-color: hsla(240, 100%, 50%, 0.3); /* Biru transparan */
}Penutup
CSS Colors itu salah satu bagian paling fun dari styling web. Kamu bisa eksplor berbagai kombinasi warna untuk bikin tampilan yang menarik dan nyaman dilihat. Coba-coba aja, jangan takut salah. Namanya juga belajar!
Kalau kamu punya pertanyaan atau mau share kombinasi warna favoritmu, tulis di kolom komentar ya!
Komentar