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
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
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
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!
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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
BellaOnline Administration
for details.
