XHTML Tutorial
XHTML Tags Types
XHTML Documents
First Web Page
Page Content
List Structure
Styles
Color Styles
Span and Division
Style & Classes
Font Tags
Special Characters
Lists Style
Element Position
Text Links
Redirecting Pages
Traversing Folders
Tables
Table Borders
Table Colors
Table Groupings
Creating Framesets
Form Controls
Group Boxes
Form Submission


Free Tutorials
Internet
What is Internet
Internet Games
Learn TCP IP
HTML
Learn HTML
Learn DHTML
Learn CSS
Learn XML
Learn XHTML
Learn WML
Database
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Programming
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt
Color Styles

Previous Next


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.


Previous Next





|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |



2013 Soft Lookup Corp. Privacy Statement