Style Sheets Guide
=Specifying Units for Properties=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
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
|
2-Letter
Abbreviation
|
Support
|
Description
|
| ems | em |
IE | N4B3 |
A scaling factor relative to the current element's font size. |
| x-height | ex |
IE | 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
|
2-Letter
Abbreviation
|
Support
|
Reference
Measure
|
| inch | in |
IE3B1 |
N4B3 |
12in=1foot, 1in=2.54cm |
| centimeter | cm |
IE3B1 |
N4B3 |
2.54cm=1in, 1cm=10mm |
| millimeter | mm |
IE3B1 |
N4B3 |
10mm=1cm |
| picas | pc |
IE3B1 |
N4B5 |
6pc=1in, 1pc=12pt |
| point | pt |
IE3B1 |
N4B3 |
12pt=1pc, 1pt=1/72in |
| pixels | px |
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
[IE | 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]
[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]
[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]
[IE | 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]
[IE | 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]
[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....