Monday, February 12, 2007

Linda's How-Do-I Series? What Are The Names And #'s For The Sixteen CSS Named Colors?

If you have one of the simple, easy to format and set-up websites like a mini-shoppe, DIY type shop, or even participate in an on-line craft show and have a booth you sometimes have the need to quickly use color.

And, you don't have time to look-up the 6-digit RGB Hexadecimal color. So, what do you do?

Well, for quick color what you can use is the 16 "named colors" for the standard CSS (i.e. Cascading Style Sheets). They are shown below by their assigned "name" and corresponding 6-digit RGB Hexadecimal #:


black -- #000000
gray -- #808080
maroon -- #800000
purple -- #800080
green -- #000800
olive -- #808000
navy -- #000080
teal -- #008080
silver -- #C0C0C0
white(not colored due to the white page) -- #FFFFFF
red -- #FF0000
fuchsia -- #FF00FF
lime -- #00FF00
yellow -- #FFFF00
blue -- #0000FF
aqua -- #00FFFF


To use the quick color all you need to do is the use its' respective "name." You don't need to use the 6-digit RGB hexadecimal number. You can if you want, but you don't need to.

For example if I wanted to color the font for my Linda Walsh Originals name in the title of my website I would use the following code (minus the ***'s which are there so you can view the HTML in this article):

<***span style=***"color:teal;">LINDA WALSH ORIGINALS<***/span>

That (minus the 3 ***'s in each section) produces this:

LINDA WALSH ORIGINALS

And, if I wanted add bold to it I would use the following code:

<***strong><***span style=***"color:teal;">LINDA WALSH ORIGINALS<***/span><***/strong>

That (minus the 3 ***'s in each section) produces this:

LINDA WALSH ORIGINALS

And, if I wanted to enlarge it I would use the following code:

<***strong><***span style=***"font-size:175%;color:teal;">LINDA WALSH ORIGINALS<***/span><***/strong>

That (minus the 3 ***'s in each section) produces this:

LINDA WALSH ORIGINALS

And, if I wanted to center it I would use the following code:

<***center><***strong><***span style=***"font-size:175%;color:teal;">LINDA WALSH ORIGINALS<***/span><***/strong><***/center>

That (minus the 3 ***'s in each section) produces this:

LINDA WALSH ORIGINALS


If I wanted to change the color to blue on the last one I would just change the "teal" to "blue" and it would produce this:

<***center><***strong><***span style=***"font-size:175%;color:blue;">LINDA WALSH ORIGINALS<***/span><***/strong><***/center>

That (minus the 3 ***'s in each section) produces this:

LINDA WALSH ORIGINALS


I could have just as easily used the 6-digit RGB hexadecimal number of blue and it would produce the same results:

<***center><***strong><***span style=***"font-size:175%;color:#0000ff;">LINDA WALSH ORIGINALS<***/span><***/strong><***/center>

That (minus the 3 ***'s in each section) produces this:

LINDA WALSH ORIGINALS


Sometimes there is a need for quick color and, if so, the 16 "named CSS colors" do come in handy. For a list of all the CSS Color Names and their respective RGB Hexadecimal code please visit http://www.w3schools.com/css/css_colornames.asp


Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment