|
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 unitsThese 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.
Absolute length unitsThese units are "real-world" units. They are best used for print work, or other occasions when the type of output device is known.
Percentage unitsPercentage 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% }
Colour unitsColours in CSS are specified using either a colour keyword (name), or an RGB value in one of several possible formats. Colour keywordsColours 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 }
Colour RGB valuesThe 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:
URL'sA 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) }
The EndThat'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!
This sets the foreground color of all elements within any table cell with a class of highlight to be yellow, as shown in Figure 6-2: Figure 6-2. Highlighting a table cell contents |

Most of the time, you'll have no reason to use the keyword transparent. On occasion, though, it can be useful. Although it's the default value, users might set their browsers to make all links have a white background. When you design your page, though, you set anchors to have a white foreground, and you don't want a background on those anchors. In order to make sure that this happens, you would declare:
all sides.</P> </DIV> <DIV STYLE="width: 100px;"> <P>This paragraph is contained within a DIV with a width of 100 pixels, so its padding will still be 10% of the width of the paragraph's parent. There will, therefore, be half as much padding on this paragraph as that on the first paragraph.</P>
We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- but it's worth reviewing again, just to see how it operates.