Add background-color in HTML elements

h1{ background-color: yellow; }

If you want to set the background color for all H1 elements then select the H1 element using the CSS element selector. And use the CSS “background-color” property and assign your desired color as a value. If you use the CSS element selector and class selector together to give background color to the same H1 element, the background color of the class selector will be displayed because compared to the element selector, the class selector has high priority. And ID selector has high priority when you compare class with ID.

What is the background color?

Background color is the color behind the content and the default background color is transparent. For example, if you change the background color of the whole HTML body element without changing the background color of the text, the bg-color of your text will also change. You can change the background color of your HTML element using the CSS background color property. The CSS background-color property is used to specify the background color for an HTML element. Give the color you want to change as the value of the CSS background-color property. You can assign a color in 3 ways:

1. Color names like red, green, blue, etc
2. Hexadecimal
3. RGB

Color name value

background-color: silver;

You can give the color name value that we mention in daily life like red, yellow, green, etc. We only know the general color name like red, green, and yellow but we don’t know all the color names, so we have to use RGB or hexadecimal values. Because you can easily set your desired color in the background in RGB or Hex value.

Hexadecimal value

background-color:#9e9e9e;

The hexadecimal color value begins with a hash symbol, there will be six digits in hex color. The first two digits are dedicated to the red color, the next two digits are dedicated to the green color, and the last two digits are dedicated to the blue color. Use the color wheel below to find the hexadecimal value of your desired color.

RGB value

background-color: rgb(150, 150, 150);

In this value, we should first mention RGB and give 3 values ​​separated by commas in parentheses. The first value is dedicated to red color, the second value is dedicated to green color and the second value is dedicated to blue color. The minimum value we can pass is zero and the maximum value we can pass is 255 which is 0 to 255. 0 indicates the absence of that color and 255 indicates the full presence of that color. Use the color wheel below to find the RGB value of your desired color.

You can also assign the RGBA function, it is also the same as the RGB function but the last value A is dedicated for Alpha. Alpha indicates transparency and you can give only 0 and 1 as a value.0 value indicates full transparency and 1 value indicates no transparency.

To find your RGB and Hex color value:

Why do we set the bg-color for the h1 element?

All main headings on a website are in the H1 tag. So, if you add background color to the H1 element your website will be attractive.

How to add background color for all h1 elements?

CSS:

h1{
background-color: yellow;
width:fit-content;
padding: 3px;
}

HTML:

<h1 >This is Heading 1</h1>

Result:

To add background color for all H1 elements, select the “H1” element using the element selector in CSS. Then use the “background-color” property and give the desired color as a value in braces. If you add a background color to the H1 element, the color will be displayed for the entire H1 line. Because the H1 is an inline element. So, If you want to add bg-color to your content only, set the “width” property and give the value as “fit-content”. fit content means bg-color will be set to fit your content. If your background is smaller than the content then you can set the CSS padding property and give the value as 5px. See the above code for example.

Add bg-color for specific H1 elements.

CSS:

.bg-color{
background-color: lightskyblue;
width:fit-content;
padding: 5px;
}

HTML:

<h1 class="bg-color">This is Heading Number 1</h1>
<h1 >This is Heading Number 2</h1>
<h1 class="bg-color">This is Heading Number 3</h1>
<h1 >This is Heading Number 4</h1>

Result:

To add a background color to specific H1 elements, add a “class” attribute only to your specific h1 element and give the same class name to all specific h1 elements. Like the class name “bg-color” in the code above, you need to give the same class name to all the H1 elements you want to add bg-color. Then use the class selector in CSS and select your class name. Set the background color property and give it a value.

Conclusion

You should not set the dark color in the background for the H1 element. Because the color of the text is black so if you set the dark color the text will not be clear. I hope this article is useful for you.