Style Sheets Guide
=Specifying Units for Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Length
The syntax used to indicate lengths in Style Sheets is an optional sign character (a '+' or '-' character, with '+' being the default) followed immediately by an integer or decimal number. Attached to the end of this value is a required two letter unit measure (If the value '0' is used, the unit measure is optional.) The official specifications for some properties allow negative values, but some browsers may not be able to support this. If a value is used that the browser can not support, it will be clipped to a value that it can.

There are two different types of length units: Relative and Absolute. HTML can not guarantee the properties of the output device, so absolute units (such as millimeters) may not translate as well between mediums as relative units do (such as ems or percentages.)

Browser Default Units
Even though unit measures are required, what should a browser do if none are present or the units specified are misunderstood?
The answer is, the browser should choose a default unit system for such a case:
Internet Explorer: Pixels
Netscape: Pixels
Relative Units
Common
Name		 CSS
Code		 Support Description
emsem IE4B1 | N4B3 A scaling factor relative to the current element's font size.
x-heightex IE4B2 | N4B3 A scaling factor relative to the height of the letter 'x'
(also known as the relationship of lowercase low-rise letters to high-rise characters.)
percentage% IE3B1 | N4B3 This value is always relative to another length unit. See the section on Percentages below for more details.

Absolute Units
Common
Name		 CSS
Code		 Support Reference
Measure
inchin IE3B1 | N4B3 12in=1foot, 1in=2.54cm
centimetercm IE3B1 | N4B3 2.54cm=1in, 1cm=10mm
millimetermm IE3B1 | N4B3 10mm=1cm
picaspc IE3B1 | N4B5 6pc=1in, 1pc=12pt
pointpt IE3B1 | N4B3 12pt=1pc, 1pt=1/72in
pixelspx IE3B1 | N4B2 size dependent on screen resolution                                                         


Percentages
Percentages are used both in color and length values. Percentages are specified by either an integer or a decimal number followed by a '%' symbol.
Length
[ IE3B1 | N4B3 ]
Length percentages are always relative to another length unit (usually it is the font size of the current element.) WHICH other length unit it is dependent on is determined by the particular property being used. This information is detailed in the Style Sheet Properties Index.
Color
[ IE4B1 | N4B3 ]
Percentages here are comma separated lists of floating point percentage values for each Red-Green-Blue color component of the final color. A value of 0% represents the absence of a color component, while a value of 100% represents full presence of the color component. See the Color Values section below for an example.


Color Values
Color values are used to assign color properties for text and backgrounds of HTML tag structures. Values are specified either as a name chosen from a commonly agreed upon color name set or as a function of a color space defined by breaking a resulting color value into three color parts (Red, Green and Blue), each with a decimal range of values from 0 (no presence of color component) to 255 (full presence of color component.) If values used for a particular syntax are outside the valid number ranges, the values will be clipped by the system.

NOTE: You may notice that the [#RGB-color] case is not exactly the same as the [#RRGGBB-color] method. If it is expanded, it will become #880088. The resultant color is only slightly different than the full notation of #800080 because of the relative insignificance of the second digit compared to the first. This does make the [#RGB-color] notation a little less useful than using [#RRGGBB-color].
Syntax: [#RRGGBB-color]
Support: [ IE3B1 | N4B2 ]
Example: h1 { color: #800080 }
Description:
Preceded by a '#' symbol, this is a hexadecimal string representing the values for Red, Green and Blue. Each number pair is a hexadecimal value from 00 - FF (0-255 in Decimal notation.) A total of 16777216 distinct color values are possible using this method.

Syntax: [#RGB-color]
Support: [ IE3B1 | N4B2 ]
Example: h1 { color: #808 }
Description:
Also preceded by a '#' symbol, This is a hexadecimal string representing the values for Red, Green and Blue. It is a shorthand version of [#RRGGBB-color] in which each single hex number is duplicated by the system to produce a final HEX value. A total of 4096 distinct color values are possible using this method.
NOTE: Trying to map a [#RRGGBB-color] notation to [#RGB-color] notation will not usually yield the same exact color value. The method used to duplicate the second Hexadecimal number loses the least significant hexadecimal digit. The resultant color difference will be very small, but it does make the [#RGB-color] notation a little less useful than using [#RRGGBB-color].

Syntax: [R,G,B-color]
Support: [ IE4B1 | N4B3 ]
Example: h1 { color: rgb(127,0,127) }
Description:
This value in parentheses is a comma separated list of integer values from 0-255 for the Red, Green and Blue values that create the desired color. This notation is preceded by the keyword 'rgb'.

Syntax: [R%,G%,B%-color]
Support: [ IE4B1 | N4B3 ]
Example: h1 { color: rgb(50%,0%,50%) }
Description:
This value in parentheses is a comma separated list of floating point percentage values for each color segment. A value of 0% represents the absence of a color component, while a value of 100% represents full presence of the color component. This notation is preceded by the keyword 'rgb'.

Syntax: [color-name]
Support: [ IE3B1 | N4B2 ]
Example: h1 { color: maroon }
Description:
This is a string value representing a specific name assigned to a distinct RGB color value. HTML 3.2 and many browsers define 16 standard color names, and Internet Explorer and Netscape also support an expanded set of 141 total color names.


URLs
[ IE3B1 | N4B2 ]
File paths can be referenced by either an absolute URL or as a path relative to the style sheet.
Syntax
url([URL-address])
where [URL-address] is an Absolute or Relative URL.
Examples
Absolute Path Example: url(http://www.url.com/path/example.file)
Relative Path Example: url(../path/example.file)

Boring Copyright Stuff....