As was discussed on the previous page, the declaration of a rule is made up of 2 parts; a property, and a value.
- property: states what aspect(s) of the element are affected (
color,background-color,margin...). - value: states the property's setting (
orange,12px,arial,solid...).
Properties are pretty straightforward even though they differ from element to element. You'll be learning a lot about them in this course and you can look them up in the Stylin' with CSS Appendix on page 255, or any CSS reference.
Values need a bit more explanation.
There are three types of values: words, lengths, and color values. Each must be written correctly in order for the property to take affect.
According to the W3C spec, rules that are incorrectly written are to be ignored by the user agent.
- Words/Keywords:
arial, 'century schoolbook', bold, italic, small, thick, solid ...
Word values are specific to each element and must be spelled correctly. Word values may be font names, font sizes, border styles ... it all depends on the CSS property. - Lengths:
12px; 16pt; 3em; 4ex; 60%
Length values consist of 2 parts, the numeric value followed by the unit. Units can be pixels, points, percentages or other units and must be expressed correctly.
Note that there is no space between the numeric part and the unit.
- Color:
red; #FF0000; #F00; rgb(255,0,0); rgb(100%, 0, 0);
Color values are written as color names, Hex numbers, Hex 'shorthand', or an RGB triplet .
Length Values
Length values describe an element's height, width, thickness, and so on. Length values can be absolute or relative. EXAMPLES
- Absolute values describe a physical measurement; 6 inches, 5 centimeters, 12 pixels*, 6 points, etc.
- Relative values are relationships with other measurable things like fonts or the width of a window. Examples of relative values are em, ex and percentage.
- An em is equal to the current font size of the current element. Imagine the size of a box around the letter M; that is your value. If you are using Arial Narrow, a .8em value will be quite small. If you are using Impact, which is a wide font, your .8em value will be larger.
- An ex is the x-height of a font (x-height is usually about half the font-size). It is named because it is the height of a lower-case x.
- Percentages are useful for setting DIV container widths to a proportion of the browser's viewport width. This gives "liquidity" to your page if the user resizes the window.
.
"Pixel units are relative to the resolution of the viewing device." But since that range of scalability is so limited, not to mention cumbersome to change, for all practical purposes pixels should be considered to be an absolute measure. Length Syntax
When writing length values, be sure to specify the unit of measure! There is no space between the number and the unit. Page 61 of the Stylin' book presents a listing of numeric values.
p { font-size: 12px; }
h1 { font-size: 1.5em; }
li { font-size: 10pt; }
hr { width: 75%; }Many CSS experts suggest using relative units like EM to specify type sizes for the following reasons:
- If you set the font size for the BODY tag to
1em, it can act as a baseline for all your other elements because of CSS inheritance (more about inheritance next week). This allows you to set proportional relationships between the elements. H1 tags might be 1.1em, H2 tags 1em, H3 0.9em, P tags might be 0.8em, and so on. EXAMPLE
One advantage of using relative units is that if you decide to change the base font size of the page later, you only need to change the BODY tag's font size (up or down) and the change will ripple throughout your documents.
- If you choose to use relative units, each element in the document must be given
a value. Some developers love this because it gives them absolute control over the
page design. Others don't like to take the time to set each element's value. With
experience, you'll decide which technique you prefer.
- Use absolute units only when the physical characteristics of the output medium are known, e.g. bitmap image or business card.
- A disadvantage of using absolute unit values is that they can cause problems for visually impaired IE/Win users who resize text using IE's View menu.
Color Values
There are three types of color values:
- hexidecimal (aka hex)
- RGB
- color names
Hex and RGB values give the designer the most color options. Use
the Visibone
color lab to explore
colors. EXAMPLES
Hexidecimal values are preceeded by a hash mark ( # ) and consist of 6 characters:
#88FFAA;
Hex values simply specify the amount of red, green and blue that is blended to create
the color. The first 2 digits define the red color value, the next 2 are green and
the final 2 are the blue values. A value pair of FF corresponds to 100%
(complete color saturation), while a value pair of 7F corresponds to 50%.
If your hex color has the same 2 characters in each pair, it can be abbreviated as a three-digit hex value. In the two examples below, I've added color to the hex value to make the corresponding color pairs more obvious:
#88FFAA; #8FA;
#ff3322; #f32;
Hex color values are NOT case sensitive.
An RGB value is an alternative notation for specifying the
amount of red, green and blue that is blended to create the desired color. RGB values
are expressed as a decimel or percentage triplet. A value of 255 corresponds
to 100% saturation of the color, while 127 (half
of 255) corresponds to 50% saturation of the color. For those of us who do not think
in hexidecimel, RGB values are easier to visualize and predict. The RGB triplet values
are specified within parentheses.
In the examples below, I have added color to the triplets to highlight the corresponding color that the value specifies:
rgb(0,153,153);
rgb(100%,0%,0%);
HINT: When writing RGB styles, don't forget the closing } for
the rule's declaration block after the rgb's closing )!
16 Color Names from W3C
- aqua
- black
- blue
- fuchsia
- gray
- green
- lime
- maroon
- navy
- olive
- purple
- red
- silver
- teal
- white
- yellow
Color Names: When using color names, it is safest to stick with the 16 color names given in the W3C specifications.
Even though there are lists of other, more interesting, color names such as peachpuff, bisque and burlywood (!), each browser assigns its own method for handling these names. To be sure that your colors look the same, use HEX or RGB values.
In the past, developers were advised to use
"web safe colors
"
that were limited to colors with no subtlety at all. Now however, most web experts have agreed that it is no longer necessary to limit colors to this palette. At last!!
The Zen reading this week (if you have the book) will explore more on color and design. There are very good sections on psychological color associations and color, culture, and gender. There are suggestions for developing color palettes for your sites and sections on pattern, texture, contrast and color blindness. Read these pages for ideas and inspiration.
Warning: Don't get hung up in the advanced code!
References
- Visibone Color Lab
(click Free Online Services)
- RGB Hex Triplet Chart
- RGB Decimal Chart
- Color Checker
- Thinking Hexidecimally
- Hex Hub
- Webmonkey
Reference Colors
- Colorcom
- Causes of Color
- W3C on relative and absolute measures