Specifying Color
By Stephen Bucaro
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>
To set a different color for the text and the border, you could place the paragraph
inside a div and set a different color property for the paragraph and div, as shown below.
<div style="color: blue; border: solid;">
<p style="color: green;">
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></div>
The "background-color" property specifies the background color of an element on a webpage.
The example below sets the background-color property for the paragraph to yellow.
<p style="background-color: yellow;">
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>
More CSS Quick Reference:
• Set the Background Properties
• CSS background-origin Positions Background
• Set List Properties
• Specifying Color
• Set the Text Case
• Set the Text Alignment
• Set an Element's Display Property
• Indent the First Line of Text
• Set the Type of Bullet Used in List
• Highlight Text
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
