You are previewing CSS: The Missing Manual.
O'Reilly logo
CSS: The Missing Manual

Book Description

Web site design has grown up. Unlike the old days, when designers cobbled together chunky HTML, bandwidth-hogging graphics, and a prayer to make their sites look good, Cascading Style Sheets (CSS) now lets your inner designer come out and play. But CSS isn't just a tool to pretty up your site; it's a reliable method for handling all kinds of presentation--from fonts and colors to page layout. CSS: The Missing Manual clearly explains this powerful design language and how you can use it to build sparklingly new Web sites or refurbish old sites that are ready for an upgrade.

Like their counterparts in print page-layout programs, style sheets allow designers to apply typographic styles, graphic enhancements, and precise layout instructions to elements on a Web page. Unfortunately, due to CSS's complexity and the many challenges of building pages that work in all Web browsers, most Web authors treat CSS as a kind of window-dressing to spruce up the appearance of their sites. Integrating CSS with a site's underlying HTML is hard work, and often frustratingly complicated. As a result many of the most powerful features of CSS are left untapped. With this book, beginners and Web-building veterans alike can learn how to navigate the ins-and-outs of CSS and take complete control over their Web pages' appearance.

Author David McFarland (the bestselling author of O'Reilly's Dreamweaver: The Missing Manual) combines crystal-clear explanations, real-world examples, a dash of humor, and dozens of step-by-step tutorials to show you ways to design sites with CSS that work consistently across browsers. You'll learn how to:

  • Create HTML that's simpler, uses less code, is search-engine friendly, and works well with CSS

  • Style text by changing fonts, colors, font sizes, and adding borders

  • Turn simple HTML links into complex and attractive navigation bars-complete with CSS-only rollover effects that add interactivity to your Web pages

  • Style images to create effective photo galleries and special effects like CSS-based drop shadows

  • Make HTML forms look great without a lot of messy HTML

  • Overcome the most hair-pulling browser bugs so your Web pages work consistently from browser to browser

  • Create complex layouts using CSS, including multi-column designs that don't require using old techniques like HTML tables

  • Style Web pages for printing

Unlike competing books, this Missing Manual doesn't assume that everyone in the world only surfs the Web with Microsoft's Internet Explorer; our book provides support for all major Web browsers and is one of the first books to thoroughly document the newly expanded CSS support in IE7, currently in beta release.

Want to learn how to turn humdrum Web sites into destinations that will capture viewers and keep them longer? Pick up CSS: The Missing Manual and learn the real magic of this tool.

Table of Contents

  1. CSS: The Missing Manual
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. A Note Regarding Supplemental Files
    3. The Missing Credits
      1. About the Author
      2. About the Creative Team
      3. Acknowledgements
      4. The Missing Manual Series
    4. Introduction
      1. How CSS Works
      2. The Benefits of CSS
      3. What You Need to Know
      4. HTML: The Barebones Structure
        1. How HTML Tags Work
      5. XHTML: HTML for the New Era
        1. What the Doctype Does
      6. Software for CSS
        1. Free Programs
        2. Commercial Software
      7. About This Book
        1. About the Outline
        2. Living Examples
        3. About MissingManuals.com
      8. The Very Basics
        1. About → These → Arrows
        2. Safari® Enabled
    5. I. CSS Basics
      1. 1. Rethinking HTML for CSS
        1. 1.1. HTML: Past and Present
          1. 1.1.1. HTML Past: Whatever Looked Good
          2. 1.1.2. HTML Present: Scaffolding for CSS
        2. 1.2. Writing HTML for CSS
          1. 1.2.1. Think Structure
          2. 1.2.2. Two New HTML Tags to Learn
          3. 1.2.3. HTML to Forget
          4. 1.2.4. Tips to Guide Your Way
        3. 1.3. The Importance of the Doctype
      2. 2. Creating Styles and Style Sheets
        1. 2.1. Anatomy of a Style
        2. 2.2. Understanding Style Sheets
          1. 2.2.1. Internal or External—How to Choose
        3. 2.3. Internal Style Sheets
        4. 2.4. External Style Sheets
          1. 2.4.1. Linking a Style Sheet Using HTML
          2. 2.4.2. Linking a Style Sheet Using CSS
        5. 2.5. Tutorial: Creating Your First Styles
          1. 2.5.1. Creating an Inline Style
          2. 2.5.2. Creating an Internal Style Sheet
          3. 2.5.3. Creating an External Style Sheet
      3. 3. Selector Basics: Identifying What to Style
        1. 3.1. Tag Selectors: Page-Wide Styling
        2. 3.2. Class Selectors: Pinpoint Control
        3. 3.3. ID Selectors: Specific Page Elements
        4. 3.4. Styling Tags Within Tags
          1. 3.4.1. The HTML Family Tree
          2. 3.4.2. Building Descendent Selectors
        5. 3.5. Styling Groups of Tags
          1. 3.5.1. Constructing Group Selectors
          2. 3.5.2. The Universal Selector (Asterisk)
        6. 3.6. Pseudo-Classes and Pseudo-Elements
          1. 3.6.1. Styles for Links
          2. 3.6.2. More Pseudo-Classes and -Elements
            1. 3.6.2.1. :before
            2. 3.6.2.2. :after
            3. 3.6.2.3. :first-child
            4. 3.6.2.4. :focus
        7. 3.7. Advanced Selectors
          1. 3.7.1. Child Selectors
          2. 3.7.2. Adjacent Siblings
          3. 3.7.3. Attribute Selectors
        8. 3.8. Tutorial: Selector Sampler
          1. 3.8.1. Creating a Group Selector
          2. 3.8.2. Creating and Applying a Class Selector
          3. 3.8.3. Creating and Applying an ID Selector
          4. 3.8.4. Creating a Descendent Selector
      4. 4. Saving Time with Inheritance
        1. 4.1. What Is Inheritance?
        2. 4.2. How Inheritance Streamlines Style Sheets
        3. 4.3. The Limits of Inheritance
        4. 4.4. Tutorial: Inheritance
          1. 4.4.1. A Basic Example: One Level of Inheritance
          2. 4.4.2. Using Inheritance to Restyle an Entire Page
          3. 4.4.3. Inheritance Inaction
      5. 5. Managing Multiple Styles: The Cascade
        1. 5.1. How Styles Cascade
          1. 5.1.1. Inherited Styles Accumulate
          2. 5.1.2. Nearest Ancestor Wins
          3. 5.1.3. The Directly Applied Style Wins
          4. 5.1.4. One Tag, Many Styles
        2. 5.2. Specificity: Which Style Wins
          1. 5.2.1. The Tiebreaker: Last Style Wins
        3. 5.3. Controlling the Cascade
          1. 5.3.1. Changing the Specificity
          2. 5.3.2. Selective Overriding
        4. 5.4. Tutorial: The Cascade in Action
          1. 5.4.1. Creating a Hybrid Style
          2. 5.4.2. Combining Cascading and Inheritance
          3. 5.4.3. Overcoming Conflicts
    6. II. Applied CSS
      1. 6. Formatting Text
        1. 6.1. Formatting Text
          1. 6.1.1. Choosing a Font
          2. 6.1.2. Adding Color to Text
            1. 6.1.2.1. Hexadecimal color notation
            2. 6.1.2.2. RGB
        2. 6.2. Changing Font Size
          1. 6.2.1. Using Pixels
          2. 6.2.2. Using Keywords, Percentages, and Ems
            1. 6.2.2.1. Keywords
            2. 6.2.2.2. Percentages
            3. 6.2.2.3. Ems
        3. 6.3. Formatting Words and Letters
          1. 6.3.1. Italicizing and Bolding
          2. 6.3.2. Capitalizing
            1. 6.3.2.1. Small caps
          3. 6.3.3. Decorating
          4. 6.3.4. Letter and Word Spacing
        4. 6.4. Formatting Entire Paragraphs
          1. 6.4.1. Adjusting the Space Between Lines
            1. 6.4.1.1. Line spacing by pixel, em, or percentage
            2. 6.4.1.2. Line spacing by number
          2. 6.4.2. Aligning Text
          3. 6.4.3. Indenting the First Line and Removing Margins
            1. 6.4.3.1. First-line indents
            2. 6.4.3.2. Controlling margins between paragraphs
          4. 6.4.4. Formatting the First Letter or First Line of a Paragraph
        5. 6.5. Styling Lists
          1. 6.5.1. Types of Lists
          2. 6.5.2. Positioning Bullets and Numbers
          3. 6.5.3. Graphic Bullets
        6. 6.6. Tutorial: Text Formatting in Action
          1. 6.6.1. Setting Up the Page
          2. 6.6.2. Formatting the Headings and Paragraphs
          3. 6.6.3. Formatting Lists
          4. 6.6.4. Adding the Finishing Touches
      2. 7. Margins, Padding, and Borders
        1. 7.1. Understanding the Box Model
        2. 7.2. Control Space with Margins and Padding
          1. 7.2.1. Margin and Padding Shorthand
          2. 7.2.2. Colliding Margins
          3. 7.2.3. Removing Space with Negative Margins
          4. 7.2.4. Displaying Inline and Block-Level Boxes
        3. 7.3. Adding Borders
          1. 7.3.1. Border Property Shorthand
          2. 7.3.2. Formatting Individual Borders
        4. 7.4. Coloring the Background
        5. 7.5. Determining Height and Width
          1. 7.5.1. Calculating a Box's Actual Width and Height
          2. 7.5.2. Controlling the Tap with the Overflow Property
          3. 7.5.3. Fixing IE 5's Broken Box Model
        6. 7.6. Wrap Content with Floating Elements
          1. 7.6.1. Backgrounds, Borders, and Floats
          2. 7.6.2. Stopping the Float
        7. 7.7. Tutorial: Margins, Backgrounds, and Borders
          1. 7.7.1. Controlling Page Margins
          2. 7.7.2. Adjusting the Space Around Tags
          3. 7.7.3. Emphasizing Text with Backgrounds and Borders
          4. 7.7.4. Building a Sidebar
          5. 7.7.5. Fixing the Browser Bugs
          6. 7.7.6. Going Further
      3. 8. Adding Graphics to Web Pages
        1. 8.1. CSS and the <img> Tag
        2. 8.2. Background Images
        3. 8.3. Controlling Repetition
        4. 8.4. Positioning a Background Image
          1. 8.4.1. Keywords
          2. 8.4.2. Precise Values
          3. 8.4.3. Percentage Values
          4. 8.4.4. Fixing an Image in Place
        5. 8.5. Using Background Property Shorthand
        6. 8.6. Tutorial: Creating a Photo Gallery
          1. 8.6.1. Framing an Image
          2. 8.6.2. Adding a Caption
          3. 8.6.3. Building a Photo Gallery
          4. 8.6.4. Adding Drop Shadows
        7. 8.7. Tutorial: Using Background Images
          1. 8.7.1. Adding an Image to the Page Background
          2. 8.7.2. Replacing Borders with Graphics
          3. 8.7.3. Using Graphics for Bulleted Lists
          4. 8.7.4. Adding Rounded Corners to the Sidebar
          5. 8.7.5. Creating an External Style Sheet
      4. 9. Sprucing Up Your Site's Navigation
        1. 9.1. Selecting Which Links to Style
          1. 9.1.1. Understanding Link States
          2. 9.1.2. Targeting Particular Links
            1. 9.1.2.1. Grouping links with descendent selectors
        2. 9.2. Styling Links
          1. 9.2.1. Underlining Links
          2. 9.2.2. Creating a Button
          3. 9.2.3. Using Graphics
        3. 9.3. Building Navigation Bars
          1. 9.3.1. Using Unordered Lists
          2. 9.3.2. Vertical Navigation Bars
          3. 9.3.4. Horizontal Navigation Bars
            1. 9.3.4.1. Using display: inline
            2. 9.3.4.2. Using floats for horizontal navigation
        4. 9.4. Advanced Link Techniques
          1. 9.4.1. Big Clickable Buttons
          2. 9.4.2. CSS-Style Preloading Rollovers
          3. 9.4.3. Sliding Doors
        5. 9.5. Tutorial: Styling Links
          1. 9.5.1. Basic Link Formatting
          2. 9.5.2. Adding a Background Image to a Link
          3. 9.5.3. Highlighting External Links
          4. 9.5.4. Marking Visited Pages
          5. 9.5.5. Creating a Vertical Navigation Bar
          6. 9.5.6. Adding Rollovers and Creating "You Are Here" Links
          7. 9.5.7. Fixing the IE Bugs
          8. 9.5.8. From Vertical to Horizontal
      5. 10. Formatting Tables and Forms
        1. 10.1. Using Tables the Right Way
        2. 10.2. Styling Tables
          1. 10.2.1. Adding Padding
          2. 10.2.2. Adjusting Vertical and Horizontal Alignment
          3. 10.2.3. Creating Borders
          4. 10.2.4. Styling Rows and Columns
        3. 10.3. Styling Forms
          1. 10.3.1. HTML Form Elements
          2. 10.3.2. Laying Out Forms Using CSS
        4. 10.4. Tutorial: Styling a Table
        5. 10.5. Tutorial: Styling a Form
    7. III. CSS Page Layout
      1. 11. Building Float-Based Layouts
        1. 11.1. How CSS Layout Works
          1. 11.1.1. The Mighty <div> Tag
        2. 11.2. Types of Web Page Layouts
        3. 11.3. Float Layout Basics
        4. 11.4. Applying Floats to Your Layouts
          1. 11.4.1. Floating All Columns
          2. 11.4.2. Floats Within Floats
          3. 11.4.3. Using Negative Margins to Position Elements
        5. 11.5. Overcoming Float Problems
          1. 11.5.1. Clearing and Containing Floats
          2. 11.5.2. Creating Full-Height Columns
          3. 11.5.3. Preventing Float Drops
        6. 11.6. Handling Internet Explorer Bugs
          1. 11.6.1. Double-Margin Bug
          2. 11.6.2. 3-Pixel Gaps
          3. 11.6.3. Other IE Problems
        7. 11.7. Tutorial: Multiple Column Layouts
          1. 11.7.1. Structuring the HTML
          2. 11.7.2. Creating the Layout Styles
          3. 11.7.3. Adding Another Column
          4. 11.7.4. Adding a "Faux Column"
          5. 11.7.5. Fixing the Width
        8. 11.8. Tutorial: Negative Margin Layout
          1. 11.8.1. Centering a Layout
          2. 11.8.2. Floating the Columns
          3. 11.8.3. Final Adjustments
      2. 12. Positioning Elements on a Web Page
        1. 12.1. How Positioning Properties Work
          1. 12.1.1. Setting Positioning Values
          2. 12.1.2. When Absolute Positioning Is Relative
          3. 12.1.3. When (and Where) to Use Relative Positioning
          4. 12.1.4. Stacking Elements
          5. 12.1.5. Hiding Parts of a Page
        2. 12.2. Powerful Positioning Strategies
          1. 12.2.1. Positioning Within an Element
          2. 12.2.2. Breaking an Element Out of the Box
          3. 12.2.3. Using CSS Positioning for Page Layout
          4. 12.2.4. Creating CSS-Style Frames Using Fixed Positioning
        3. 12.3. Tutorial: Positioning Page Elements
          1. 12.3.1. Enhancing a Page Banner
          2. 12.3.2. Adding a Caption to a Photo
          3. 12.3.3. Laying Out the Page
    8. IV. Advanced CSS
      1. 13. CSS for the Printed Page
        1. 13.1. How Media Style Sheets Work
        2. 13.2. How to Add Media Style Sheets
          1. 13.2.1. Specifying the Media Type for an External Style Sheet
          2. 13.2.2. Specifying the Media Type Within a Style Sheet
        3. 13.3. Creating Print Style Sheets
          1. 13.3.1. Using !important to Override Onscreen Styling
          2. 13.3.2. Reworking Text Styles
          3. 13.3.3. Styling Backgrounds for Print
            1. 13.3.3.1. Removing background elements
            2. 13.3.3.2. Leaving background elements in
          4. 13.3.4. Hiding Unwanted Page Areas
          5. 13.3.5. Adding Page Breaks for Printing
        4. 13.4. Tutorial: Building a Print Style Sheet
          1. 13.4.1. Remove Unneeded Page Elements
          2. 13.4.2. Removing Backgrounds and Adjusting the Layout
          3. 13.4.3. Reformatting the Text
          4. 13.4.4. Displaying the Logo
          5. 13.4.5. Displaying URLs
      2. 14. Improving Your CSS Habits
        1. 14.1. Adding Comments
        2. 14.2. Organizing Styles and Style Sheets
          1. 14.2.1. Name Styles Clearly
          2. 14.2.2. Use Multiple Classes to Save Time
          3. 14.2.3. Organize Styles by Grouping
            1. 14.2.3.1. Using comments to separate style groups
          4. 14.2.4. Using Multiple Style Sheets
        3. 14.3. Eliminating Browser Style Interference
        4. 14.4. Using Descendent Selectors
          1. 14.4.1. Compartmentalize Your Pages
          2. 14.4.2. Identify the Body
        5. 14.5. Managing Internet Explorer Hacks
          1. 14.5.1. Design for Contemporary Browsers First
          2. 14.5.2. Isolate CSS for IE with Conditional Comments
            1. 14.5.2.1. Conditional comments and IE 7
            2. 14.5.2.2. Conditional comments and the cascade
    9. V. Appendixes
      1. A. CSS Property Reference
        1. A.1. CSS Values
          1. A.1.1. Colors
            1. A.1.1.1. Keywords
            2. A.1.1.2. RGB values
          2. A.2.1. Lengths and Sizes
            1. A.1.2.1. Pixels
            2. A.1.2.2. Ems
            3. A.1.2.3. Percentages
          3. A.1.3. Keywords
          4. A.1.4. URLs
        2. A.2. Text Properties
          1. A.2.1. color (inherited)
          2. A.2.2. font (inherited)
          3. A.2.3. font-family (inherited)
          4. A.2.4. font-size (inherited)
          5. A.2.5. font-style (inherited)
          6. A.2.6. font-variant (inherited)
          7. A.2.7. font-weight (inherited)
          8. A.2.8. letter-spacing (inherited)
          9. A.2.9. line-height (inherited)
          10. A.2.10. text-align (inherited)
          11. A.2.11. text-decoration
          12. A.2.12. text-indent (inherited)
          13. A.2.13. text-transform (inherited)
          14. A.2.14. vertical-align
          15. A.2.15. white-space
          16. A.2.16. word-spacing (inherited)
        3. A.3. List Properties
          1. A.3.1. list-style (inherited)
          2. A.3.2. list-style-image (inherited)
          3. A.3.3. list-style-position (inherited)
          4. A.3.4. list-style-type (inherited)
        4. A.4. Padding, Borders, and Margins
          1. A.4.1. border
          2. A.4.2. border-top, border-right, border-bottom, border-left
          3. A.4.3. border-color
          4. A.4.4. border-top-color, border-right-color, border-bottom-color, border-left-color
          5. A.4.5. border-style
          6. A.4.6. border-top-style, border-right-style, border-bottom-style, border-left-style
          7. A.4.7. border-width
          8. A.4.8. border-top-width, border-right-width, border-bottom-width, border-left-width
          9. A.4.9. outline
          10. A.4.10. outline-color
          11. A.4.11. outline-style
          12. A.4.12. outline-width
          13. A.4.13. padding
          14. A.4.14. padding-top
          15. A.4.15. padding-right
          16. A.4.16. padding-bottom
          17. A.4.17. padding-left
          18. A.4.18. margin
          19. A.4.19. margin-top
          20. A.4.20. margin-right
          21. A.4.21. margin-bottom
          22. A.4.22. margin-left
        5. A.5. Backgrounds
          1. A.5.1. background
          2. A.5.2. background-attachment
          3. A.5.3. background-color
          4. A.5.4. background-image
          5. A.5.5. background-position
          6. A.5.6. background-repeat
        6. A.6. Page Layout Properties
          1. A.6.1. bottom
          2. A.6.2. clear
          3. A.6.3. clip
          4. A.6.4. display
          5. A.6.5. float
          6. A.6.6. height
          7. A.6.7. left
          8. A.6.8. max-height
          9. A.6.9. max-width
          10. A.6.10. min-height
          11. A.6.11. min-width
          12. A.6.12. overflow
          13. A.6.13. position
          14. A.6.14. right
          15. A.6.15. top
          16. A.6.16. visibility
          17. A.6.17. width
          18. A.6.18. z-index
        7. A.7. Table Properties
          1. A.7.1. border-collapse
          2. A.7.2. border-spacing
          3. A.7.3. caption-side
          4. A.7.4. empty-cells
          5. A.7.5. table-layout
        8. A.8. Miscellaneous Properties
          1. A.8.1. content
          2. A.8.2. cursor
          3. A.8.3. orphans
          4. A.8.4. page-break-after
          5. A.8.5. page-break-before
          6. A.8.6. page-break-inside
          7. A.8.7. widows
      2. B. CSS in Dreamweaver 8
        1. B.1. Creating Styles
          1. B.1.1. Phase 1: Set Up the CSS Type
          2. B.1.2. Phase 2: Defining the Style
        2. B.2. Adding Styles to Web Pages
          1. B.2.1. Linking to an External Style Sheet
          2. B.2.2. Applying a Class Style
          3. B.2.3. Un-Applying a Class Style
        3. B.3. Editing Styles
          1. B.3.1. Editing in the Properties Pane
        4. B.4. Managing Styles
          1. B.4.1. Deleting a Style
          2. B.4.2. Renaming a Class Style
          3. B.4.3. Duplicating a Style
        5. B.5. Examining Your CSS in the Styles Panel
          1. B.5.1. Current Selection Mode
          2. B.5.2. Deciphering the Cascade
        6. B.6. CSS Properties
      3. C. CSS Resources
        1. C.1. References
          1. C.1.1. World Wide Web Consortium (W3C)
          2. C.1.2. Books and PDFs
          3. C.1.3. Online Tutorial
        2. C.2. CSS Help
          1. C.2.1. Email List
          2. C.2.2. Discussion Boards
        3. C.3. CSS Navigation
          1. C.3.1. Tutorials
          2. C.3.2. Online Examples
        4. C.4. CSS and Graphics
        5. C.5. CSS Layout
          1. C.5.1. Box Model Information
          2. C.5.2. Float Layouts
          3. C.5.3. Absolute Position Layouts
          4. C.5.4. Layout Examples
          5. C.5.5. Miscellaneous Layout Resources
        6. C.6. Browser Bugs
          1. C.6.1. Windows Internet Explorer
          2. C.6.2. Mac Internet Explorer 5
        7. C.7. Showcase Sites
        8. C.8. CSS Books
        9. C.9. Must-Have RSS Feeds
        10. C.10. CSS Software
          1. C.10.1. Windows and Mac
          2. C.10.2. Windows Only
          3. C.10.3. Mac Only
    10. Index
    11. About the Author
    12. Colophon
    13. SPECIAL OFFER: Upgrade this ebook with O’Reilly