Examples for Chapter 4

For convenience, in these small examples, the stylesheets have been embedded in the XHTML files. For real sites, we strongly advocate the use of external stylesheet files.

Since the examples for this chapter are each a single file, you can download each one just by using your browser's Save As... command after opening an example in its own window. For convenience, we have also provided a zipped archive of all the examples.

Download the source for the CSS examples. Zip archive, 12kB.

Formatting Paragraphs and Layout

Figure 4.5

Alignment of paragraphs opens a new window.

Figure 4.6

Applying special styling to the first line and letter of a paragraph opens a new window.

In the following two examples, note how the paragraph width behaves differently, depending on which units have been used to specify it, as the font size varies. Try switching to larger and smaller sizes in your browser.

Figure 4.9

Paragraph widths specified in em units opens a new window.

Figure 4.10

Paragraph widths specified in px units opens a new window.

Floats

Figure 4.13

A left-floated element opens a new window.

Figure 4.14

A "dropped initial" letter opens a new window.

Figure 4.15

A called-out heading, using a float opens a new window.

Tables

Figure 4.20

A Formatted table opens a new window. This is the final version from the book, with all the embellishments. You should compare it with the unformatted version of the same table from Chapter 3 (Figure 3.5).

Generated Content and Box Types

Windows users should note that Internet Explorer does not implement CSS generated content, not even in IE7. To see the next example, you will need to use Firefox or Opera. All the major Mac browsers will display the example correctly.

Figure 4.21

Breadcrumbs opens a new window. This example combines the use of generated content with a specification of the box type: the breadcrumbs are marked up as a list.