Colors And More

Before we go anywhere, there are four types of property values we need to cover: colors, URIs, and inheritance and length.

On Color

There are special codes for something very important in CSS (and any presentation) that we should deal with at once: color. I introduced a few colors in Chapter 5, but those are hardly the only colors possible. In fact there are a total of 16,777,216 (Yes, nearly 17 million) possible colours, and only a few of them have names.

The first thing you have to understand is that there are 3 primary colors of light: Red, Green, and Blue.

Don’t confuse them with Red, Yellow, and Blue, which are the primary colors of pigment (which absorb light, rather than emit it).

Mixing two out of each of the three yields the following colors:

Red + Green
Yellow
Red + Blue
Magenta
Green + Blue
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 colors set to 0 gives you Black), the maximum value for each is 255 (all colors set to 255 gives you white). And, as I said earlier, this gives you 16,777,216 colors — plenty for our eyes.

So, onto the color codes.

There are two types of color codes, both with the same results: Hexadecimal (remember me talking about this?) and RGB (short for Red-Green-Blue) notation. So far as I know, the former is more common, but the latter is more readily understood.

Hexadecimal Notation

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 color) 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 colors listed above are:

Black #000000
Red #FF0000
Yellow #FFFF00
Lime* #00FF00
Cyan #00FFFF
Blue #0000FF
Magenta #FF00FF
White #FFFFFF

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

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

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

Compact Hexadecimal

For a small fraction hexadecimal codes (4,096 in all), there is a way to express them using only 3 digits instead of 6. The requirements 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 color in it qualifies for this.

Black #000
Red #F00
Yellow #FF0
Lime #0F0
Cyan #0FF
Blue #00F
Magenta #F0F
White #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 color 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:

rgb(red value, green value, blue value)

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

Black rgb(0, 0, 0)
Red rgb(255, 0, 0)
Yellow rgb(255, 255, 0)
Lime rgb(0, 255, 0)
Cyan rgb(0, 255, 255)
Blue rgb(0, 0, 255)
Magenta rgb(255, 0, 255)
White rgb(255, 255, 255)

Using this notation, the code for green would be rgb(0, 128, 0), 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 colors in terms of red, green, and blue, which can be easily copied into this format.

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(‘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(‘http://validator.w3.org/images/valid_icons/valid-html401.png’)

Using double quotes would do just as well, too:

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.

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 computer anew with each element.

I will state whether or not each property presented in the following chapters are 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.

Length

Length is a numerical value. It doesn’t have to be an integer; decimals are perfectly fine, too. There are two ways to describe font sizes by length:

  • Absolute length
  • Relative Length

Absolute Lengths

Absolute lengths do not change, whatever the resolution. 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;

cm
The unit cm stands for centimeters

Example: font-size:0.635cm;

mm
The unit mm stands for millimeters

Example: font-size:6.35mm;

pt
The unit mm 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;

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.

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