CSS1 Properties

---

Now that you've seen how rules are formed in style sheets , what are the various properties that can be set? CSS1 defines more than 50 different properties and values. CSS2 defines quite a few more and the browser vendors are busy inventing new ones all the time. This section covers the standard CSS1 properties as defined by the W3C, which can be found at http://www.w3.org/TR/REC-CSS1. Although the CSS1 specification was defined well over five years ago and should work in all browsers, some properties might not work in your browser. CSS2 (http://www.w3.org/TR/REC-CSS2/) is less supported than CSS1, so let's leave the discussion of it until the next chapter. Although CSS promises a lot more flexibility than HTML-based formatting, it still seems that there are issues regarding lack of support across browsers and rendering differences. Before turning our attention to the various style properties, it is important to discuss units of measure under CSS.

CSS Measurements

When you manipulate text and other objects with a style sheet, you often must specify a length or size . CSS supports a variety of measurement forms. The CSS1 specification supports traditional English measurements such as inches ( in ) as well metric values in centimeters ( cm ), or millimeters ( mm ). All are demonstrated here with a simple text-indent property that can be applied to four paragraph elements with different id attribute values:

 #para1    {text-indent: 1in;} #para2    {text-indent: 10mm;} #para3    {text-indent: 0.5cm;} #para4    {text-indent: -0.75cm;} 

Notice that it is possible to set values in CSS as both positive and negative integer values as well as decimal values. Of course, negative values may result in somewhat unexpected results.

It also is possible to specify units in publishing length units such as the familiar point size ( pt ) as well as picas ( pc ). For the curious , points relate to inches in that 72 points equals 1 inch, whereas a pica is equivalent to 12 points; thus, there are 6 picas per inch.

 p.big          {font-size: 64pt;} .verysmall     {font-size: 6pt;} #picameasure   {line-height: 2pc;} 

Interestingly, despite the comfort many designers may have with points as an absolute measurement of text, 12pt will not necessarily be the same on a PC screen as on a Macintosh screen because of the way point size is calculated onscreen on the Web. Pixels do not necessarily correspond to points. On some systems, the resolution is 72 pixels per inch, and thus pixels and points are equivalent. On other systems, you may have 92, 96, or even more pixels per inch; in this situation, one pixel does not equal one point. Because pixels per inch can vary so greatly, designers looking for more exacting measurements might instead opt for pixels ( px ).

 .bypixel   {font-size: 40px;} 

Pixels certainly aren't the best measurement form because you may run into problems depending on the user's screen size and the dot pitch of the user 's monitor. It just doesn't seem to be that the Web supports absolutes, especially considering that each person's viewing environment is different. Rather than fight this, Web-aware designers often opt for relative units like em-height units ( em ), x-height units ( ex ), and percentage values ( % ). The relative units can be difficult for designers to figure out. The em unit is equivalent to the size of a given font. So if you assign a font to 12pt, each " em " unit would be 12pt; thus, 2em would be 24pt. Consider the following markup:

  <div style="font-size: 12pt; text-indent: 1em;">  Em example  with font-size at 12pt.  </div>   <div style="font-size: 24pt; text-indent: 1em;">  Same example  with font-size at 24pt.  </div>  

whose rendering is shown here:

Notice that in the rendering, the second example is indented roughly twice as far as the first based upon the value of the em unit, which is calculated on the font size. Although the value of the em unit might not seem obvious, consider that it can be used to adjust all content relative to a base font measurement. This measurement really lends itself well to a scaling layout in which a user may adjust their fonts.

Slightly easier to understand compared to em, the x-height measurement ( ex ) is used in typography to describe the height of the lowercase x character in a particular font. When setting font sizes and line spacing, it is important to consider the x-height of the font in use. In fact, even when fonts are the same point size, they can be much larger or smaller based upon their x-height, as shown here:

A simple use of x-height measurements ( ex ) would be to specify the line-height relative to a font's x-height.

 p {line-height: 2.5ex;} 

Like em , the percentage value can be useful when measuring things in CSS, as shown here:

 b {font-size: 80%;}  /* 80% of the parent element's font */ 

Although page designers who are used to electronic layout tools probably will stick to the measurements most familiar to them, such as points or pixels, the use of relative measurements does make a great deal of sense when trying to create style sheets that work under a variety of conditions.

Tip  

Many older CSS1 supporting browsers could have problems with relative measurements such as em and ex , as well as negative values for measurements.

---