Table of Contents
The Missing Credits
Introduction
Part One: CSS Basics
Chapter 1. Rethinking HTML for CSS
HTML: Past and Present
HTML Past: Whatever Looked Good
HTML Present: Scaffolding for CSS
Writing HTML for CSS
Think Structure
Two New HTML Tags to Learn
HTML to Forget
Tips to Guide Your Way
The Importance of the Doctype
Chapter 2. Creating Styles and Style Sheets
Anatomy of a Style
Understanding Style Sheets
Internal or External-How to Choose
Internal Style Sheets
External Style Sheets
Linking a Style Sheet Using HTML
Linking a Style Sheet Using CSS
Tutorial: Creating Your First Styles
Creating an Inline Style
Creating an Internal Style Sheet
Creating an External Style Sheet
Chapter 3. Selector Basics: Identifying What to Style
Tag Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control
ID Selectors: Specific Page Elements
Styling Tags Within Tags
The HTML Family Tree
Building Descendent Selectors
Styling Groups of Tags
Constructing Group Selectors
The Universal Selector (Asterisk)
Pseudo-Classes and Pseudo-Elements
Styles for Links
More Pseudo-Classes and -Elements
Advanced Selectors
Child Selectors
Adjacent Siblings
Attribute Selectors
Tutorial: Selector Sampler
Creating a Group Selector
Creating and Applying a Class Selector
Creating and Applying an ID Selector
Creating a Descendent Selector
Chapter 4. Saving Time with Inheritance
What Is Inheritance?
How Inheritance Streamlines Style Sheets
The Limits of Inheritance
Tutorial: Inheritance
A Basic Example: One Level of Inheritance
Using Inheritance to Restyle an Entire Page
Inheritance Inaction
Chapter 5. Managing Multiple Styles: The Cascade
How Styles Cascade
Inherited Styles Accumulate
Nearest Ancestor Wins
The Directly Applied Style Wins
One Tag, Many Styles
Specificity: Which Style Wins
The Tiebreaker: Last Style Wins
Controlling the Cascade
Changing the Specificity
Selective Overriding
Tutorial: The Cascade in Action
Creating a Hybrid Style
Combining Cascading and Inheritance
Overcoming Conflicts
Part Two: Applied CSS
Chapter 6. Formatting Text
Formatting Text
Choosing a Font
Adding Color to Text
Changing Font Size
Using Pixels
Using Keywords, Percentages, and Ems
Formatting Words and Letters
Italicizing and Bolding
Capitalizing
Decorating
Letter and Word Spacing
Formatting Entire Paragraphs
Adjusting the Space Between Lines
Aligning Text
Indenting the First Line and Removing Margins
Formatting the First Letter or First Line of a Paragraph
Styling Lists
Types of Lists
Positioning Bullets and Numbers
Graphic Bullets
Tutorial: Text Formatting in Action
Setting Up the Page
Formatting the Headings and Paragraphs
Formatting Lists
Adding the Finishing Touches
Chapter 7. Margins, Padding, and Borders
Understanding the Box Model
Control Space with Margins and Padding
Margin and Padding Shorthand
Colliding Margins
Removing Space with Negative Margins
Displaying Inline and Block-Level Boxes
Adding Borders
Border Property Shorthand
Formatting Individual Borders
Coloring the Background
Determining Height and Width
Calculating a Box's Actual Width and Height
Controlling the Tap with the Overflow Property
Fixing IE 5's Broken Box Model
Wrap Content with Floating Elements
Backgrounds, Borders, and Floats
Stopping the Float
Tutorial: Margins, Backgrounds, and Borders
Controlling Page Margins
Adjusting the Space Around Tags
Emphasizing Text with Backgrounds and Borders
Building a Sidebar
Fixing the Browser Bugs
Going Further
Chapter 8. Adding Graphics to Web Pages
CSS and the <img> Tag
Background Images
Controlling Repetition
Positioning a Background Image
Keywords
Precise Values
Percentage Values
Fixing an Image in Place
Using Background Property Shorthand
Tutorial: Creating a Photo Gallery
Framing an Image
Adding a Caption
Building a Photo Gallery
Adding Drop Shadows
Tutorial: Using Background Images
Adding an Image to the Page Background
Replacing Borders with Graphics
Using Graphics for Bulleted Lists
Adding Rounded Corners to the Sidebar
Creating an External Style Sheet
Chapter 9. Sprucing Up Your Site's Navigation
Selecting Which Links to Style
Understanding Link States
Targeting Particular Links
Styling Links
Underlining Links
Creating a Button
Using Graphics
Building Navigation Bars
Using Unordered Lists
Vertical Navigation Bars
Horizontal Navigation Bars
Advanced Link Techniques
Big Clickable Buttons
CSS-Style Preloading Rollovers
Sliding Doors
Tutorial: Styling Links
Basic Link Formatting
Adding a Background Image to a Link
Highlighting External Links
Marking Visited Pages
Creating a Vertical Navigation Bar
Adding Rollovers and Creating "You Are Here" Links
Fixing the IE Bugs
From Vertical to Horizontal
Chapter 10. Formatting Tables and Forms
Using Tables the Right Way
Styling Tables
Adding Padding
Adjusting Vertical and Horizontal Alignment
Creating Borders
Styling Rows and Columns
Styling Forms
HTML Form Elements
Laying Out Forms Using CSS
Tutorial: Styling a Table
Tutorial: Styling a Form
Part Three: CSS Page Layout
Chapter 11. Building Float-Based Layouts
How CSS Layout Works
The Mighty <div> Tag
Types of Web Page Layouts
Float Layout Basics
Applying Floats to Your Layouts
Floating All Columns
Floats Within Floats
Using Negative Margins to Position Elements
Overcoming Float Problems
Clearing and Containing Floats
Creating Full-Height Columns
Preventing Float Drops
Handling Internet Explorer Bugs
Double-Margin Bug
3-Pixel Gaps
Other IE Problems
Tutorial: Multiple Column Layouts
Structuring the HTML
Creating the Layout Styles
Adding Another Column
Adding a "Faux Column"
Fixing the Width
Tutorial: Negative Margin Layout
Centering a Layout
Floating the Columns
Final Adjustments
Chapter 12. Positioning Elements on a Web Page
How Positioning Properties Work
Setting Positioning Values
When Absolute Positioning Is Relative
When (and Where) to Use Relative Positioning
Stacking Elements
Hiding Parts of a Page
Powerful Positioning Strategies
Positioning Within an Element
Breaking an Element Out of the Box
Using CSS Positioning for Page Layout
Creating CSS-Style Frames Using Fixed Positioning
Tutorial: Positioning Page Elements
Enhancing a Page Banner
Adding a Caption to a Photo
Laying Out the Page
Part Four: Advanced CSS
Chapter 13. CSS for the Printed Page
How Media Style Sheets Work
How to Add Media Style Sheets
Specifying the Media Type for an External Style Sheet
Specifying the Media Type Within a Style Sheet
Creating Print Style Sheets
Using !important to Override Onscreen Styling
Reworking Text Styles
Styling Backgrounds for Print
Hiding Unwanted Page Areas
Adding Page Breaks for Printing
Tutorial: Building a Print Style Sheet
Remove Unneeded Page Elements
Removing Backgrounds and Adjusting the Layout
Reformatting the Text
Displaying the Logo
Displaying URLs
Chapter 14. Improving Your CSS Habits
Adding Comments
Organizing Styles and Style Sheets
Name Styles Clearly
Use Multiple Classes to Save Time
Organize Styles by Grouping
Using Multiple Style Sheets
Eliminating Browser Style Interference
Using Descendent Selectors
Compartmentalize Your Pages
Identify the Body
Managing Internet Explorer Hacks
Design for Contemporary Browsers First
Isolate CSS for IE with Conditional Comments
Part Five: Appendixes
Appendix A. CSS Property Reference
Appendix B. CSS in Dreamweaver 8
Appendix C. CSS Resources
Index