CSS Value Types

Before we go anywhere with the properties of CSS, you have to understand the main value types of CSS. Some of the more common ones are:

Keywords are special words that are specific to each property, though there is some overlap. I'll explain those keywords when we get to each property. The rest require a bit more explanation.

Colours

I introduced sixteen colours in Attributes, but those are hardly the only colours possible—not even the named colours. Actually, there are a total of 16,777,216 (Yes, nearly 17 million) possible colours. There are three types of colour codes: hexadecimal, RGB (short for Red-Green-Blue), and HSL (Short for Hue-Lightness-Saturation).

The named colours

Currently, there are 138 colours that have names. Only 17 are considered valid CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Some of these have alternate names as well: aqua/cyan, fuchsia/magenta, and color names that use grey/gray. For the sake of space, I'll omit the grey alternate spellings.

Below is a complete list of all these named colors; these names are not case-sensitive. The backgrounds are the colors in question.

Named CSS Colours lists all these colours along with their relevant hexadecimal, RGB, and HSL codes.

Red, Green, And Blue: The Primary Colours of Light

Hexadecimal and RGB notation work essentially the same way. RGB notation was introduced all the way back in CSS 1; Hexadecimal way back in HTML 3.2, where it was used with the font element. The first thing you have to understand is that there are 3 primary colours of light: Red, Green, and Blue. Don't confuse them with Red, Yellow, and Blue, which are the primary colours of pigment (which absorb light, rather than emit it). Mixing the primaries yields the following colours:

Red + Green
Yellow
Red + Blue
Fuchsia A.K.A. Magenta
Green + Blue
Aqua A.K.A. Cyan
All Three
White
None of the above
Black

So where do all the other colours come from? Well, each of Red, Green, and Blue can be set at any one of 256 levels of brightness. 256 might look like a weird number, but recall that computers work with binary, also known as Base 2, a numbering system that is based on the digits 0 and 1 and thus lends itself very nicely to the kind of logic modern computers run on. 256 is 2 to the power of 8 (28), which a computer can easily convert into binary. Since we start counting at 0 (all colours set to 0 gives you Black), the maximum value for each is 255 (all colours set to 255 gives you white). And, as I said earlier, this gives you 16,777,216 colours—plenty for our eyes.

Hexadecimal Notation

To reïterate what I said back in Special Characters, hexadecimal (also known as Base 16) uses the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F—16 digits in all. Therefore, 255 (the maximum value for a primary colour) is FF.

Hexadecimal codes consist of 6 hexadecimal digits (yes, that means 0 is written 00 in hexadecimal), and are preceded by a hash mark (#, also known as a number sign). The first two digits control red, the second two control green, and the third two control blue.

Using this notation, the colours listed above are:

Colours and Hex Codes
Black Red Yellow Lime* Aqua Blue Fuchsia White
#000000 #FF0000 #FFFF00 #00FF00 #00FFFF #0000FF #FF00FF #FFFFFF

* Lime is a really bright green. The actual code for Green is #008000, which is about half as bright as Lime.

Now, if you wanted Orange instead of Yellow, you would lower the value of Green, darkening the colour and letting Red be more dominant: #FFA500.

Feel free to play around with this and find colours that you like.

Compact Hexadecimal

For a small fraction of hexadecimal codes (4,096 in all, which is 1/4,096 of all colors possible), there is a way to express them using only 3 digits instead of 6. The requirement for such codes is simple and strict: each pair must have twin digits. This means both digits for Red must be identical, both digits for Green must be identical, and both digits for Blue must be identical. If that is the case, then each pair may be expressed as a single digit (of the same value).

For example, if Red is FF, in a compact hexadecimal code it would be expressed as F. Below is the same table above, but with compact codes, since each colour in it qualifies for this.

Colours and Hex Codes
BlackRed YellowLimeAquaBlueFuchsiaWhite
#000 #F00#FF0 #0F0 #0FF#00F#F0F #FFF

However, the code for Orange cannot be expressed this way because, while the Red digits are both F and the Blue digits are both 0, the digits for Green are A and 5, which aren't the same. So in that case, you have to write out the whole code (#FFA500). If, however, you used the colour code #FFAA00 (which is a brighter, yellower orange) or #FF5500 (which is a darker, redder orange), then you could write it using only three hexadecimal digits: #FA0 or #F50, respectively.

RGB Notation

RGB notation uses Base 10, which we use every day. Therefore, the values of Red, Green, and Blue are expressed as any number from 0 to 255. However, instead of being preceded by a hash mark, this notation requires something a little more complicated:

RBG Syntax
rgb(red value, green value, blue value)

To illustrate this, let's go back to our table of colours from the Hexadecimal system, but replace the codes.

RGB Notation
Black Red Yellow Lime Aqua Blue Fuchsia White
rgb(0, 0, 0) rgb(255, 0, 0) rgb(255, 255, 0) rgb(0, 255, 0) rgb(0, 255, 255) rgb(0, 0, 255) rgb(255, 0, 255) rgb(255, 255, 255)

Using this notation, the code for Green would be rgb(0, 128, 0) (remember, about half the value of Lime), the code for Orange would be rgb(255, 165, 0) and the codes for #FA0 and #F50 would be rgb(255, 170, 0) and rgb(255, 85, 0), respectively.

As far as I know, there is no compact way of writing RGB notation.

The main advantage of this notation is that a lot of graphics programs (such as MS Paint, Adobe Photoshop, and GIMP) display colours in terms of red, green, and blue, which can be easily copied into this format.

HSL Notation

CSS 3 introduced Hue-Saturation-Lightness (HSL for short) notation which works completely differently from RGB and Hex notation. Hue is what chooses the actual base colour but is a bit complex to explain, so let's start with saturation and lightness.

Saturation
Saturation deals with how vivid a colour is. 100% gives you the colour full-force, 0% gives you shades of grey; hue is meaningless.
Lightness
Lightness deals with how light a colour is. 50% gives you normal, while 100% results in white and 0% in black; both saturation and hue are irrelevant.

Hue is what chooses the actual colour, and it does so according to something called The Colour Wheel. Assuming 100% saturation and 50% lightness, below are the list of hues (going by values of 30°):

hsl(0, 100%, 50%);
red
hsl(30, 100%, 50%);
orange1
hsl(60, 100%, 50%);
yellow
hsl(90, 100%, 50%);
yellow-green2
hsl(120, 100%, 50%);
green3
hsl(150, 100%, 50%);
green-cyan4
hsl(180, 100%, 50%);
cyan5
hsl(210, 100%, 50%);
cyan-blue
hsl(240, 100%, 50%);
blue
hsl(270, 100%, 50%);
blue-magenta
hsl(300, 100%, 50%);
magenta6
hsl(330, 100%, 50%);
magenta-red

NOTES:

  1. Interestingly, this is not the code for color:orange. The code for color:orange is color:hsl(39, 100%, 50%) instead.
  2. This is the code for color:chartreuce.
  3. This is actually the code for color:lime; color:green is hsl(120, 100%, 25%);.
  4. This is the code for color:springgreen.
  5. AKA aqua.
  6. AKA fuchsia.
A Simplified Colour Wheel.

In the above graphic, the primary colours (red, green, and blue) are the largest circles, and the secondary colours (yellow, cyan, and magenta) are the middle-sized circles.

Here's a page that lets you play around with those as well. However, since this page requires XHTML + SVG and CSS 3 to work, I thought it best to devise a test to see if your browser would support it. If you see a green checkmark, you're good to go: .

Colour Transparency

CSS 2 had the keyword transparent, which meant no background. CSS 3 added in the alpha channel, which defines how opaque or transparent a color is. Only HSL and RGB notations support it; hex notation and keywords don't. The code for using the alpha channels is very similar to using HSL and RGB notation:

Both of these require four numbers. The first three are the values for hue, saturation, and lightness (if using HSL) or red, green, and blue values (if using RGB). The fourth in both cases is the alpha channel value, which can be anything from 0 (completely transparent) to 1 (completely opaque), or any decimal value between.

On URIs

The other thing we should get out of the way is the matter of CSS URIs. These work exactly like URIs used in webpages, but the method of specifying them is slightly different. Also, relative URIs are always resolved relative to the stylesheet, not the webpage.

The URI is specified like this:

url Property Syntax
url('URI goes here')

So if you wanted to reference an image through this means (and you most certainly can) that was at the URI http://validator.w3.org/images/valid_icons/valid-html401.png, the value would look like this:

url Property Referring to Image
url('http://validator.w3.org/images/valid_icons/valid-html401.png')

Using double quotes would do just as well, too:

url Property Using Double Quotes
url("http://validator.w3.org/images/valid_icons/valid-html401.png")

By the way, url stands for another term for a URI: Uniform Resource Locator.

Length

Length is a numerical value. It doesn't have to be an integer; decimals are (usually) perfectly fine, too. There are two ways to describe length:

Absolute Lengths

Absolute lengths do not change, whatever the resolution, because they are based on units with a defined length: inches (including its fractional units points and picas) and centimeters (including its fractional unit the millimeter). To demonstrate these, I will use the same size of font but use different measurements (and thus different numerical values). The size is 1/4 of an inch, which is quite large for text. The measurements are:

in
The unit in stands for inches

Example: font-size:0.25in;

pt
The unit pt stands for point, which is 1/72 of an inch, in the reckoning of CSS.

Example: font-size:18pt;

pc
The unit pc stands for pica, which is 12 points, and thus 1/6 of an inch.

Example: font-size:1.5pc;

cm
The unit cm stands for centimeters

Example: font-size:0.635cm;

mm
The unit mm stands for millimeters

Example: font-size:6.35mm;

Below is a webpage with several div elements using each of the above sizes and displaying their mutual equivalency.

Different measurements, same results.

Relative Lengths

Relative lengths are measured relation to something else. The units are:

px
px stands for pixel, and these are measured in relation to a computer screen's resolution. For example, a resolution of 1280 X 800 is 1,280 pixels wide and 800 pixels high. Unlike other measurements, this must be an integer.
em
The size relative to the current em-box (which is a typographical concept). This is always measured by the current font, unless used with the font-size: property; in that case, it's measured by the inherited font size. With this measurement, 1em is as large as the current font, while 3em is three times the size of the font.
ex
This measurement uses the height of the current font's lower-case x—even if said font doesn't have an x.

Degrees

Related to lengths are degrees, which are usually used with CSS for SVG (not discussed in this book) or audio CSS, in particular the azimuth and elevation properties, mentioned in CSS For Audio Media. Degrees are also used for Hue in HSL notation.

In rare circumstances, a length can be a negative number, but this is usually not the case.

Inheritance And The inherit Property

Certain properties are automatically inherited from parent elements. For example, the font-weight property set by a strong element (which is normally bold) will carry over into an em element nested within it. making the text inside the two elements both bold and italic. The same goes for the font-size property of, say, an h1 element, which makes all text within it the same size. This does not, however, apply to all elements; some properties—such as those dealing with backgrounds—are not automatically inherited but are computed anew with each element.

I will state whether or not each property presented in the following chapters is automatically inherited.

The inherit value explicitly states that the declaration inherits its value from the same properties of the selected element's parents, whether or not that property is automatically inherited. This may be used with all CSS properties.

A Quick Note on Default Values

When explaining the various properties, I will make mention of their default values. For example, font-style decides whether or not the text is in italics. The default value is normal, but address, cite, dfn, em, i, and var elements are all automatically in italics.

The reason is simple: Most modern browsers have an internal stylesheet which they use on otherwise unstyled pages. Here's proof: Use an element that does not exist in (X)HTML (say, h7) in a webpage. The result will be no different than using an unstyled span element—except using an h7 element will cause a validation error.