How To Control The Background Color Using Cascading Style Sheets

Guest Author - Diane Cipollo

You can use Cascading Style Sheets to control the color of the background for the entire webpage and for just an individual element on the webpage. Let's take a look at an example which will set the background color for the webpage to white and the background color for the paragraph (individual element) to red.

Basic CSS Code

Example

Selectors

body
p

There are two CSS rules in our example. The body in the HTML <body> tag is the selector that tells the browser to apply the style of the first rule to the background for the entire webpage. The p in the HTML <p> tag tells the browser to apply the second rule to the paragraph (element) on the webpage.

Properties

background-color

The background-color is the attribute that is being controlled by the style. In our example, the background-color attribute is being set for both the webpage and the paragraph. The property name, background-color, is followed by a colon (:).

Values

#ffffff
red

On the right side of the colon is the value for the background-color. In our example, the hexadecimal code for the color white (#ffffff) is used in the first rule and the color name for red (red) is being used for the second rule. You can also use the RGB color code or you can set the value to transparent, if you want the background-color to be transparent.

background-color: transparent
background-color: rgb(255,0,0)