Designating Colors Using CSS

In HTML, every time we wanted to change a font color we needed to go through the font color tag specification and then remember to use the close tag. In CSS, we can use style sheets to change colors back and forth, defining special colors easily for different level headings and other elements. We can also affect the colors of elements we'd previously had no control over the appearance of, like hr rules.

The color attribute can be applied to any font containing element, including divs, tables, paragraphs, and headings. It can also be used on certain line elements like the hr element, although not all browsers support this effect at present.

Let's take a look at some CSS color style settings.

h1	{color:red;}
h2	{color:#903bc0;}
h3	{color: rgb(10%,0%,80%);}
h4	{color: #F0F;}
hr	{color: rgb(195,119,121);}

The above utilizes several different methods for rendering colors using CSS. The first method is the easiest to understand.

As with HTML, in CSS only a few colors may be called by name. These are: red, orange, yellow, green, blue, aqua, black, fuschia, gray, lime, maroon, navy, olive, purple, silver, teal, and white. Browsers may correctly read several more color words than this, but cannot be counted on to consistantly do so as other colors are not a part of the official standard.

Our second color specification renders the color of h2 tags by calling forth a hexadecimal color code. Written in a number in Base16, Hex (as they are called for short) color codes use numbers and letters to signify hundreds of colors.

Note that including the # hashmark is essential when using Hex color codes. Unless you do a lot of coding, it's easier to reference a Hex color sheet Like This One than to try and learn all of the Hex codes.

The third specification uses an array of percentages that specify the amounts of the colors red, green, and blue in the color represented.

Computer monitors compute colors in the RGB fashion, but you yourself would probably do better to reference a source Such as This for your RGB percentages, rather than try to learn them.

Next we have what is called a short Hex specification. These only work for Hex colors that have a double integer at the beginning, middle, and end of their Hex code (ie. Hex #00ff00 can be shorthanded #0f0, Hex #ffffff can be shorthanded #fff, Hex #800000 cannot be shortened).

Again, it is easier to look at a reference of short Hex codes such as this than to try to learn them.

Finally, we return to RBG, that is the red, green, blue called colors. Here, however, we have an array of not percentages, but numeric values for each of the colors. If you're confused, but want to use the RBG array, you may consult This Reference of RBG value numbers. Notice that we've applied this final style to our hr elements. Let's take a look at the outcome of our style.

If your browser supports color specifications for hr elements, you will see a lime green (that is the color called by the aforementioned RGB array, horizontal line across your screen. If your browser does not support the color specification, your horizontal line will appear black. Remember, when applying color specifications to elements such as these that not all visitors will be able to enjoy your effects.

You should now be able to specify colors using CSS by calling named colors, Hex codes, RGB percentages and arrays, and short Hex codes. You should also have a handful of resources to call upon to determine RGB and Hex values for various colors.