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.

By bringing all of the latest tips, tricks, and techniques together in one handy reference, this book demystifies the secrets of CSS and makes the journey to CSS mastery as simple and painless as possible. While most books concentrate on basic skills, this one is different, assuming that you already know the basics and why you should be using CSS in your work, and concentrating mainly on advanced techniques.

It begins with a brief recap of CSS fundamentals such as the importance of meaningful markup, how to structure and maintain your code, and how the CSS layout model really works.

With the basics out of the way, each subsequent chapter details a particular aspect of CSS-based design. Through a series of easy-to-follow tutorials, you will learn practical CSS techniques you can immediately start using in your daily work. Browser inconsistencies are the thorn in most CSS developers' sides, so we have dedicated two whole chapters to CSS hacks, filters, and bug fixing, as well as looking at image replacement; professional link, form, and list styling; pure CSS layouts; and much more.

All of these techniques are then put into practice in two beautifully designed case studies, written by two of the world's best CSS designers, Simon Collison and Cameron Moll.

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
    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

Product information

  • Title: CSS Mastery: Advanced Web Standards Solutions
  • Author(s):
  • Release date: February 2006
  • Publisher(s): Apress
  • ISBN: 9781590596142