List of Figures

Chapter 1: Understanding Structured Markup

Figure 1.1: eBay's Home Page with all table borders turned on
Figure 1.2: Document tree with parent, child, and leaf nodes
Figure 1.3: The colors in this page are all generated using HTML color attributes
Figure 1.4:
Figure 1.5: .This early web page still looks great because of its background.
Figure 1.6: HTML defines the borders, padding, and spacing of page elements.
Figure 1.7:
Figure 1.8: IE's marquee tag-not only proprietary, but annoying, too.
Figure 1.9: A portion of the HTML 4.01 Transitional DTD as seen in the Opera browser
Figure 1.10: Studying logical structure, unstyled.
Figure 1.11: The same document, styled.
Figure 1.12: Unstyled markup
Figure 1.13: The styled entry at Molly.Com

Chapter 2: Learning CSS Theory

Figure 2.1: Using inline style
Figure 2.2: Previewing the print style
Figure 2.3: The @import style is ignored in this noncompliant browser.
Figure 2.4: Resolving conflicts within the cascade.
Figure 2.5: The child element inherits from the parent.
Figure 2.6: The box model

Chapter 3: Writing CSS

Figure 3.1: The unstyled content
Figure 3.2: Examining a portion of the document tree
Figure 3.3: A portion of the unstyled content within a browser window
Figure 3.4: Examining the styled margins
Figure 3.5:
Figure 3.6: Using the element box to assign interesting style to a header
Figure 3.7: Comparing the styles for h1 and h2 headers
Figure 3.8: A portion of the document as it looks with the current style sheet in place
Figure 3.9: Using pseudo classes to apply a hover style to a link
Figure 3.10: Using classes to apply style
Figure 3.11: The final style sheet as applied to the document
Figure 3.12: The W3C's CCS validator
Figure 3.13:

Chapter 4: CSS Typography

Figure 4.1: The type on the WaSP home page is easy to read and therefore very functional
Figure 4.2: While still readable, the type on this page is used for aesthetics, too.
Figure 4.3:
Figure 4.4: Examples of font styles
Figure 4.5: Examining font variants
Figure 4.6:
Figure 4.7: Condensed (top) and expanding (bottom) examples using non-CSS glyphs
Figure 4.8: Sizing type from baseline to baseline
Figure 4.9: Exploring font families as defined in CSS
Figure 4.10:
Figure 4.11:
Figure 4.12: Family and sizing used to style headers and paragraphs
Figure 4.13: Using font-style and font-variant to create styles for heading
Figure 4.14: Using the text-indent property, you can indent the first line of text in each paragraph.
Figure 4.15: Using text-align
Figure 4.16:
Figure 4.17: Using text-transform on headings to control capitalization.
Figure 4.18: Using line-height values

Chapter 5: Color, Backgrounds, and Borders

Figure 5.1: The familiar color wheel
Figure 5.2: CMYK color
Figure 5.3: RGB color
Figure 5.4: The 216 colors of the web-safe palette
Figure 5.5: The simply styled document
Figure 5.6: Adding color using a hexadecimal value
Figure 5.7: Using shorthand to apply color to headings
Figure 5.8: using specific RGB values
Figure 5.9: Every means of specifying color is used to create the colors within this page
Figure 5.10: Adding a few background colors starts to perk this page up
Figure 5.11: This small image tiles to fill the canvas, creating a seamless effect.
Figure 5.12: Adding the background to the document
Figure 5.13: Adding a background to only the paragraph elements
Figure 5.14:
Figure 5.15: Repeating the background along the y-axis only
Figure 5.16: Here, the background doesn't repeat
Figure 5.17: Adding a background to an element
Figure 5.18: Positioning a background using a percentage
Figure 5.19: using pixel values to position the background
Figure 5.20: Positioning backgrounds using keywords
Figure 5.21: Using paired keywords for background positioning
Figure 5.22: Visible border options
Figure 5.23: Creating border styles
Figure 5.24: Adding color, style, and width to borders

Chapter 6: Working with CSS Layouts

Figure 6.1: Box offset: top
Figure 6.2: Box offset: bottom
Figure 6.3: : Box offset: right
Figure 6.4: Box offset: left
Figure 6.5: An absolutely positioned box
Figure 6.6: Floating images
Figure 6.7: Flowing text around a floated element
Figure 6.8: Demonstrating the use of padding for white space
Figure 6.9: Floating can create a ragged-right margin
Figure 6.10: Justifying text to avoid a ragged right
Figure 6.11: Clearing to both sides of a float
Figure 6.12: Visualizing boxes along the z-axis
Figure 6.13: A three-column fixed and fluid layout
Figure 6.14: An example of a two-column layout using float
Figure 6.15: Anatomy of a correctly interpreted box
Figure 6.16: Web page with CSS layout styles
Figure 6.17:

Chapter 7: Reconstructing a Table-Based Site

Figure 7.1: The original page
Figure 7.2: Examining the nested, complex layout tables
Figure 7.3: Even with all the font elements gone, the page looks basically the same
Figure 7.4: With the span element and related attributes gone, changes to fonts (A) appear.
Figure 7.5: Further deconstruction occurs at this stage.
Figure 7.6:
Figure 7.7: The re-engineered layout using simple tables with no nests
Figure 7.8:
Figure 7.9: Applying temporary styles to visualize the layout effectively
Figure 7.10: Using backgrounds to denote areas of the page
Figure 7.11: Combining both temporary style sheets for border and field shading
Figure 7.12: The left navigation bar (A) is now effectively styled.
Figure 7.13: A link within the navigation bar
Figure 7.14: A link as the mouse passes over it
Figure 7.15:
Figure 7.16: The top of the speaker list
Figure 7.17: The expert list is recreated with some compromise to text quality and size.
Figure 7.18:
Figure 7.19: The document tree for the #expertlist section
Figure 7.20: The footer remains unstlyed, despite the look of the rest of the document.
Figure 7.21: The styled footer
Figure 7.22: The completed, simplified table and CSS design
Figure 7.23: Using floats for laying out the document CSS
Figure 7.24: Using CSS positioning for laying out the document

Chapter 8: CSS Design Gallery

Figure 8.1: The home page of WOW's Learning Center
Figure 8.2: The Career Center at WOW's Learning Center
Figure 8.3: The Business and Law section, with an appropriately austere color scheme
Figure 8.4: The Design and Usability page uses a bright, lively color scheme
Figure 8.5:
Figure 8.6: The BlueRobot home page is a simple but attractive CSS design.
Figure 8.7:
Figure 8.8: Bowman uses lighter colors for the article page
Figure 8.9: For the portfolio section, an artsy black is used
Figure 8.10: A combination of subtle grays and blues enhance the informatioin page
Figure 8.11: Pirouz opts for a sophisticated and consistent look.
Figure 8.12: Here, only two columns within the content area are used.
Figure 8.13: Only one central column in use
Figure 8.14: A portion of the complex spiral page
Figure 8.15: Kat's navigation link, normal state
Figure 8.16: Kat's navigation link, mouseover state
Figure 8.17: Navigation links, normal state
Figure 8.18: Navigation links, mouseover, with text based pop-ups
Figure 8.19: Navigation links, mouseover, with image-based pop-ups
Figure 8.20: The menus on this page look normal and innocent.
Figure 8.21: CSS-driven hierarchical menus

Chapter 9: Wired News: A Visual Tour

Figure 9.1: Wired News: Home Page
Figure 9.2: Nonstyled pages are still readable and useful (A).
Figure 9.3: Text sizing option
Figure 9.4: Normal text size
Figure 9.5: Large text size
Figure 9.6: Examining the style schematic for Wired News
Figure 9.7: Grayscale palette
Figure 9.8: Viewing the grayscale sample
Figure 9.9: Monday color palette
Figure 9.10: Monday color schemes
Figure 9.11: Tuesday color palette
Figure 9.12: Tuesday color scheme
Figure 9.13: Wednesday color palette
Figure 9.14: Wednesday color scheme
Figure 9.15: Thursday color palette
Figure 9.16: Thursday color scheme
Figure 9.17: Friday color palette
Figure 9.18: Friday color scheme
Figure 9.19: Weekend color palette
Figure 9.20: Weekend color scheme
Figure 9.21: Alternate color palette #1
Figure 9.22: Alternate scheme #1:
Figure 9.23: Alternate color palette #2
Figure 9.24: Alternate scheme #2
Figure 9.25: PDA style, home page
Figure 9.26: PDA style, business page
Figure 9.27: Color style, home page
Figure 9.28: Color style, business page