CSS Background Color

In this chapter you will learn:
What is background-color?
When we use this property?

CSS background-color property is used to change the background color of the element. This property is used by many tags or element such as body, h1, p, table,text-box, text-area, div etc.

When we use this property?:-

As we know that CSS is used to provide extra features in HTML tags to get the best look and feel of web pages so when you feel that the layer of the element or tag needs to be colored then you can use this property. Sometimes when we design the web page we need to give a background color of the web page so in that condition this property is used to accomplish this task.

Example 1.  Change the backgrond color of body- 
<html>
<head>
   <style type="text/css">
    body
    {
      background-color:cyan;
      font-size:20px;
      font-style:italic;
      font-family:Arial;
    }
    </style>
</head>
<body>
  This tutorial is very user friendly and easy to learn CSS.
   </body>
</html>

Note:-

Write the given command in notepad or dream viewer or other editor and run it. You will get that the background color of the web page is cyan. See the demo-

Output:-
output of background-color of body
Example 2.  Change the backgrond color of paragraph 
<html>
<head>
    <style type="text/css">
    p
    {
      background-color:cyan;
      font-size:20px;
      font-style:italic;
      font-family:Arial;
    }
    </style>
</head>
<body>
   <p>
   This tutorial is very user friendly and easy to learn CSS.
   </p>
</body>
</html>

Guide:-
i) Write the given command in notepad, dream viewer or any other editor which support css, html.
ii) Save with extension .htm or .html
iii) Go to the location and double click on the file you have saved
iv) You will get that web page opened and the background color of paragraph is cyan.

Output
background color of paragraph

Summary

In this chapter, you have learned that what is background-color and where to use it. You have also got some examples of this property so now try it yourself and click on next button to continue-

 

Share your thought