logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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
<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!

Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Twitter Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Facebook Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to MySpace Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Del.icio.us Digg How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Yahoo My Web Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Google Bookmarks Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Stumbleupon Add How+To+Control+The+Background+Color+Using+Cascading+Style+Sheets to Reddit




RSS | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor