CSS: The Missing Manual, 2nd Edition

CSS: The Missing Manual, 2nd Edition

by David Sawyer McFarland
Released August 2009
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596802448

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.

Buy on Amazon
Start your free trial

Book description

Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site's appearance. You can tap into the real power of this tool with CSS: The Missing Manual. This second edition combines crystal-clear explanations, real-world examples, and dozens of step-by-step tutorials to show you how to design sites with CSS that work consistently across browsers. Witty and entertaining, this second edition gives you up-to-the-minute pro techniques. 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 rollover effects
  • Create effective photo galleries and special effects, including drop shadows
  • Get up to speed on CSS 3 properties that work in the latest browser versions
  • Build complex layouts using CSS, including multi-column designs
  • Style web pages for printing

With CSS: The Missing Manual, Second Edition, you'll find all-new online tutorial pages, expanded CSS 3 coverage, and broad support for Firebox, Safari, and other major web browsers, including Internet Explorer 8. Learn how to use CSS effectively to build new websites, or refurbish old sites that are due for an upgrade.

Table of contents

  1. A Note Regarding Supplemental Files
  2. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgements
    4. The Missing Manual Series
  3. Introduction
    1. How CSS Works
    2. The Benefits of CSS
    3. What You Need to Know
    4. HTML: The Barebones Structure
    5. How HTML Tags Work
    6. XHTML: HTML for the New Era?
    7. HTML 5: The Wheel Turns Again
    8. Software for CSS
      1. Free Programs
      2. Commercial Software
    9. About This Book
      1. About the Outline
      2. Living Examples
      3. About MissingManuals.com
    10. The Very Basics
      1. About → These → Arrows
      2. Safari® Books Online
  4. I. CSS Basics
    1. 1. Rethinking HTML for CSS
      1. HTML: Past and Present
        1. HTML Past: Whatever Looked Good
        2. HTML Present: Scaffolding for CSS
      2. Writing HTML for CSS
        1. Think Structure
        2. Two New HTML Tags to Learn
        3. HTML to Forget
        4. Tips to Guide Your Way
      3. The Importance of the Doctype
      4. Getting the Most out of Internet Explorer 8
    2. 2. Creating Styles and Style Sheets
      1. Anatomy of a Style
      2. Understanding Style Sheets
        1. Internal or External—How to Choose
      3. Internal Style Sheets
      4. External Style Sheets
        1. Linking a Style Sheet Using HTML
        2. Linking a Style Sheet Using CSS
      5. Tutorial: Creating Your First Styles
        1. Creating an Inline Style
        2. Creating an Internal Style Sheet
        3. Creating an External Style Sheet
    3. 3. Selectors: Identifying What to Style
      1. Tag Selectors: Page-Wide Styling
      2. Class Selectors: Pinpoint Control
      3. ID Selectors: Specific Page Elements
      4. Styling Groups of Tags
        1. Constructing Group Selectors
        2. The Universal Selector (Asterisk)
      5. Styling Tags Within Tags
        1. The HTML Family Tree
        2. Building Descendent Selectors
      6. Pseudo-Classes and Pseudo-Elements
        1. Styles for Links
        2. Styling Paragraph Parts
        3. More Pseudo-Classes and -Elements
          1. :before
          2. :after
          3. :first-child
          4. :focus
      7. Advanced Selectors
        1. Child Selectors
        2. Adjacent Siblings
        3. Attribute Selectors
      8. Tutorial: Selector Sampler
        1. Creating a Group Selector
        2. Creating and Applying a Class Selector
        3. Creating a Descendent Selector
        4. Creating and Applying an ID Selector
        5. Finishing Touches
    4. 4. Saving Time with Style Inheritance
      1. What Is Inheritance?
      2. How Inheritance Streamlines Style Sheets
      3. The Limits of Inheritance
      4. Tutorial: Inheritance
        1. A Basic Example: One Level of Inheritance
        2. Using Inheritance to Restyle an Entire Page
        3. Inheritance Inaction
    5. 5. Managing Multiple Styles: The Cascade
      1. How Styles Cascade
        1. Inherited Styles Accumulate
        2. Nearest Ancestor Wins
        3. The Directly Applied Style Wins
        4. One Tag, Many Styles
      2. Specificity: Which Style Wins
        1. The Tiebreaker: Last Style Wins
      3. Controlling the Cascade
        1. Changing the Specificity
        2. Selective Overriding
        3. Starting with a Clean Slate
      4. Tutorial: The Cascade in Action
        1. Resetting CSS and Styling from Scratch
        2. Creating a Hybrid Style
        3. Overcoming Conflicts
  5. II. Applied CSS
    1. 6. Formatting Text
      1. Formatting Text
        1. Choosing a Font
          1. Serif fonts
          2. Sans-serif fonts
          3. Monospaced and fun fonts
          4. Additional fonts to consider
        2. Adding Color to Text
          1. Hexadecimal color notation
          2. RGB
      2. Changing Font Size
        1. Using Pixels
        2. Using Keywords, Percentages, and Ems
          1. Keywords
          2. Percentages
          3. Ems
      3. Formatting Words and Letters
        1. Italicizing and Bolding
        2. Capitalizing
          1. Small caps
        3. Decorating
        4. Letter and Word Spacing
      4. Formatting Entire Paragraphs
        1. Adjusting the Space Between Lines
          1. Line spacing by pixel, em, or percentage
          2. Line spacing by number
        2. Aligning Text
        3. Indenting the First Line and Removing Margins
          1. First-line indents
          2. Controlling margins between paragraphs
        4. Formatting the First Letter or First Line of a Paragraph
      5. Styling Lists
        1. Types of Lists
        2. Positioning Bullets and Numbers
        3. Graphic Bullets
      6. Tutorial: Text Formatting in Action
        1. Setting Up the Page
        2. Formatting the Headings and Paragraphs
        3. Formatting Lists
        4. Fine-Tuning with Classes
        5. Adding the Finishing Touches
    2. 7. Margins, Padding, and Borders
      1. Understanding the Box Model
      2. Control Space with Margins and Padding
        1. Margin and Padding Shorthand
        2. Colliding Margins
        3. Removing Space with Negative Margins
        4. Displaying Inline and Block-Level Boxes
      3. Adding Borders
        1. Border Property Shorthand
        2. Formatting Individual Borders
      4. Coloring the Background
      5. Determining Height and Width
        1. Calculating a Box’s Actual Width and Height
        2. Controlling the Tap with the Overflow Property
      6. Wrap Content with Floating Elements
        1. Backgrounds, Borders, and Floats
        2. Stopping the Float
      7. Tutorial: Margins, Backgrounds, and Borders
        1. Controlling Page Margins and Backgrounds
        2. Adjusting the Space Around Tags
        3. Building a Sidebar
        4. Fixing the Browser Bugs
        5. Going Further
    3. 8. Adding Graphics to Web Pages
      1. CSS and the <img> Tag
      2. Background Images
      3. Controlling Repetition
      4. Positioning a Background Image
        1. Keywords
        2. Precise Values
        3. Percentage Values
        4. Fixing an Image in Place
      5. Using Background Property Shorthand
      6. Tutorial: Enhancing Images
        1. Framing an Image
        2. Adding a Caption
      7. Tutorial: Creating a Photo Gallery
        1. Adding Drop Shadows
      8. Tutorial: Using Background Images
        1. Adding an Image to the Page Background
        2. Replacing Borders with Graphics
        3. Using Graphics for Bulleted Lists
        4. Giving the Sidebar Personality
        5. Going Further
    4. 9. Sprucing Up Your Site’s Navigation
      1. Selecting Which Links to Style
        1. Understanding Link States
        2. Targeting Particular Links
          1. Grouping links with descendent selectors
      2. Styling Links
        1. Underlining Links
        2. Creating a Button
        3. Using Graphics
      3. Building Navigation Bars
        1. Using Unordered Lists
        2. Vertical Navigation Bars
        3. Horizontal Navigation Bars
          1. Using display: inline
          2. Using floats for horizontal navigation
      4. Advanced Link Techniques
        1. Big Clickable Buttons
        2. CSS-Style Preloading Rollovers
        3. Sliding Doors
        4. Styling Particular Types of Links
          1. Links to other websites
          2. Email links
          3. Links to specific types of files
      5. Tutorial: Styling Links
        1. Basic Link Formatting
        2. Adding a Background Image to a Link
        3. Highlighting Different Links
      6. Tutorial: Creating a Navigation Bar
        1. Adding Rollovers and Creating “You Are Here” Links
        2. Fixing the IE Bugs
        3. From Vertical to Horizontal
    5. 10. Formatting Tables and Forms
      1. Using Tables the Right Way
      2. Styling Tables
        1. Adding Padding
        2. Adjusting Vertical and Horizontal Alignment
        3. Creating Borders
        4. Styling Rows and Columns
      3. Styling Forms
        1. HTML Form Elements
        2. Laying Out Forms Using CSS
      4. Tutorial: Styling a Table
      5. Tutorial: Styling a Form
  6. III. CSS Page Layout
    1. 11. Introducing CSS Layout
      1. Types of Web Page Layouts
      2. How CSS Layout Works
        1. The Mighty <div> Tag
        2. Techniques for CSS Layout
      3. Layout Strategies
        1. Start with Your Content
        2. Mock Up Your Design
        3. Identify the Boxes
        4. Go with the Flow
        5. Remember Background Images
        6. Pieces of a Puzzle
        7. Layering Elements
        8. Don’t Forget Margins and Padding
    2. 12. Building Float-Based Layouts
      1. Applying Floats to Your Layouts
        1. Floating All Columns
        2. Floats Within Floats
        3. Using Negative Margins to Position Elements
      2. Overcoming Float Problems
        1. Clearing and Containing Floats
        2. Creating Full-Height Columns
        3. Preventing Float Drops
      3. Handling Internet Explorer 6 Bugs
        1. Double-Margin Bug
        2. 3-Pixel Gaps
        3. Other IE Problems
      4. Tutorial: Multiple-Column Layouts
        1. Structuring the HTML
        2. Creating the Layout Styles
        3. Adding Another Column
        4. Adding a “Faux Column”
        5. Fixing the Width
      5. Tutorial: Negative Margin Layout
        1. Centering a Layout
        2. Floating the Columns
        3. Final Adjustments
    3. 13. Positioning Elements on a Web Page
      1. How Positioning Properties Work
        1. Setting Positioning Values
        2. When Absolute Positioning Is Relative
        3. When (and Where) to Use Relative Positioning
        4. Stacking Elements
        5. Hiding Parts of a Page
      2. Powerful Positioning Strategies
        1. Positioning Within an Element
        2. Breaking an Element Out of the Box
        3. Using CSS Positioning for Page Layout
        4. Creating CSS-Style Frames Using Fixed Positioning
      3. Tutorial: Positioning Page Elements
        1. Enhancing a Page Banner
        2. Adding a Caption to a Photo
        3. Laying Out the Page
  7. IV. Advanced CSS
    1. 14. CSS for the Printed Page
      1. How Media Style Sheets Work
      2. How to Add Media Style Sheets
        1. Specifying the Media Type for an External Style Sheet
        2. Specifying the Media Type Within a Style Sheet
      3. Creating Print Style Sheets
        1. Using !important to Override Onscreen Styling
        2. Reworking Text Styles
        3. Styling Backgrounds for Print
          1. Removing background elements
          2. Leaving background elements in
        4. Hiding Unwanted Page Areas
        5. Adding Page Breaks for Printing
      4. Tutorial: Building a Print Style Sheet
        1. Remove Unneeded Page Elements
        2. Adjusting the Layout
        3. Reformatting the Text
        4. Displaying URLs
    2. 15. Improving Your CSS Habits
      1. Adding Comments
      2. Organizing Styles and Style Sheets
        1. Name Styles Clearly
          1. Name styles by purpose not appearance
          2. Don’t use names based on position
          3. Avoid cryptic names
        2. Use Multiple Classes to Save Time
        3. Organize Styles by Grouping
          1. Using comments to separate style groups
        4. Using Multiple Style Sheets
      3. Eliminating Browser Style Interference
      4. Using Descendent Selectors
        1. Compartmentalize Your Pages
        2. Identify the Body
      5. Managing Internet Explorer Hacks
        1. Design for Contemporary Browsers First
        2. Isolate CSS for IE with Conditional Comments
          1. Conditional comments and IE 8
          2. Conditional comments and the cascade
    3. 16. CSS 3: CSS on the Edge
      1. An Overview of CSS 3
      2. CSS 3 Selectors
        1. Child Selectors
        2. Type Selectors
      3. Opacity
      4. RGBA Color
        1. Simulating RGBA in Internet Explorer
      5. Text Shadow
      6. Font Freedom
      7. Generated Content
  8. V. Appendixes
    1. A. CSS Property Reference
      1. CSS Values
        1. Colors
          1. Keywords
          2. RGB values
        2. Lengths and Sizes
          1. Pixels
          2. Ems
          3. Percentages
        3. Keywords
        4. URLs
      2. Text Properties
        1. color (inherited)
        2. font (inherited)
        3. font-family (inherited)
        4. font-size (inherited)
        5. font-style (inherited)
        6. font-variant (inherited)
        7. font-weight (inherited)
        8. letter-spacing (inherited)
        9. line-height (inherited)
        10. text-align (inherited)
        11. text-decoration
        12. text-indent (inherited)
        13. text-transform (inherited)
        14. vertical-align
        15. white-space
        16. word-spacing (inherited)
      3. List Properties
        1. list-style (inherited)
        2. list-style-image (inherited)
        3. list-style-position (inherited)
        4. list-style-type (inherited)
      4. Padding, Borders, and Margins
        1. border
        2. border-top, border-right, border-bottom, border-left
        3. border-color
        4. border-top-color, border-right-color, border-bottom-color, border-left-color
        5. border-style
        6. border-top-style, border-right-style, border-bottom-style, border-left-style
        7. border-width
        8. border-top-width, border-right-width, border-bottom-width, border-left-width
        9. outline
        10. outline-color
        11. outline-style
        12. outline-width
        13. padding
        14. padding-top
        15. padding-right
        16. padding-bottom
        17. padding-left
        18. margin
        19. margin-top
        20. margin-right
        21. margin-bottom
        22. margin-left
      5. Backgrounds
        1. background
        2. background-attachment
        3. background-color
        4. background-image
        5. background-position
        6. background-repeat
      6. Page Layout Properties
        1. bottom
        2. clear
        3. clip
        4. display
        5. float
        6. height
        7. left
        8. max-height
        9. max-width
        10. min-height
        11. min-width
        12. overflow
        13. position
        14. right
        15. top
        16. visibility
        17. width
        18. z-index
      7. Table Properties
        1. border-collapse
        2. border-spacing
        3. caption-side
        4. empty-cells
        5. table-layout
      8. Miscellaneous Properties
        1. content
        2. cursor
        3. orphans
        4. page-break-after
        5. page-break-before
        6. page-break-inside
        7. widows
    2. B. CSS in Dreamweaver CS4
      1. Creating Styles
        1. Phase 1: Set Up the CSS Type
        2. Phase 2: Defining the Style
      2. Adding Styles to Web Pages
        1. Linking to an External Style Sheet
        2. Applying a Class Style
          1. Applying a class style to text
          2. Applying a class style to objects
          3. Other class styling options
        3. Removing a Class Style
        4. Applying IDs to a Tag
      3. Editing Styles
        1. Editing in the Properties Pane
      4. Managing Styles
        1. Deleting a Style
        2. Renaming a Class Style
        3. Duplicating a Style
        4. Moving and Managing Styles
      5. Examining Your CSS in the Styles Panel
        1. Current Selection Mode
        2. Deciphering the Cascade
      6. Using the Code Navigator
    3. C. CSS Resources
      1. References
        1. World Wide Web Consortium (W3C)
        2. Books and PDFs
        3. Other Online References
      2. CSS Help
        1. Email List
        2. Discussion Boards
      3. CSS Tips, Tricks, and Advice
      4. CSS Navigation
        1. Tutorials
        2. Online Examples
      5. CSS and Graphics
      6. CSS Layout
        1. Box Model Information
        2. Float Layouts
        3. Absolute Position Layouts
        4. Layout Examples
        5. Miscellaneous Layout Resources
      7. Browser Bugs
        1. Windows Internet Explorer
      8. Showcase Sites
      9. CSS Books
      10. CSS Software
        1. Windows and Mac
        2. Windows Only
        3. Mac Only
  9. Index
  10. About the Author
  11. Colophon
  12. Copyright

Product information

  • Title: CSS: The Missing Manual, 2nd Edition
  • Author(s): David Sawyer McFarland
  • Release date: August 2009
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596802448