 CSS Tutorials > CSS Units |
CSS UnitsThis tutorial lists all the units that can be used within style sheets. The units are used to specify things like distances and colours. The units can be grouped into four types: length units, percentage units, colour units and URL's. Length unitsThere are 8 length units in the CSS specification. Of these, 3 are relative units, and 5 are absolute units. Relative length unitsall elements
|
These units are relative to another length property. Use relative units when you want your pages to scale well across a range of output devices - for example, if you want your page to look good on the screen and when it's printed out.
Unit |
Description |
Example |
em |
The height of the element's font |
letter-spacing: 0.1em |
ex |
The height of the letter x in the element's font |
margin: 1ex |
px |
Pixels |
font-size: 12px |
These units are "real-world" units. They are best used for print work, or other occasions when the type of output device is known.
Unit |
Description |
Example |
in |
Inches |
line-height: 0.5in |
cm |
Centimetres |
margin-top: 2cm |
mm |
Millimetres |
letter-spacing: 1mm |
pt |
Points (1pt = 1/72in) |
font-size: 14pt |
pc |
Picas (1pc = 12pt) |
font-size: 2pc |
Percentage units are always relative to another value, usually the element's font size.
For example:
/* 150% of the element's font size: */
h4 { line-height: 150% }
/* 10% of the line width: */
p { text-indent: 10% }
Colours in CSS are specified using either a colour keyword (name), or an RGB value in one of several possible formats.
Colours can be specified using names such as black, white, red etc. Although there is no official standard for these colours, Microsoft and Netscape browsers support hundreds of these colour names.
For example:
body { color: white; background: black }
h1 { color: red }
The best way to specify colours in CSS is using RGB values, which ensures that the exact colour will be used. Colours can be specified in any of the following ways:
Unit |
Description |
Example |
#RRGGBB |
Standard HTML red-green-blue 6-digit hex number |
color: #FFFF00 |
#RGB |
Short-hand red-green-blue 3-digit hex number: each digit is replicated to produce the final colour, e.g. #123 -> #112233 |
color: #0FF |
rgb(R, G, B) |
Decimal representation, each value being an integer between 0 and 255 |
color: rgb(255,192,255) |
rgb(R%, G%, B%) |
Percentage representation, each value being a percentage between 0.0% and 100.0% |
color: rgb(100%,80%,50%) |
A URL is specified using the following format:
url("http://www.url.com/images/box.gif")
The double quotes around the URL can be replaced with single quotes, or omitted altogether.
For example:
body { background-image:
url(http://www.url.com/images/background.jpg) }
That's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters.
If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun!
It is possible to set negative lengths, though, which will expand theclipping area outside the element's box. If you wanted to pushthe clipping area up and left by a quarter-inch, it would be donewith the following styles (illustrated by Figure 9-12):
overflow-clip: rect(-0.25in, auto, auto, -0.25in);
This doesn't do much good, as you can see. The clippingrectangle extends up and to the left, but since there isn't anycontent there, the visual effect is the same as if the author had paragraphs that contain identical text. However, the first paragraphcontains an inline boldface element, and the second an absolutelypositioned boldface element. In the second paragraph, the styles usedwould be something like what is shown here:
P {position: relative;} /* establish containing blocks */<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;width: 8em; height: 4em;">...</B>
For the most part, the text in both paragraphs looks fairly normal. displayIE4 P/P IE5 P/Y NN4 P/P Op3 P/-
Used toclassify elements into broad categories. The most popular value isprobably none, which suppresses the display of anelement altogether. Gratuitous use of display witha document type such as HTML can be dangerous, since HTML already hasa display hierarchy defined. However, in the caseof XML, which has no such hierarchy, display is indispensable.
In CSS2, the range of values for display is dramatically expanded.See Chapter 10, "CSS2: A Look Ahead", for more details.
BODY {color: red;}TABLE {color: black;}That's because the combination of your style, and thebrowser's built-in styles looks like Figure 6-10.
Since there is a color value defined by thebrowser for TABLE elements, it will takeprecedence over the inherited value. This is annoying and For example, boldfaced text is already fairly obvious, but you could give it a different color to make it stand out even further:
B {color: maroon;}Then you decide that you want all table cells with a class of highlight to contain yellow text:
TD.highlight {color: yellow;}This sets the foreground color of all elements within any table cell