CSS background-color
property defines the background color of an element.
We mostly specify a color by using a:
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>
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>
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