Anda dapat menerapkan warna ke latar depan dan latar belakang teks dan objek menggunakan properti warna dan warna latar (atau dengan menyediakan satu argumen ke properti latar belakang). Warna yang ditentukan dapat berupa salah satu warna bernama (seperti merah atau biru), warna yang dibuat dari triplet RGB heksadesimal (seperti #ff0000 atau #0000ff), atau warna yang dibuat menggunakan fungsi CSS rgb. 16 nama warna standar seperti yang didefinisikan oleh organisasi standar W3C adalah: aqua, hitam, biru, fuchsia, abu- abu, hijau, kapur, merah marun, biru tua, zaitun, ungu, merah, perak, teal, putih, dan kuning.
Aturan berikut menggunakan salah satu dari nama ini untuk mengatur warna latar belakang untuk objek dengan ID objek:
#object { background-color:silver; }
Dalam aturan ini, warna latar depan teks di semua elemen <div> diatur ke kuning (karena pada tampilan komputer, tingkat heksadesimal ff merah, ditambah ff hijau, ditambah 00 biru menghasilkan warna kuning):
div { color:#ffff00; }
Atau, jika kita tidak ingin bekerja dalam heksadesimal, kita dapat menentukan triplet warna kita menggunakan fungsi rgb, seperti dalam aturan berikut, yang mengubah warna latar belakang dokumen saat ini menjadi aqua:
body { background-color:rgb(0, 255, 255); }
Catatan: Jika kita memilih untuk tidak bekerja dalam rentang 256 level per warna, kita dapat menggunakan persentase dalam fungsi rgb sebagai gantinya, dengan nilai dari 0 hingga 100 mulai dari terendah (0) hingga tertinggi (100) jumlah primer warna, seperti ini: rgb (58%, 95%, 74%). kita juga dapat menggunakan nilai floating point untuk kontrol warna yang lebih halus, seperti ini: rgb(23,4%, 67,6%, 15,5%).
String Warna Pendek
Ada juga bentuk pendek dari string digit hex di mana hanya yang pertama dari setiap pasangan 2-byte yang digunakan untuk setiap warna. Misalnya, alih-alih menetapkan warna
#fe4692, kita malah menggunakan #f49, menghilangkan digit heksagonal kedua dari setiap pasangan, yang setara dengan nilai warna #ff4499. Ini menghasilkan warna yang hampir sama dan berguna di mana warna yang tepat tidak diperlukan. Perbedaan antara string enam digit dan tiga digit adalah bahwa yang pertama mendukung 16 juta warna berbeda, sedangkan yang kedua mendukung empat ribu. Di mana pun kita ingin menggunakan warna seperti #883366, ini adalah padanan langsung dari #836 (karena digit berulang tersirat oleh versi yang lebih pendek), dan kita dapat menggunakan salah satu string untuk membuat warna yang sama persis.
Menambahkan gambar background
Gambar background adalah cara yang baik untuk membuat halaman HTML agar terlihat bagus. Dalam penggunaan gambar background, kita dapat membuat efek gradien, di mana satu bagian halaman berwarna solid dan warnanya memudar atau menjadi lebih terang saat membentang ke sisi lain. Gambar background muncul di belakang elemen lainnya. Ini berarti kita dapat melapisi semua HTML Anda, termasuk gambar lain, di atas gambar latar belakang. kita dapat menemukan banyak gambar gratis melalui Creative Commons. Lihat http://search.creativecommons.org untuk informasi lebih lanjut. Pastikan untuk memilih gambar yang masih memungkinkan teks dapat dibaca di halaman; teks hitam pada gambar gelap tidak cocok. Gambar latar belakang ditambahkan dengan properti CSS gambar latar, seperti yang dijelaskan di sini dan di bagian berikut.
background-image:url(“myImage.jpg”);
Gradien
Di tempat menggunakan warna latar belakang yang solid, kita dapat memilih untuk menerapkan gradien, yang kemudian akan secara otomatis mengalir dari warna awal ya ng diberikan ke warna akhir pilihan Anda. Paling baik digunakan bersama dengan aturan warna sederhana sehingga browser yang tidak mendukung gradien setidaknya akan menampilkan warna solid. Contoh 5 menggunakan aturan untuk menampilkan gradien oranye (atau hanya oranye polos pada browser yang tidak mendukung) seperti yang ditunjukkan di bagian tengah Gambar 2.25.
Contoh 5. Membuat gradien linier
<!DOCTYPE html>
<html>
<head>
<title>Creating a linear gradient</title>
<style>
.orangegrad { background:orange;
background:linear-gradient(top, #fb0, #f50);
background:-moz-linear-gradient(top, #fb0, #f50);
background:-webkit-linear-gradient(top, #fb0, #f50);
background:-o-linear-gradient(top, #fb0, #f50);
background:-ms-linear-gradient(top, #fb0, #f50); }
</style>
</head>
<body>
<div class='orangegrad'>Black text<br>
on an orange<br>linear gradient</div>
</body>
</html>
Catatan: Seperti yang ditunjukkan pada contoh sebelumnya, banyak aturan CSS memerlukan awalan khusus browser seperti -moz-, -webkit-, -o-, dan -ms- (untuk browser berbasis Mozilla seperti Firefox; browser berbasis WebKit seperti seperti Apple Safari, Google Chrome, dan browser iOS dan Android; dan browser Opera dan Microsoft). http://caniuse.com mencantumkan aturan dan atribut CSS utama, dan apakah versi khusus browser diperlukan.
Gambar 2.25 Warna latar belakang yang solid, gradien linier, dan gradien radial Untuk membuat gradien, pilih di mana itu akan dimulai dari atas, bawah, kiri, kanan, dan tengah (atau kombinasi apa pun, seperti kiri atas atau kanan tengah), masukkan warna awal dan akhir yang kita butuhkan, lalu terapkan salah satu gradien linier atau aturan gradien
radial, pastikan kita juga menyediakan aturan untuk semua browser yang kita targetkan. kita juga dapat menggunakan lebih dari sekadar warna awal dan akhir dengan juga menyediakan apa yang disebut warna berhenti di antaranya sebagai argumen tambahan. Dalam kasus ini, misalnya, jika lima argumen diberikan, setiap argumen akan mengontrol perubahan warna pada seperlima area yang diwakili oleh lokasinya dalam daftar argumen.