List of Figures

---

Chapter 1: Lists

Figure 1-1: An example with default text size

Figure 1-2: The same example with increased text size

Figure 1-3: Default rendering of an unordered list

Figure 1-4: A list with bullets turned off

Figure 1-5: A list with bullets and indenting turned off

Figure 1-6: A list with custom bullets

Figure 1-7: The resulting mini-tab navigation bar

Figure 1-8: A mini-tab navigation bar with shaped background images

Figure 1-9: A few other various shape possibilities

Chapter 2: Headings

Figure 2-1: An example of an unstyled view of a page that uses heading tags

Figure 2-2: An example of a styled heading

Figure 2-3: A styled heading with a gray bottom border

Figure 2-4: A heading example with background color and padding

Figure 2-5: A heading with background and border bottom

Figure 2-6: A 10 10 pixel image created in Photoshop (magnified)

Figure 2-7: A heading with tiled background image

Figure 2-8: A heading with a background image icon

Figure 2-9: A 13 13 pixel transparent icon (zoomed)

Figure 2-10: The resulting transparent image with CSS background applied

Figure 2-11: A heading with background image and color applied

Chapter 3: Tables are Evil?

Figure 3-1: Example of a typical data table

Figure 3-2: Table example with borders added to right and bottom of <th> and <td>

Figure 3-3: Table example with top and left borders added

Figure 3-4: A perfect grid using the border-collapse property

Figure 3-5: 10 pixels of padding added

Figure 3-6: The face of a clock represents the order of margin or padding values.

Figure 3-7: Caption and <th> styled

Figure 3-8: 1 4 pixel stripe image created in Photoshop (zoomed)

Figure 3-9: An example of a tiled image background applied to table header cells

Figure 3-10: Three table header icons created in Photoshop

Figure 3-11: An example of unique icons assigned to each <th>

Chapter 4: Quotations

Figure 4-1: Three images created in Photoshop to create quotation marks and rounded corners

Figure 4-2: Resulting styled blockquote using three background images and text

Figure 4-3: The styled <blockquote> with <strong> tags added for calling out certain words

Figure 4-4: An unstyled view of our <blockquote> example

Chapter 5: Forms

Figure 5-1: Method A as rendered in a browser

Figure 5-2: Method B as rendered in a browser

Figure 5-3: Method B with padding added to the input elements

Figure 5-4: Method C as viewed in a browser, with CSS applied to <p> tags

Figure 5-5: Example of check box option added with clickable text

Figure 5-6: Default form layout using a definition list

Figure 5-7: Definition list form example with <dd> margins removed

Figure 5-8: Form layout with floated <dt> elements

Figure 5-9: Our example form with 200 pixel width applied to all <input> elements

Figure 5-10: Our form example with only text inputs at 200 pixels wide

Figure 5-11: Our example form with styled <labels>

Figure 5-12: Our form example with <fieldset> and <legend> added

Figure 5-13: Our form example with <fieldset> styled

Figure 5-14: Our completed form example, styled with CSS

Chapter 6: <STRONG>, <EM>, and Other Phrase Elements

Figure 6-1: An example of a list of bold links contained within a sidebar

Figure 6-2: A book title marked up with <cite> and styled with CSS

Figure 6-3: Mark Pilgrim's "posts by citation" results on "dive into mark" (www.diveintomark.org/archives/citations/dan_cederholm/)

Figure 6-4: Example of <abbr> results in a typical browser

Chapter 7: Anchors

Figure 7-1: Demonstration of clicking a link to a named anchor

Figure 7-2: An example with the title attribute revealed by the mouse hover

Figure 7-3: A link example with underline-overline text decoration

Figure 7-4: A link with a right-aligned icon as a background image

Figure 7-5: A link with a dotted border

Chapter 8: More Lists

Figure 8-1: Method A as viewed unstyled in a browser

Figure 8-2: Method B as viewed in a browser

Figure 8-3: Comparison of the wrapping of lines in Methods A and B

Figure 8-4: An ordered list with Roman numerals

Figure 8-5: Method A as viewed in a typical browser

Figure 8-6: Method B as viewed in a typical browser

Figure 8-7: Method B with font-weight— bold; applied to <dt> elements

Figure 8-8: A definition list with a background image denoting the relationships

Figure 8-9: Our ordered list with numbers turned off with CSS

Figure 8-10: Five GIF images to be used for our ordered list

Figure 8-11: Our unordered list styled with custom number images

Chapter 9: Minimizing Markup

Figure 9-1: Unstyled rendering of the nested list markup

Figure 9-2: Adding style to the top-level list items

Figure 9-3: Custom bullets added to third-level items

Figure 9-4: Final styled site map, with dotted border applied to second-level lists

Figure 9-5: Expanded site map with nested lists and CSS

Chapter 10: Applying CSS

Figure 10-1: My personal site with CSS

Figure 10-2: The same page, without CSS, as an older browser may render it

Figure 10-3: Mozilla's alternate style sheet selection menu

Figure 10-4: Alternate style sheet being activated by the clicking of an icon

Chapter 11: Print Styles

Figure 11-1: SimpleBits as viewed in a browser with screen styles enabled

Figure 11-2: SimpleBits, print version

Chapter 12: CSS Layouts

Figure 12-1: Wireframe of the intended two-column layout

Figure 12-2: Adding style to the header and footer

Figure 12-3: Floating the #sidebar to the right of the content

Figure 12-4: A two-column layout

Figure 12-5: Floating the content, with the sidebar's background color showing through

Figure 12-6: Floated content with background color omitted

Figure 12-7: Two-column layout using positioning

Figure 12-8: Overlapping sidebar and footer

Figure 12-9: Footer with margin-right matching the content area

Figure 12-10: A flexible three-column layout using positioning

Figure 12-11: Correct calculation of the box model

Figure 12-12: IE5/Windows' incorrect calculation of width, padding, and borders

Figure 12-13: Columns of unequal length

Figure 12-14: tile.gif— A 2-pixel-tall background image, with widths allotted for columns

Figure 12-15: Tiled background image creates the colored columns.

Chapter 13: Styling Text

Figure 13-1: Heading and text as viewed by default in the browser

Figure 13-2: Default text with increased line height

Figure 13-3: Our example rendered with the Georgia typeface

Figure 13-4: Negative letter-spacing applied to our <h1>

Figure 13-5: Positive letter-spacing and italics applied

Figure 13-6: Drop caps example created with CSS

Figure 13-7: An example of justified text, using the text-align property

Figure 13-8: Centered <h1> using the text-align property

Figure 13-9: Capitalization of the heading using CSS

Figure 13-10: Our heading rendered in small caps

Figure 13-11: Indented paragraphs as a result of the text-indent property

Chapter 14: Image Replacement

Figure 14-1: Default rendering of our heading

Figure 14-2: fir.gif, the image we'll be using to replace the text

Figure 14-3: The results of using the Fahrner Image Replacement method

Figure 14-4: lir.gif, created in an image editor

Figure 14-5: phark.gif, the 26-pixel-tall image we'll use for replacement

Figure 14-6: logo_lofi.gif that unstyled viewers will see (lo-fi)

Figure 14-7: logo_corn.gif that CSS-enabled viewers will see (hi-fi)

Figure 14-8: Hyperlinked logo, with clickable area shown

Figure 14-9: Hi-fi logo for CSS-enabled browsers

Figure 14-10: Lo-fi logo for unstyled viewers

Figure 14-11: FastCompany.com's tabbed navigation, circa February 2004

Figure 14-12: A single image containing the three states

Figure 14-13: Resulting tabbed navigation with each of the three states demonstrated

Figure 14-14: Tab navigation with larger image set activated from an alternate style sheet

Chapter 15: Styling <body>

Figure 15-1: Example of a Fast Company "index page" with three columns

Figure 15-2: Example of a Fast Company "article page" with two columns

Figure 15-3: Horizontal navigation with shaped tabs

Figure 15-4: Tab selected by assigning an id to the <body> element

---