Common Tasks With CSS

Setting colors and backgrounds (as previously described) are among the most common tasks performed by CSS. Other common tasks include setting fonts and white space around elements. This section guides you through the most commonly used properties in CSS.

Common Tasks: Fonts

Let's start with fonts. If you have used desktop-publishing applications in the past, you should be able to read this little style sheet:

 h1 { font: 36pt serif }

This rule sets the font for H1 elements. The first part of the value, 36pt, sets the font size to 36 points. A point is an old typographic unit of measure that survived into the digital age. In the next chapter, we tell you why you should use the "em" unit instead of "pt," but for now, we stick to points. The second part of the value, serif, tells the browser to use a font with serifs, which are hooks at the ends of the strokes; Chapter 5 tells you all about them. The more decorated serif fonts suit Bach's home page well because the modern sans-serif fonts (fonts without serifs) weren't used in his time. Figure 2.10 shows the result.

Figure 2.10. The headline of the sample document has been given a bigger font size.

The font property is a shorthand property that simultaneously sets several other properties. By using it, you can shorten your style sheets and set values on all the properties it replaces. If you choose to use the expanded version, you would have to set all these to replace the previous example:

 H1 {   font-size: 36pt;   font-family: serif;   font-style: normal;   font-weight: normal;   font-variant: normal;   line-height: normal; }

Sometimes, you only want to set some of these. For example, you may want to emphasize the list items by setting the font weight to bold and the font style to italic. You can emphasize all list items by setting the declarations on the their ancestor element:

 ul {   font-style: italic;   font-weight: bold; }

Figure 2.11 shows the result of this code.

Figure 2.11. The sample document with bold slanted list items.

The last properties, font-variant and line-height, haven't been widely supported in browsers up to now; therefore, they are not as commonly used yet.

Common Tasks: Margins

Setting space around elements is a basic tool in typography. The headline above this paragraph has space above it and (slightly less) space below it. This paragraph, as printed in this book, has space on the left and (slightly less) on the right. CSS can be used to express how much space should exist around different kinds of elements.

By default, your browser knows quite a bit about how to display the different kinds of elements in HTML. For example, it knows that lists and BLOCKQUOTE elements should be indented to set them apart from the rest of the text. As a designer, you can build on these settings while, at the same time, provide your own refinements. Let's use the BLOCKQUOTE element as an example. Here's a simple test document:

   <HTML>     <TITLE>Fredrick the Great meets Bach</TITLE>     <BODY>       <P>One evening, just as Fredrick the Great was         getting his flute ready, and his musicians         were assembled, an officer brought him a         list of the strangers who had arrived. With         his flute in his hand he ran over the list,         but immediately turned to the assembled         musicians, and said, with a kind of         agitation:       <BLOCKQUOTE>"Gentlemen, old Bach is come."       </BLOCKQUOTE>       <P>The flute was now laid aside, and old Bach, who       had alighted at his son's lodgings, was immediately       summoned to the Palace.   </BODY> </HTML>

Figure 2.12 shows how a typical HTML browser would display the document.

Figure 2.12. A sample document with a BLOCKQUOTE element.

As you can see, the browser added space on all sides of the quoted text. In CSS, this space is called margins and all elements have margins on all four sides. The properties are called margin-top, margin-right, margin-bottom, and margin-left. You can change how the BLOCKQUOTE element is displayed by writing a style sheet:

 BLOCKQUOTE {   margin-top: 1em;   margin-right: 0em;   margin-bottom: 1em;   margin-left: 0em;   font-style: italic; }

The "em" unit is detailed in the next chapter, but we can already now reveal its secret: It scales relative to the font size. So, the previous example results in the vertical margins being as high as the font size (1em) of the BLOCKQUOTE and horizontal margins having zero width. To make sure the quoted text can still be distinguished, it has been given an italic slant. Figure 2.13 shows the result.

Figure 2.13. The sample document with a styled BLOCKQUOTE element.

Just like font is a shorthand property to simultaneously set several font-related properties, margin is a shorthand property that sets all margin properties. The previous example can therefore be written as follows:

   BLOCKQUOTE {     margin: 1em 0em 1em 0em;     font-style: italic;   }

The first part of the value, 1em, is assigned to margin-top. From there, it's clockwise: 0em is assigned to margin-right, 1em is assigned to margin-bottom, and 0em is assigned to margin-left.

With the left margin set to zero, the quoted text needs more styling to set it apart from the rest of the text. Setting font-style to italic helps and giving the element a darker background further amplifies the quote:

 BLOCKQUOTE {   margin: 1em 0em 1em 0em;   font-style: italic;   background: #DDD; }

Figure 2.14 shows the result.

Figure 2.14. The BLOCKQUOTE element is styled with a background and margin.

As expected, the background color behind the quote has changed. Unlike previous examples, the color was specified in red/green/blue (RGB) components. (RGB colors are described in detail in Chapter 10.)

One stylistic problem in this example is that the background color barely covers the quoted text. The space around the quote the margin area does not use the element's background color. CSS has another kind of space, called padding, which uses the background color of the element. In other respects, the padding properties are like the margin properties: They add space around an element. Let's add some padding to the quote:

 BLOCKQUOTE {   margin: 1em 0em 1em 0em;   font-style: italic;   background: #DDD;   padding: 0.5em; }

The result of setting the padding is added space between the text and the rectangle that surrounds it (see Figure 2.15).

Figure 2.15. The result of adding a padding to the BLOCKQUOTE element. Notice the extra space around the quoted text.

Notice that the padding property was given only one value (0.5em). Just like the margin property, padding could have taken four values, which would have been assigned to the top, right, bottom, and left padding, respectively. However, when the same value is to be set on all sides, listing it once suffices. This is true both for padding and margin (and some other border properties, which are described in Chapter 8, "Space Around Boxes").

Common Tasks: Links

To make it easier for users to browse hypertext documents, the links should have a style that distinguishes them from normal text. HTML browsers often have underlined hyperlink text. Also, various color schemes have been used to indicate if the user has previously visited the link or not. Because hyperlinks are such a fundamental part of the Web, CSS has special support for styling them. Here's a simple example:

 A:link { text-decoration: underline }

This example specifies that unvisited links should be underlined (see Figure 2.16).

Figure 2.16. Links in the document are underlined.

The links are underlined, as we have specified, but they are also blue, which we have not specified. When authors do not specify all the possible styles, browsers use default styles to fill the gaps. The interaction between author styles, browser default styles, and user styles (the user's own preferences) is another example of CSS's conflict resolution rules. It is called the cascade (the "C" of CSS). We discuss the cascade in the next section.

The selector (a:link) deserves special mentioning. You probably recognize "a" as being an HTML element, but the last part is new. :link is one of several so-called pseudo-classes in CSS. Pseudo-classes give style to elements based on information outside of the document itself. For example, the author of a document cannot know whether a certain link will be visited or not. Pseudo-classes are described in detail in Chapter 4, and we give only a few more examples here:

 A:visited { text-decoration: none }

This rule gives style to visited links, just like a:link gives style to unvisited links. Here is a slightly more complex example:

 A:link, A:visited { text-decoration: none } A:hover { background: black }

The last rule introduces a new pseudo-class (:hover). Assuming the user is moving a pointing device (such as a mouse), the specified style will be applied to the element when the user moves the pointer over (hovers over) the link. A common effect is to change the background color. Figure 2.17 shows what it looks like.

Figure 2.17. The effect of the `:hover` pseudo-class.

The :hover pseudo-class has an interesting history. It was introduced in CSS2 after the hover effect became popular among JavaScript programmers. The JavaScript solution requires complicated code compared to the CSS pseudo-class, and this is an example of CSS picking up effects that have become popular among Web designers.