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
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

How to Set the Text and Foreground Color with the Cascading Style Sheets Color Property

Guest Author - Diane Cipollo

You can control the color of the text on a webpage or a section (or element) of a webpage with the Cascading Style Sheets color property. Besides controlling the text color, you can also use the CSS color property to set the color for the horizontal rule and form elements. Let's take a look at an example that uses the color property to set the text within the opening <p> and closing </p> tags to black and the color for the <form> 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">
<!--
p {color: #000000;}
form {color: red;}
-->
</style>
<p>text goes here</p>

<form >
Your email address
<input type="text" name="email" size="50">

</form>

Each CSS rule contains a selector and a declaration block. The CSS declaration block is placed between opening { and closing } curly brackets and contains one or more property-value pairs for each selector.

Selectors
p
form
The first CSS rule in our example controls the color for the text between any <p> tags on our webpage. The p in the <p> tag is the selector for this rule and tells the browser to set the text to the color black. The second rule uses the form element selector for the <form> tag to set the color of the text "Your email address" to red.

Properties
color:
The color property is the attribute that sets the color for the text and foreground color. In our example, the color property is being used to set the color for both the p and form elements. Notice that the property name is followed by a colon (:).

Values
#000000;
red;
You can use the color name, the hexadecimal color code or the RGB color code to set the color value. In our example, we used the hexadecimal color code (#000000) for the p element and the color name (red) for the form element. We could have also used the RGB color code rgb(100%,0%,0%). Notice that the color value is followed by a semicolon (;).



This site needs an editor - click to learn more!

Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to Twitter Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to Facebook Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to MySpace Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to Del.icio.us Digg How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to Yahoo My Web Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to Google Bookmarks Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property to Stumbleupon Add How+to+Set+the+Text+and+Foreground+Color+with++the+Cascading+Style+Sheets+Color+Property 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 © 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 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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor