The value for the color property can be specified by one of four different methods, by color name, by using the rgb macro, or by using hexadecimal notation. Colors are created on a computer by mixing varying amounts of the basic colors red, green, and blue, referred to as "rgb" colors. You can specify the amount of each basic color.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

[About BTH]  [User Agreement]  [Privacy Policy]  [Site Map]  [Contact Form]  [Advertise on BTH]  [News Feed]

Google
Web
This Site

Specifying Color

The value for the color property can be specified by one of four different methods, by color name, by using the rgb macro, or by using hexadecimal notation.

Color Name

You can specify the color name as shown below.

h1 {color: red;}

The problem with this method is, unless you're using a basic color, it's difficult to remember the color names defined in the CSS specification.

rgb Macro

Colors are created on a computer by mixing varying amounts of the basic colors red, green, and blue, referred to as "rgb" colors. You can specify the amount of each basic color by percentage. The example below defines the color red by specifying 100% for the red component, and 0% for the green and blue components.

h1 {color: rgb(100%,0%,0%);}

The computer has to convert these percentages to 16 bit binary values. The highest 16 bit binary value is 255; therefore, 50% would be converted to 127. Your webpage will load slightly faster if you enter color values from 0 to 255 rather than as percentages, as shown blow.

h1 {color: rgb(255,0,0);}

Hexadecimal Notation

The computer still has to convert these decimal values to binary numbers. Binary numbers can be represented in hexadecimal notation. Whereas a decimal digit can be one of ten different values from 0 to 9, a hexadecimal digit can be one of 16 different values from 0 to f (after 9 - a, b, c, d, e and f are used).

The example below shows how a pound sign (#) is used to indicate that the color is being specified in hexadecimal notation.

h1 {color: #ff0000;}

Once the color value is specified, it can be used to set the color of an element on a webpage. The example below sets the color property to green for both the text in the paragraph, and the border around the paragraph.

<p style="color: green; border: solid;">
We the people of the United States, in order to form
a more perfect union, establish justice, insure
domestic tranquility, provide for the common defense,
promote the general welfare, and secure the blessings
of liberty to ourselves and our posterity, do ordain
and establish this Constitution for the United States
of America.</p>

Earn $1 to $5 to complete survey

Web Design Sections
CSS Quick Reference
Use Inline Style
Use an Embedded Style Sheet
Use an External Style Sheet
CSS Units of Measurement
Specifying Color
Set the Text Color
Set the Text Alignment
Set the Letter Spacing
Set the Word Spacing
Set the Line Spacing
Highlight Text
Indent the First Line of Text
Set the Text Decoration
Set Text Justification
Set the Font Family
Set the Font Style
Set the Font Boldness
Set the Font Size
Set the Font Variant
Style the First Letter
Style the First Line
Set the Background Color
Set a Background Image
Set a Background Image's Position
Set a Fixed Background Image
Set the Background Properties
Set the Border Properties
Set the Border Style
Set the Border Width
Set the Border Color
Set an Element's Margin
Set an Element's Padding
Set an Element's Clipping
Set an Element's Overflow
Set an Element's Position
Set an Element's Float
Color the Scrollbar
Set an Element's Overlap
Set an Element's Visibility
Vertical Align an Element
Define CSS Rollover Effects
Web Designer's Reference
[Site User Agreement]  [Advertise on This site]  [Search This Site]  [Contact Form]
Copyright©2001-2007 Bucaro TecHelp P.O.Box 18952 Fountain Hills, AZ 85269