You are previewing Sams Teach Yourself CSS in 10 Minutes.
O'Reilly logo
Sams Teach Yourself CSS in 10 Minutes

Book Description

The short, focused lessons presented in Sams Teach Yourself CSS in 10 Minutes will help you quickly understand cascading style sheets (CSS) and how to immediately apply it to your work. Author Russ Weakley is a well-respected member of the CSS community and is known for his ability to make complicated concepts easy-to-understand for even inexperienced CSS users. With this book, you will cover the essentials for standards compliant techniques that are supported by the most common browsers. Once you master the basics, Weakley will also take you inside positioning, troubleshooting CSS, and handling common CSS bugs. Sams Teach Yourself CSS in 10 Minutes is the ultimate quick learning tool and handy desk reference guide to CSS.

Table of Contents

  1. Copyright
  2. About the Author
  3. Acknowledgments
  4. We Want to Hear from You!
  5. Reader Services
  6. Introduction
    1. Who Is This Book For?
    2. How This Book Works
    3. Online Support Files
    4. Conventions Used in This Book
  7. 1. Understanding CSS
    1. What Is CSS?
    2. What Does Cascading Mean?
    3. Why Use CSS?
    4. Summary
  8. 2. Using CSS Rules
    1. Setting Up the HTML Code
    2. Creating a Rule Set
    3. Using Multiple Declarations
    4. Combining Selectors
    5. Using Shorthand Properties
    6. Using Shorthand Borders
    7. Using Shorthand Margins and Padding
    8. Other Shorthand Properties
    9. Summary
  9. 3. Selectors in Action
    1. Setting Up the HTML Code
    2. Type Selectors
    3. Class Selectors
    4. ID Selectors
    5. Descendant Selectors
    6. Universal Selectors
    7. Advanced Selectors
    8. Summary
  10. 4. Applying Styles
    1. Setting Up the HTML Code
    2. Applying Inline Styles
    3. Using Header Styles
    4. Using External Style Sheets
    5. @import Styles
    6. Hiding Styles from Older Browsers
    7. Summary
  11. 5. Getting to Know the CSS Box Model
    1. Understanding Inline and Block Level Elements
    2. Setting Box Width
    3. Margins
    4. Background Color and Background Image
    5. Padding
    6. Border
    7. Content Area
    8. Summary
  12. 6. Adding Background Images
    1. Setting Up the HTML Code
    2. Creating Selectors to Style the Header
    3. Adding background-image
    4. Setting background-repeat
    5. Adding background-position
    6. Using the background Shortcut
    7. Adding padding
    8. Summary
  13. 7. Formatting Text
    1. Setting Up the HTML Code
    2. Removing Font Elements
    3. Creating the Selectors
    4. Styling the <p> Element
    5. Styling the First Paragraph
    6. Converting to Shorthand
    7. Summary
  14. 8. Styling a Flexible Heading
    1. Styling the Heading
    2. Adding Color, Font Size, and Weight
    3. Setting Text Options
    4. Applying Padding and Borders
    5. Adding a Background Image
    6. Summary
  15. 9. Styling a Round-Cornered Heading
    1. Styling the Heading
    2. Styling the <h2> Element
    3. Adding a Background Image
    4. Styling the <em> Element
    5. Summary
  16. 10. Styling Links
    1. Links and Pseudo-Classes
    2. Setting Pseudo-Class Order
    3. Using Classes with Pseudo-Classes
    4. Styling Links with Background Images
    5. Removing Underlines and Applying Borders
    6. Increasing the Active Area of Links
    7. Summary
  17. 11. Positioning an Image and Its Caption
    1. Wrapping the Image and Caption
    2. Floating the Container
    3. Applying Padding, Background Color, and a Background Image
    4. Styling the Caption
    5. Styling the Image
    6. Creating a Side-By-Side Variation
    7. Creating a Photo Frame Variation
    8. Summary
  18. 12. Creating a Photo Gallery
    1. Creating a Thumbnail Gallery
    2. Positioning the <div> Elements
    3. Styling the Image
    4. Styling the Paragraph Element
    5. Forcing a New Line
    6. Creating a Side-By-Side Variation
    7. Summary
  19. 13. Styling a Block Quote
    1. Applying the <blockquote> Element
    2. Styling the <blockquote> Element
    3. Styling the Paragraph
    4. Styling the source Class
    5. Creating a Variation
    6. Summary
  20. 14. Styling a Data Table
    1. Starting with a Basic Table
    2. Adding Accessibility Features to a Data Table
    3. Creating Selectors to Style a Table
    4. Styling the Caption
    5. Styling the <table> Element
    6. Styling the <th> and <td> Elements
    7. Styling the <tr> Element
    8. Targeting Instances of the <th> Element
    9. Creating Alternate Row Colors
    10. Summary
  21. 15. Creating Vertical Navigation
    1. Why Use a List?
    2. Styling the List
    3. Styling the <ul> Element
    4. Styling the <a> Element
    5. Adding a Hover Effect
    6. Styling the <li> Element
    7. Summary
  22. 16. Creating Horizontal Navigation
    1. Styling the List
    2. Styling the <ul> Element
    3. Styling the <li> Element
    4. Styling the <a> Element
    5. Styling the :hover Pseudo Class
    6. Summary
  23. 17. Styling a Round-Cornered Box
    1. Setting Up the HTML Code
    2. Creating the Illusion of Round Corners
    3. Creating Selectors to Style the Round-Cornered Box
    4. Preparing the Images
    5. Styling the <div> Element
    6. Styling the <h2> Element
    7. Styling the <p> Element
    8. Styling the .furtherinfo Class
    9. Styling the <a> Element
    10. Creating a Fixed-Width Variation
    11. Creating a Top-Only Flexible Variation
    12. Summary
  24. 18. Creating a Site Header
    1. Setting Up the HTML Code
    2. Creating Selectors to Style the Header
    3. Styling the <body> Element
    4. Styling the Container
    5. Styling the <h1> Element
    6. Styling the <image> Element
    7. Styling the <ul> Element
    8. Styling the <li> Element
    9. Styling the <a> Element
    10. Summary
  25. 19. Positioning Two Columns with a Header and a Footer
    1. Setting Up the HTML Code
    2. Creating Selectors to Style the Two-Column Layout
    3. Styling the <body> Element
    4. Styling the Container
    5. Styling the <h1> Element
    6. Styling the #nav Container
    7. Styling the <ul> Element
    8. Styling the <li> Element
    9. Styling the #content Container
    10. Styling the #footer Container
    11. Styling the <h2> Element
    12. Styling the <a> Element
    13. Summary
  26. 20. Styling a Page for Print
    1. Setting Up the Print CSS
    2. Starting with Existing HTML and CSS Code
    3. Creating Selectors to Style for Print
    4. Styling the <body> Element
    5. Styling the <h1> Element
    6. Styling the #nav Container
    7. Styling the #footer Container
    8. Styling the <a> Element
    9. Summary
  27. 21. Positioning Three Columns with a Header and a Footer
    1. Setting Up the HTML Code
    2. Creating Selectors to Style the Three-Column Layout
    3. Creating a Liquid-Layout Grid
    4. Creating the Background Images
    5. Styling the <body> Element
    6. Styling the <h1> Element
    7. Styling the <h2> and <h3> Elements
    8. Styling the First Container
    9. Styling the Second Container
    10. Styling the #content Column
    11. Styling the #news Column
    12. Styling the #nav Column
    13. Styling the <ul> Element
    14. Styling the #footer Element
    15. Summary
  28. 22. Troubleshooting CSS
    1. Setting Up the CSS Code
    2. Fixing the Problems
    3. Some Tips for Troubleshooting CSS Problems
    4. Summary