Web based School

Color Styles

Colors can be applied to various page elements with the color and background-color properties. Color values can be given by a color name, a hexadecimal value representing the combination of red, green, and blue hues to be applied, or by an RGB (red, green, blue) decimal value. For example, color specifications can take the following forms:

color:red
color:#FF0000
color:rgb(255,0,0)

These color assignments are discussed more fully in a later tutorial. For now you can use common system color names to bring color styling to your pages. There are 16 basic color names recognized as standard Windows colors and shown below. These colors can be applied to page elements with the style settings color:name or background-color:name coded in the style sheet associated with the element.

Property	:	Values
color		aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
background-color

Text and Background Colors

Text colors are applied by assigning a color value in the style sheet associated with the container tag enclosing the text. For instance, a heading can be displayed in blue by assigning this color name in an in-line style sheet for the <hn> tag.

<h1 style="color:blue">A Blue Heading</h1>

If an entire paragraph is to have a particular text color, then that color name can be applied with a style sheet associated with its p tag.

<p style="color:red">...red paragraph text...</p>

In certain cases you may wish to display all text on a page in a particular color. This is easily done by assigning the color property to the <body> tag. The following code displays all text on a page in green by using an embedded style sheet associated with the body selector rather than coding color settings separately for individual text container tags.

<style>
  body {color:green}
</style>

Any text container can also be given a background color by applying the background-color property. Just make sure that the color chosen is complementary to the text color and does not make it difficult to read the text. In the following style sheet, yellow is used as the page background color behind its green text.

<style>
  body {color:green; background-color:yellow}
</style>

Rule Colors

The same color styling can be applied to horizontal rules. In the following example, rules are displayed with various style properties to produce different colors, sizes, and page positionings. At the same time, the foreground (text) color of the page is blue and the background color is yellow.

<body style="color:blue; background-color:yellow">

<p>A blue horizontal rule 10 pixels in height, 300 pixels in width, and 
aligned at the right margin:</p>

  <hr style="color:blue; height:10px; width:300px; text-align:right"/>

<p>A red horizontal rule 2 pixels in height, 75% of the page width, and 
centered:</p>

  <hr style="color:red; height:2px; width:75%; text-align:center"/>

<p>A green horizontal rule 10 pixels in height; 25% of the page width, and 
aligned at the left margin:</p>

  <hr style="color:green; height:10px; width:25%; text-align:left"/>

</body>

In this example, all rule styling is applied with in-line style sheets. The individual rules have different settings for which an embedded style sheet with a single hr selector is not appropriate. Body styling also uses an in-line style sheet, although in this case an embedded style sheet with a body selector could have been used to apply foreground and background colors.

Colors can be applied to many different page elements besides text and rules. Also, many different color combination can be used to produce a full spectrum of colors. Extended discussion of color values and styling is saved for a later tutorial. Use of the basic color names can get you started in introducing color variety to your pages.