Crus4

logo

CSS background-color


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>

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

CSS Selectors

Introduction to CSS

CSS Background Color