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