How to Set the Text and Foreground Color with the Cascading Style Sheets Color Property
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
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
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
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!
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.
