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

Example

<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 (;).

	Editor Wanted BellaOnline's HTML Editor