Professional CSS: Cascading Style Sheets for Web Design, Second Edition

Professional CSS: Cascading Style Sheets for Web Design, Second Edition

by Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard, Mark Trammell
Released May 2008
Publisher(s): Wrox
ISBN: 9780470177082

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Updated and revised to reflect changes to cascading style sheets (CSS) development procedures since the first edition was published, Professional CSS: Cascading Style Sheets for Web Design, 2nd Edition offers a hands-on look at designing standards-based, large-scale, professional-level CSS web sites. Understand designers' processes from start to finish and gain insight into how designers overcome a site's unique set of challenges and obstacles. Become comfortable with solving common problems, learn the best practices for using XHMTL with CSS, orchestrate a new look for a blog, tackle browser-compatibility issues and develop functional navigational structures.

Table of contents

  1. Copyright
  2. About the Authors
  3. Credits
  4. Acknowledgments
  5. Introduction
    1. Whom This Book Is For
    2. How This Book Is Structured
    3. Conventions
    4. Source Code
    5. Errata
    6. p2p.wrox.com
  6. 1. Best Practices for XHTML and CSS
    1. 1.1. Shoehorning Structure and Presentation Together
    2. 1.2. Learning to Love Your Markup
      1. 1.2.1. XHTML: The New Hotness
        1. 1.2.1.1. Beginning with the DOCTYPE Declaration
        2. 1.2.1.2. Keeping Your Markup Well Formed
        3. 1.2.1.3. Closing Every Element
        4. 1.2.1.4. Setting Elements and Attributes to Lowercase
        5. 1.2.1.5. Requiring a Value for Every Attribute
      2. 1.2.2. Abstracting Style from Structure
        1. 1.2.2.1. Avoiding Divitis and Classitis
        2. 1.2.2.2. Moving toward Well-Meaning Markup
        3. 1.2.2.3. Familiarizing Yourself with Other Markup Elements
          1. 1.2.2.3.1. Better Know Headers
          2. 1.2.2.3.2. Better Know Paragraphs
          3. 1.2.2.3.3. Better Know Unordered Lists
        4. 1.2.2.4. Take Stock of Your Content, Not Your Graphics
    3. 1.3. CSS: Adding a Layer of Style
      1. 1.3.1. Better Know Selectors
        1. 1.3.1.1. Type Selectors
        2. 1.3.1.2. The Universal Selector
        3. 1.3.1.3. Descendant Selectors
        4. 1.3.1.4. Class Selectors
        5. 1.3.1.5. id Selectors
      2. 1.3.2. Other Selectors
        1. 1.3.2.1. Child Selectors
        2. 1.3.2.2. Attribute Selectors
      3. 1.3.3. Combining Multiple Declarations
      4. 1.3.4. Grouping Selectors
      5. 1.3.5. Indulging in Inheritance
        1. 1.3.5.1. Examining Element Hierarchy
        2. 1.3.5.2. Overriding Inheritance
      6. 1.3.6. Putting It All into Action
    4. 1.4. Understanding the Cascade
      1. 1.4.1. Discovering Style's Origin
      2. 1.4.2. Sorting by Specificity
      3. 1.4.3. Sorting by Order
    5. 1.5. Putting Theory into Practice
      1. 1.5.1. Building to a Reliable Browser
      2. 1.5.2. Rationalizing the Need for Hacks
        1. 1.5.2.1. The Bug
        2. 1.5.2.2. The Solution
        3. 1.5.2.3. The Road Is Long
          1. 1.5.2.3.1. CSS-Discuss
          2. 1.5.2.3.2. Position Is Everything
      3. 1.5.3. The Problem with Hacks
      4. 1.5.4. Hacking Artfully for Fun and Profit
    6. 1.6. Summary
  7. 2. Google's Blogger.com: Rollovers and Design Touches
    1. 2.1. Interviewing the Designer
    2. 2.2. CSS-Enabled Rollovers
      1. 2.2.1. Changing the Color and Background Color of Links (Simple)
        1. 2.2.1.1. The XHTML
        2. 2.2.1.2. The CSS
      2. 2.2.2. Changing the Color and Background Color of Links (Complex)
        1. 2.2.2.1. The XHTML
        2. 2.2.2.2. The CSS
        3. 2.2.2.3. The Images
        4. 2.2.2.4. What Does It All Mean?
      3. 2.2.3. Changing the Background Color of Table Rows
        1. 2.2.3.1. The XHTML
        2. 2.2.3.2. The CSS
        3. 2.2.3.3. What Does It All Mean?
      4. 2.2.4. Changing the Color of Text
        1. 2.2.4.1. The XHTML
        2. 2.2.4.2. The CSS
        3. 2.2.4.3. Images
        4. 2.2.4.4. What Does It All Mean?
        5. 2.2.4.5. Dealing with Internet Explorer
      5. 2.2.5. Changing the Background Position on Links
        1. 2.2.5.1. Making Rollovers from Embedded Images
        2. 2.2.5.2. The XHTML
        3. 2.2.5.3. The CSS
        4. 2.2.5.4. The Images
        5. 2.2.5.5. What Does It All Mean?
        6. 2.2.5.6. Dealing with Internet Explorer
    3. 2.3. Summary
  8. 3. The Classic U.S. PGA Championship Web Site
    1. 3.1. Developing the Drop-Shadow Effect
      1. 3.1.1. Creating the Illusion
      2. 3.1.2. Adding Extra Realism
    2. 3.2. Creating CSS Drop-Down Menus
      1. 3.2.1. Customizing the Positioning of Drop-Down Menus
      2. 3.2.2. Customization: Styling the Drop-Down Menus
        1. 3.2.2.1. Important Caveat
        2. 3.2.2.2. Understanding Usage
        3. 3.2.2.3. The Bottom Line
    3. 3.3. Engineering Web Standards–Compliant Flash Embedding
      1. 3.3.1. Using the Flash Satay Method
      2. 3.3.2. Writing the object/embed Tags Using JavaScript
      3. 3.3.3. Knowing the SWFObject
    4. 3.4. Summary
  9. 4. The University of Florida's UFL.edu
    1. 4.1. Looking Back at UF's First Web Site
      1. 4.1.1. Reflecting on Its Revisions
      2. 4.1.2. Examining the Current Site
    2. 4.2. Defining the Site
      1. 4.2.1. Building the Team
      2. 4.2.2. Starting with User Research
      3. 4.2.3. Examining Ourselves
      4. 4.2.4. Defining Technical Specs
        1. 4.2.4.1. Utilizing Web Standards
        2. 4.2.4.2. Incorporating Accessibility
    3. 4.3. Creating a Main Navigational Structure
      1. 4.3.1. The XHTML
        1. 4.3.1.1. Unordered Lists
        2. 4.3.1.2. Nested Unordered Lists
        3. 4.3.1.3. Weighting for Semantics
    4. 4.4.
      1. 4.4.1. The CSS
      2. 4.4.2. The Images
      3. 4.4.3. Brick by Brick
        1. 4.4.3.1. Building the Box
        2. 4.4.3.2. Styling the Section Headers
        3. 4.4.3.3. Styling the Lists
    5. 4.5. Making the Supplementary Navigation
      1. 4.5.1. The XHTML
        1. 4.5.1.1. Utility Navigation
        2. 4.5.1.2. Role-Based Navigation
        3. 4.5.1.3. Wrapping the Two Together
    6. 4.6.
      1. 4.6.1. The CSS
        1. 4.6.1.1. Styling the Supplementary Navigation
        2. 4.6.1.2. Styling the Utilities
        3. 4.6.1.3. That Tricky Box Model
        4. 4.6.1.4. Styling the Roles
        5. 4.6.1.5. The Final Outcome
    7. 4.7. Revisiting Flash Embedding
      1. 4.7.1. Back to Flash Satay
      2. 4.7.2. Server-Side Detecting with Flash Satay
        1. 4.7.2.1. Apache and the BrowserMatch Directive
        2. 4.7.2.2. Drawbacks and Barriers to Flash Satay with Server-Side Detection
    8. 4.8. Looking for Missteps
      1. 4.8.1. Leading Only by Example
      2. 4.8.2. "Force of Habit" or "Who Moved My Input Field?"
    9. 4.9. Summary
  10. 5. Stuff and Nonsense Ltd.: Strategies for CSS Switching
    1. 5.1. Laying the Foundation
    2. 5.2. CSS Switching
    3. 5.3. The Mechanics: How It's Supposed to Work
      1. 5.3.1. Persistent Style Sheets
      2. 5.3.2. Preferred Style Sheets
      3. 5.3.3. Alternate Style Sheets
      4. 5.3.4. Another Solution You (Almost) Can't Quite Use
    4. 5.4. The Reality: How It Can Work Today
      1. 5.4.1. Jumping on the JavaScript Bandwagon
      2. 5.4.2. Gathering Requirements
      3. 5.4.3. Building the Switching Function
      4. 5.4.4. Baking a JavaScript Cookie
      5. 5.4.5. Down with PHP
      6. 5.4.6. Creating the Script
      7. 5.4.7. Eating the Cookie
    5. 5.5. CSS beyond the Browser
      1. 5.5.1. Media Types: Let the Healing Begin
      2. 5.5.2. The Problem with Choice
    6. 5.6. Stuff and Nonsense: Building a Better Switcher
    7. 5.7. Meet the Designer: Andy Clarke
    8. 5.8. Summary
  11. 6. Adventures of CindyLi.com: Blog Modifications
    1. 6.1. Blogs
    2. 6.2. CSS: Cindy Li Starts to Blog
    3. 6.3. Design Elements
      1. 6.3.1. Creating a Layout
      2. 6.3.2. Laying Out the Design
    4. 6.4. Creating the Site
      1. 6.4.1. Designing the Navigation Bar
        1. 6.4.1.1. Sizing
        2. 6.4.1.2. Coloring
        3. 6.4.1.3. Text
      2. 6.4.2. Making the Rollover Graphics
      3. 6.4.3. Setting Up the Navigation Markup and CSS
      4. 6.4.4. Integrating the Rollovers
    5. 6.5. Setting the Speech Bubble
      1. 6.5.1. Coding the Speech Bubble
      2. 6.5.2. Reapplying the Effect
      3. 6.5.3. Putting on the Flickr Badge
    6. 6.6. Check Box Styling
    7. 6.7. Summary
  12. 7. AIGA Cincinnati: HTML Email Templates
    1. 7.1. Dealing with HTML Email
    2. 7.2. Producing the Template
      1. 7.2.1. Printing the Design
      2. 7.2.2. Creating the HTML Table Layout
      3. 7.2.3. Adjusting the Design
      4. 7.2.4. Exploring the Effects of CSS Rules on an HTML Email Template
    3. 7.3. Embedding Styles
    4. 7.4. Using Preflight for HTML Email
    5. 7.5. Summary
  13. 8. Professional CSS Book Site: Using Transparent PNGs
    1. 8.1. PNGs and Browser Support
      1. 8.1.1. Image Filter Workaround for Using PNGs with IE6
      2. 8.1.2. HTC Script Workaround for Using PNGs with IE6
      3. 8.1.3. Color Issues with PNGs
    2. 8.2. Using Alpha-Transparency
      1. 8.2.1. Better Shadows
      2. 8.2.2. Using Color Shades
    3. 8.3. Summary
  14. 9. Building CSS Layouts
    1. 9.1. On Grids and Layouts
    2. 9.2. Doing What Print Can't
    3. 9.3. CSS Positioning: The Fundamentals
      1. 9.3.1. Absolutely Fabulous Positioning
      2. 9.3.2. Positioning That's Absolutely Relative
    4. 9.4. Building Three Columns: Laying the Foundation
      1. 9.4.1. Writing the XHTML: From Mockup to Markup
      2. 9.4.2. A Layer of Style
        1. 9.4.2.1. Get Your Offset On: Introducing the Positioning Rules
        2. 9.4.2.2. Remembering to Keep It Absolutely Relative
    5. 9.5.
      1. 9.5.1. Battling Browser Bugs
        1. 9.5.1.1. Macintosh Internet Explorer 5
        2. 9.5.1.2. Windows Internet Explorer 5.x+
    6. 9.6. Setting Some Boundaries: The max-width Property
    7. 9.7. Summary
  15. A. HTML 4.01 Elements
  16. B. Rules for HTML-to-XHTML Conversion
    1. B.1. The XML Declaration
    2. B.2. Picking Your Comfort Level
    3. B.3. Rules for XHTML
      1. B.3.1. Don't Forget the Namespace Attribute
      2. B.3.2. Quoting Attribute Values
      3. B.3.3. No Attribute Minimization
      4. B.3.4. Terminating Empty Elements
      5. B.3.5. Cleaning Nests
      6. B.3.6. XHTML with CSS and JavaScript Files
      7. B.3.7. Lowercase Element and Attribute Names
      8. B.3.8. Introduce ID When Using name
      9. B.3.9. Encode Ampersands
      10. B.3.10. When in Doubt, Validate
  17. C. CSS 2.1 Properties
  18. D. CSS Troubleshooting Guide
    1. D.1. Validation
      1. D.1.1. HTML
      2. D.1.2. CSS
    2. D.2. Manipulating the Elements
      1. D.2.1. Zeroing Out the Padding and Margins
      2. D.2.2. Applying Color to Borders and Backgrounds
      3. D.2.3. Placing Variations in Property Values
      4. D.2.4. Playing Hide and Seek
      5. D.2.5. Validating Again
    3. D.3. Bringing in Outside Help
      1. D.3.1. Web Site Resources
        1. D.3.1.1. positioniseverything.net
        2. D.3.1.2. Web Developer Toolbar
        3. D.3.1.3. Firebug
    4. D.4.
      1. D.4.1. Mailing Lists
        1. D.4.1.1. css-discuss
        2. D.4.1.2. Babble List

Product information

  • Title: Professional CSS: Cascading Style Sheets for Web Design, Second Edition
  • Author(s): Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard, Mark Trammell
  • Release date: May 2008
  • Publisher(s): Wrox
  • ISBN: 9780470177082