You are previewing CSS3: Visual QuickStart Guide, Sixth Edition.
O'Reilly logo
CSS3: Visual QuickStart Guide, Sixth Edition

Book Description

With CSS3: Visual QuickStart Guide readers can start from the beginning to get a tour of the stylesheet language or look up specific tasks to learn just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS. Best-selling author Jason Cranford Teague takes readers step-by-step through today's CSS essentials and provides extensive coverage of CSS3 and CSS 2.1 techniques. The book outlines what can be done with CSS3 now and how the latest browsers have implemented many of the new features. Both beginning users, who want a thorough introduction to CSS, and more advanced users, who are looking for a convenient reference, will find what they need in straightforward language and through readily accessible examples.


Table of Contents

  1. Title Page
  2. Copyright Page
  3. Dedication
  4. Special Thanks to
  5. Contents at a Glance
  6. Table of Contents
  7. Introduction
    1. What Is This Book About?
    2. Values and Units Used in This Book
    3. Reading This Book
    4. The Code
    5. Web Site for This Book
  8. 1. Understanding CSS3
    1. What Is a Style?
    2. What Are Cascading Style Sheets?
    3. The Evolution of CSS
    4. CSS and HTML
    5. Types of CSS Rules
    6. The Parts of a CSS Rule
    7. CSS Browser Extensions
    8. New in CSS3
  9. 2. HTML5 Primer
    1. What Is HTML?
    2. Types of HTML Elements
    3. The Evolution of HTML5
    4. What’s New in HTML5?
    5. How Does HTML5 Structure Work?
    6. Using HTML5 Structure Now
  10. 3. CSS Basics
    1. The Basic CSS Selectors
    2. Inline: Adding Styles to an HTML Tag
    3. Embedded: Adding Styles to a Web Page
    4. External: Adding Styles to a Web Site
    5. (Re)Defining HTML Tags
    6. Defining Reusable Classes
    7. Defining Unique IDs
    8. Defining Universal Styles
    9. Grouping: Defining Elements That Are Using the Same Styles
    10. Adding Comments to CSS
  11. 4. Selective Styling
    1. The Element Family Tree
    2. Defining Styles Based on Context
    3. Working with Pseudo-Classes
    4. Working with Pseudo-Elements
    5. Defining Styles Based on Tag Attributes
    6. Querying the Media
    7. Inheriting Properties from a Parent
    8. Making a Declaration !important
    9. Determining the Cascade Order
  12. 5. Font Properties
    1. Getting Started
    2. Understanding Typography on the Web
    3. Setting a Font-Stack
    4. Using Web Fonts
    5. Setting the Font Size
    6. Adjusting Font Size for Understudy Fonts
    7. Making Text Italic
    8. Setting Bold, Bolder, Boldest
    9. Using Condensed and Expanded Fonts
    10. Creating Small Caps
    11. Setting Multiple Font Values at the Same Time
    12. Putting It All Together
  13. 6. Text Properties
    1. Getting Started
    2. Adjusting Text Spacing
    3. Setting Text Case
    4. Adding a Text Drop Shadow
    5. Aligning Text Horizontally
    6. Aligning Text Vertically
    7. Indenting Paragraphs
    8. Controlling White Space
    9. Decorating Text
    10. Coming Soon!
    11. Putting It All Together
  14. 7. Color and Background Properties
    1. Getting Started
    2. Choosing Color Values
    3. Creating Color Gradients
    4. Choosing Your Color Palette
    5. Setting Text Color
    6. Setting a Background Color
    7. Setting Background Images
    8. Using Background Shorthand to Add Multiple Background Images and Gradients
    9. Putting It All Together
  15. 8. List and Table Properties
    1. Getting Started
    2. Setting the Bullet Style
    3. Creating Your Own Bullets
    4. Setting Bullet Positions
    5. Setting Multiple List Styles
    6. Setting the Table Layout
    7. Setting the Space Between Table Cells
    8. Collapsing Borders Between Table Cells
    9. Dealing with Empty Table Cells
    10. Setting the Position of a Table Caption
    11. Putting It All Together
  16. 9. User Interface and Generated Content Properties
    1. Getting Started
    2. Changing the Mouse Pointer Appearance
    3. Adding Content Using CSS
    4. Teaching the Browser to Count
    5. Specifying the Quote Style
    6. Putting It All Together
  17. 10. Box Properties
    1. Understanding an Element’s Box
    2. Displaying an Element
    3. Setting the Width and Height of an Element
    4. Controlling Overflowing Content
    5. Floating Elements in the Window
    6. Setting an Element’s Margins
    7. Setting an Element’s Outline
    8. Setting an Element’s Border
    9. Rounding Border Corners
    10. Setting a Border Image
    11. Setting an Element’s Padding
    12. Creating a Multi-Column Text Layout
    13. Coming Soon!
    14. Putting It All Together
  18. 11. Visual Formatting Properties
    1. Getting Started
    2. Understanding the Window and Document
    3. Setting the Positioning Type
    4. Setting an Element’s Position
    5. Stacking Objects in 3D
    6. Setting the Visibility of an Element
    7. Clipping an Element’s Visible Area
    8. Setting an Element’s Opacity
    9. Setting an Element’s Shadows
    10. Putting It All Together
  19. 12. Transformation and Transition Properties
    1. Getting Started
    2. Transforming an Element
    3. Adding Transitions Between Element States
    4. Putting It All Together
  20. 13. Essential Design and Interface Techniques
    1. Getting Started
    2. Creating Multicolumn Layouts with Float
    3. Fixing the Float
    4. Styling Links vs. Navigation
    5. Using CSS Sprites
    6. Creating a CSS Drop-Down Menu
    7. Putting It All Together
  21. 14. Responsive Web Design
    1. Getting Started
    2. What Is Responsive Design?
    3. Designing with Progressive Enhancements
    4. Resetting Browser Default Styles
    5. Adjusting CSS for Internet Explorer
    6. Adapting to the Environment
  22. 15. CSS Best Practices
    1. Create Readable Style Sheets
    2. Have a Style Sheet Strategy
    3. Troubleshoot Your CSS Code
    4. View CSS in Firebug or Web Inspector
    5. Validate Your CSS Code
    6. Minify Your CSS
    7. 33 CSS Best Practices
  23. A. CSS Quick Reference
    1. Browsers legend
    2. Table value legend
  24. B. HTML and UTF Character Encoding
  25. Index