Units - Lengths

Units/Length

COLOR

Colors (as value of a property ) can be specified in 3 basic ways

1. Named Colors
2. RGB (red, green, blue)
3. Hexadecimal

Named colors

There are 16 standardized named colors you can use safety across all browsers. They are:

• gray
• navy
• black
• green
• olive
• teal
• blue
• purple
• maroon
• red

RGB

RGB method defines the color via either as a percentage of the 3 additive colors or a number from 0 to 255. examples:
<span {color: rgb(100%, 0%, 0%)> is the same as
<span {color: rgb(255, 0, 0 )>

Hexadecimal

If you've done web work, you're probably already familiar with this format. Color values are specified similar to the rgb format, range of the color is 00 to FF (base 16 numbering FF in base 16 = 255). example:
<span {color: #ff0000}> Check out a reference page showing the 216 web safe colors specified using Hexadecimal format.

Length Units

CSS1 uses the following length units:

Absolute units

1. Inches(in)
2. Centimeters(cm)
3. Millimeters(mm)
4. Points(pt)
5. Picas(pc)

I suggest you steer away from using these units due to one fact, - these only work correctly if your browser knows all details of your monitor size, screen resolution, and other display details. Even if your computer is set up correctly, one cannot guarantee that user viewing your pages computer is! So just say "no" to Absolute lengths values for the web.

Relative units

1. em
2. ex
3. px

One "em" is the value of font-size for a given font. Sounds confusing? If you set the font size for an element like: p {font-size 15px;} one em is 15 pixels. This can get you in trouble fast as one em will vary according to what you set the font size for a given element. Consider the following rules:

One "ex" is the height of a lowercase x in the font being used. In the real world of browsers what happens is they use .5 em since not all fonts have a value of x height built in to them.

One "px" is equal to one pixel on the monitor display. Since all browsers know how to display pixels, you probably will not run into to much trouble by using this unit of measurement. In fact I use this value probably in 95% of the css I have written because it of that fact.

Percentage Values

You can also use percentages as a value such as p{font-size: 80%;}. Again one must be careful in using this. It is fairly safe to do this: body{margin-left 8%; margin-right: 10%;) which will produce a left margin of 8% and a right margin of 10% of a web page relative to total browser width. However if you use it in font-sizes like this: body {font-size: 80%;} p{font-size: 50%} it can cause many problems due to the way the style is inherited. The font-size in the p element will be 40% not 50% (half of 80% because the p element inherits the size first from the body element then applies the rule from the p element). What is this inhertiance stuff?? Check the next page.