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:
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:
Using double quotes would do just as well, too:
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 forinches
Example: font-size:0.25in;
- cm
- The unit
cm
stands forcentimeters
Example: font-size:0.635cm;
- mm
- The unit
mm
stands formillimeters
Example: font-size:6.35mm;
- pt
- The unit
mm
stands forpoint
, which is 1/72 of an inch, in the reckoning of CSS.Example: font-size:18pt;
- pc
- The unit
pc
stands forpica
, 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.
Relative Lengths
Relative lengths are measured relation to something else. The units are:
- px
px
stands forpixel
, 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.