CSS background-color
CSS background-color property defines the background color of an element.
We mostly specify a color by using a:
- Valid color name – like “green”
- Hex value – like “#00ff00”
- an RGB Value – like “rgb(0, 255, 0)”
In an example below let’s set the background color of a whole page.
Example
body {
background-color:grey;
}Now let’s put the above lines of code in our html page to actually see the effect.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:grey;
}
</style>
</head>
<body>
<h1>Hello Developers!</h1>
<h3>This page has a grey background color.</h3>
</body>
</html>
Other Elements
We can also set the background color for any HTML Element we like.
Example
h1 {
background-color: powderblue;
}
h3 {
background-color: lightgrey;
}
p {
background-color: lightblue;
}In an above example we have set different background colors for <h1>, <h3> and <p> elements.
Now let’s put these lines of code in our html page to actually see the effect.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: powderblue;
}
h3 {
background-color: lightgrey;
}
p {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello Developers!</h1>
<h3>Let's write some css code</h3>
<p>This text has lightblue background color, and the above two headings have also different background colors.</p>
</body>
</html>
Opacity/ Transparency
The property “opacity” specifies the transparency of an element. It ranges from 0.0-1.0. The more the value the low the transparent:
Opacity 1
Opacity 0.7
Opacity 0.4
In an example below let’s see how we can add the opacity of a color in our code.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
background-color:green;
opacity:1;
text-align:center;
}
h5 {
background-color:green;
opacity:0.7;
text-align:center;
}
p {
background-color:green;
opacity:0.4;
text-align:center;
}
</style>
</head>
<body>
<h2>Opacity 1 (default)</h2>
<h5>Opacity 0.7</h5>
<p>Opacity 0.4</p>
</body>
</html>
Related Posts
