You are previewing CSS Mastery: Advanced Web Standards Solutions.
O'Reilly logo
CSS Mastery: Advanced Web Standards Solutions

Book Description

This book is your indispensable guide to cutting-edge CSS developmentā€“all you need to work your way up to CSS professional.

While CSS is a relatively simple technology to learn, it is a difficult one to master. When you first start developing sites using CSS, you will come across all kinds of infuriating browser bugs and inconsistencies. It sometimes feels like there are a million and one different techniques to master, spread across a bewildering array of websites. The range of possibilities seems endless and makes for a steep and daunting learning curve.

Table of Contents

  1. Foreword
  2. About the Authors
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
  6. 1. Setting the Foundations
    1. Structuring your code
      1. Use meaningful markup
        1. IDs and class names
        2. Divs and spans
      2. Document types, DOCTYPE switching, and browser modes
      3. Validation
        1. Browser modes
        2. DOCTYPE switching
    2. Getting your styles to hit the target
      1. Common selectors
        1. Pseudo-classes
      2. The universal selector
      3. Advanced selectors
        1. Child and adjacent sibling selectors
        2. Attribute selectors
      4. The cascade and specificity
        1. Specificity
        2. Using specificity in your stylesheets
        3. Adding a class or an ID to the body tag
      5. Inheritance
    3. Planning, organizing, and maintaining your stylesheets
      1. Applying styles to your document
      2. Commenting your code
        1. Adding structural comments
        2. Note to self
        3. Removing comments and optimizing your stylesheets
      3. Style guides
      4. Organizing your stylesheets for easy maintenance
    4. Summary
  7. 2. Visual Formatting Model Recap
    1. Box model recap
      1. IE/Win and the box model
      2. Margin collapsing
    2. Positioning recap
      1. The visual formatting model
      2. Relative positioning
      3. Absolute positioning
        1. Fixed positioning
      4. Floating
        1. Line boxes and clearing
    3. Summary
  8. 3. Background Images and Image Replacement
    1. Background image basics
    2. Rounded-corner boxes
      1. Fixed-width rounded-corner boxes
        1. Flexible rounded-corner box
      2. Mountaintop corners
    3. Drop shadows
      1. Easy CSS drop shadows
      2. Drop shadows a la Clagnut
      3. Fuzzy shadows
      4. Onion skinned drop shadows
    4. Image replacement
      1. Fahrner Image Replacement (FIR)
      2. Phark
      3. Gilder/Levin method
      4. Inman Flash Replacement (IFR) and Scalable Inman Flash Replacement (sIFR)
    5. Summary
  9. 4. Styling Links
    1. Simple link styling
    2. Fun with underlines
      1. Fancy link underlines
    3. Highlighting different types of link
      1. Highlighting downloadable documents and feeds
    4. Creating buttons and rollovers
      1. Simple rollovers
      2. Rollovers with images
      3. Pixy-style rollovers
    5. Visited-link styles
    6. Pure CSS tooltips
    7. Summary
  10. 5. Styling Lists and Creating Nav Bars
    1. Basic list styling
    2. Creating a vertical nav bar
    3. Highlighting the current page in a nav bar
    4. Creating a horizontal nav bar
    5. Simplified "sliding doors" tabbed navigation
    6. CSS image maps
      1. flickr-style image maps
    7. Remote rollovers
    8. A short note about definition lists
    9. Summary
  11. 6. Styling Forms and Data Tables
    1. Styling data tables
      1. Table-specific elements
        1. summary and caption
        2. thead, tbody, and tfoot
        3. col and colgroups
      2. Data table markup
      3. Styling the table
      4. Adding the visual style
      5. Added extras
    2. Simple form layout
      1. Useful form elements
        1. Form labels
      2. The basic layout
      3. Other elements
      4. Embellishments
        1. Required fields
    3. Complicated form layout
      1. Accessible date input
      2. Multicolumn check boxes
      3. Form feedback
    4. Summary
  12. 7. Layout
    1. Centering a design
      1. Centering a design using auto margins
      2. Centering a design using positioning and negative margins
    2. Float-based layouts
      1. Two-column floated layout
      2. Three-column floated layout
    3. Fixed-width, liquid, and elastic layout
      1. Liquid layouts
      2. Elastic layouts
      3. Elastic-liquid hybrid
      4. Liquid and elastic images
    4. Faux columns
    5. Summary
  13. 8. Hacks and Filters
    1. An introduction to hacks and filters
      1. A warning about hacks and filters
      2. Using hacks sensibly
    2. Filtering separate stylesheets
      1. Internet Explorer conditional comments
      2. Band pass filters
    3. Filtering individual rules and declarations
      1. The child selector hack
      2. Attribute selector hack
      3. The star HTML hack
      4. IE/Mac commented backslash hack
      5. The escaped property hack
      6. Tantek's box model hack
      7. The modified simplified box model hack
      8. The !important and underscore hacks
      9. The Owen hack
    4. Summary
  14. 9. Bugs and Bug Fixing
    1. Bug hunting
      1. Common CSS problems
        1. Problems with specificity and sort order
        2. Problems with margin collapsing
    2. Bug hunting basics
      1. Isolate the problem
      2. Creating a minimal test case
      3. Fix the problem, not the symptoms
      4. Ask for help
    3. Having "layout"
      1. What is "layout"?
      2. What effect does layout have?
    4. Common bugs and their fixes
      1. Double-margin float bug
      2. Three-pixel text jog bug
      3. IE 6 duplicate character bug
      4. IE 6 peek-a-boo bug
      5. Absolute positioning in a relative container
      6. Stop picking on Internet Explorer
    5. Summary
  15. A. CASE STUDY 1 MORE THAN DOODLES
    1. About this case study
    2. Controlling content area with descendant selectors
      1. The XHTML
        1. A note about naming conventions
      2. Three-column layout
      3. Two-column layout
      4. One-column layout
      5. Removing unwanted columns
    3. Floating the columns
      1. The calculations
      2. Floating the columns in the right place
    4. Highlighting the current page based on the body class
    5. Drop-in boxes for columns
    6. Right-angled or rounded cornersyou decide
      1. Flat, right-angled corners
      2. So, let's prepare for something special
    7. Transparent custom corners and borders
      1. The images
      2. The CSS
    8. Combining classes for targeted actions
    9. Image classes and exceptions
      1. Default images
      2. Owned images
      3. Larger images
    10. Dealing with links
      1. Understanding the sidebar links
      2. Checked-off visited links
        1. LAHV, not LVHA
      3. Highlighting external links
    11. Floated drop shadows (gallery)
      1. Casting the shadows
      2. Floating the images
    12. Summary
  16. B. CASE STUDY 2 Tuscany Luxury Resorts
    1. About this case study
    2. The fluid layout
      1. Body and container
      2. Masthead
      3. Content and sidebar
        1. Fluid properties
      4. Footer
      5. Resolving fluid layout issues
    3. Aligning elements using absolute positioning
      1. Location properties (top, bottom, left, right)
      2. Stacking order (z-index)
    4. Background image techniques
      1. Dividing the top in three
      2. "Bulletproofing" a background
    5. Image replacement
      1. Logo image replacement
      2. Initial cap image replacement
    6. Fluid imagery
      1. Coding a fluid image
    7. Using a single list item for multiple elements
      1. Coding the menu
    8. Summary