Arka Plan Rengi

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 25 / 76.

CSS'de, background-color özelliği bir HTML öğesinin arka plan rengini ayarlamak için kullanılır. Bu özellik, bir renk değeri belirtmenize olanak tanır.

background-color özelliğini kullanmak için temel sözdizimi şöyledir:

selector {
    background-color: color-value;
}

CSS'de renk değerlerini belirtmenin birkaç yaygın yolu şunlardır:

Adlandırılmış renkler: red, blue, green, black, white vb. gibi önceden tanımlanmış renk adları.

Onaltılık değerler: Kırmızı için #FF0000 gibi, başında bir diyez sembolü (#) bulunan altı haneli renk kodlarıdır.

RGB değerleri: Bir rengin kırmızı, yeşil ve mavi bileşenlerini rgb() fonksiyonunu kullanarak, 0 ile 255 arasında değişen değerlerle belirtir; örneğin kırmızı için rgb(255, 0, 0).

Örneğin:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

Bu örnekte, <body> öğesinin arka plan rengi lightblue olarak ayarlanmıştır, tüm <h1> başlıkları kırmızı bir arka plana (#FF0000) sahiptir, tüm <p> (paragraf) öğeleri mavi bir arka plana (rgb(0, 0, 255)) sahiptir.

Görev

Kolay

Size bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi verilmiştir. Göreviniz, bu öğeleri stillendirmek için background-color özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. background-color değerini yellow olarak ayarlayın.
<p> öğesini hedefleyen bir CSS kuralı yazın. background-color değerini #00FF00 (yeşil) olarak ayarlayın.
<div> öğesini hedefleyen bir CSS kuralı yazın. background-color değerini rgb(255, 0, 255) (macenta) olarak ayarlayın.

Kopya kağıdı

background-color özelliği, bir HTML öğesinin arka plan rengini ayarlar:

selector {
    background-color: color-value;
}

Renk değerleri şunlar kullanılarak belirtilebilir:

Adlandırılmış renkler: red, blue, green, black, white
Onaltılık (Hexadecimal) değerler: #FF0000 (kırmızı)
RGB değerleri: rgb(255, 0, 0) (kırmızı)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

Kendin dene

<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>