CSS Pseudo-classes/elements

The table below provides a list of the color names that are supported by all major browsers.

Click on a color name (or a hex value) to view the color as the background-color along with different text colors:

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

The table below provides a list of the color values that are supported by all major browsers.

Click on a hex value (or a color name) to view the color as the background-color along with different text colors:

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

Color Values

CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).

Hex values are written as 3 double digit numbers, starting with a # sign.

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).

Most modern monitors are capable of displaying at least 16384 different colors.

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.

To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb values below.

Shades of Gray

Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you:

Cross-Browser Color Names

A collection of nearly 150 color names are supported by all major browsers.

Web Standard Color Names

The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want to use other colors, you should specify their HEX value.

Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.

This is not important now, since most computers can display millions of different colors, but the choice is left to you.

The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:

Color Values

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

Below are some commonly used font combinations, organized by generic family.

Serif Fonts

Sans-Serif Fonts

Monospace Fonts

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:

• by blind people
• to help users learning to read
• to help users who have reading problems
• for home entertainment
• in the car
• by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

CSS Aural Reference

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

The links in the "Property" column point to syntax, examples, browser support, etc.

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Background Properties

Border and Outline Properties

Dimension Properties

Font Properties

Generated Content Properties

List Properties

Margin Properties

Padding Properties

Positioning Properties

Print Properties

Table Properties

Text Properties

CSS Pseudo-classes/elements

This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.

You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.

You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.

For more information on CSS, please take a look at our CSS reference.

Now You Know CSS, What’s Next?

The next step is to learn XHTML and JavaScript.

XHTML

XHTML reformulates HTML 4.01 in XML.

If you want to learn more about XHTML, please visit our XHTML tutorial.

JavaScript

JavaScript can make your web site more dynamic.

A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all major browsers.

If you want to learn more about JavaScript, please visit our JavaScript tutorial.

Internet Explorer Behaviors

What is it? Internet Explorer 5 introduced behaviors. Behaviors are a way to add behaviors to HTML elements with the use of CSS styles.

Why avoid it? The behavior attribute is only supported by Internet Explorer.

What to use instead? Use JavaScript and the HTML DOM instead.

Example 1 – Mouseover Highlight

The following HTML file has a <style> element that defines a behavior for the <h1> element:

The XML document "behave.htc" is shown below:

Example 2 – Typewriter Simulation

The following HTML file has a <style> element that defines a behavior for elements with an id of "typing":

The XML document "typing.htc" is shown below: