g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

How To Control The Background Color Using Cascading Style Sheets

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
<style type="text/css">
<!--
selector {
property_1: value_1;
property_2: value_2;
property_3: value_3
}
-->
</style>

Example
<style type="text/css">
<!--
body {background-color: #ffffff}
p {background-color: red}
-->
</style>


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)




This site needs an editor - click to learn more!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Editor Wanted for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor