Warna Latar Belakang

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 25 dari 76.

Dalam CSS, property background-color digunakan untuk mengatur warna latar belakang elemen HTML. Property ini memungkinkan kamu menentukan nilai warna.

Berikut sintaks dasar untuk menggunakan property background-color:

selector {
    background-color: color-value;
}

Berikut beberapa cara umum untuk menentukan nilai warna di CSS:

Warna bernama: Nama warna yang telah ditentukan, seperti red, blue, green, black, white, dan sebagainya.

Nilai heksadesimal: Kode warna enam digit yang diawali simbol pagar (#), seperti #FF0000 untuk warna merah.

Nilai RGB: Menentukan komponen merah, hijau, dan biru dari warna menggunakan fungsi rgb(), dengan nilai berkisar dari 0 hingga 255, seperti rgb(255, 0, 0) untuk warna merah.

Contohnya:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

Dalam contoh ini, warna latar belakang elemen <body> diatur menjadi lightblue, semua judul <h1> memiliki latar belakang merah (#FF0000), dan semua elemen <p> (paragraf) memiliki latar belakang biru (rgb(0, 0, 255)).

Tantangan

Mudah

Kamu diberi dokumen HTML dengan heading (<h1>), paragraf (<p>), dan elemen div (<div>). Tugasmu adalah menggunakan property background-color untuk memberi gaya pada elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur background-color menjadi yellow.
Tulis aturan CSS yang menargetkan elemen <p>. Atur background-color menjadi #00FF00 (hijau).
Tulis aturan CSS yang menargetkan elemen <div>. Atur background-color menjadi rgb(255, 0, 255) (magenta).

Coba sendiri

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>