O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS: The Definitive Guide, 4th Edition

Book Description

CSS: The Definitive Guide, 4th Edition provides experienced web developers with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 3. Updated to cover Internet Explorer 10, Microsoft's vastly improved browser, as well as Safari, Firefox, Chrome, and Opera, this new edition includes content on transitions, animations, new selectors, paged media, and more.

Table of Contents

  1. 1. Basic Visual Formatting
    1. Basic Boxes
      1. A Quick Refresher
      2. The Containing Block
    2. Altering Element Display
      1. Changing Roles
      2. Block Boxes
      3. Horizontal Formatting
      4. Horizontal Properties
      5. Using auto
      6. More Than One auto
      7. Negative Margins
      8. Percentages
      9. Replaced Elements
      10. Vertical Formatting
      11. Vertical Properties
      12. Percentage Heights
      13. Auto Heights
      14. Collapsing Vertical Margins
      15. Negative Margins and Collapsing
      16. List Items
    3. Inline Elements
      1. Line Layout
      2. Basic Terms and Concepts
      3. Inline Formatting
      4. Inline Nonreplaced Elements
      5. Building the Boxes
      6. Vertical Alignment
      7. Managing the line-height
      8. Scaling Line Heights
      9. Adding Box Properties
      10. Changing Breaking Behavior
      11. Glyphs Versus Content Area
      12. Inline Replaced Elements
      13. Adding Box Properties
      14. Replaced Elements and the Baseline
      15. Inline-Block Elements
      16. Run-in Elements
      17. Computed Values
    4. Summary
  2. 2. Colors and Backgrounds
    1. Colors
      1. Foreground Colors
      2. Affecting Borders
      3. Affecting Form Elements
      4. Inheriting Color
    2. Backgrounds
      1. Background Colors
      2. Clipping the Background
      3. Background Images
      4. Background Positioning
      5. Changing the Positioning Box
      6. Background Repeating (or Lack Thereof)
      7. Getting Attached
      8. Sizing Background Images
      9. Bringing It All Together
      10. Multiple Backgrounds
    3. Gradients
      1. Linear Gradients
      2. Radial Gradients
      3. Manipulating Gradient Images
      4. Repeating Gradients
    4. Summary
  3. 3. Floating and Shapes
    1. Floating
      1. Floated Elements
      2. Floating: The Details
      3. Applied Behavior
      4. Floats, Content, and Overlapping
    2. Clearing
    3. Float Shapes
      1. Creating a Shape
      2. Shaping With Image Transparency
      3. Adding a Shape Margin
    4. Summary
  4. 4. Grid Layout
    1. Creating a Grid Container
    2. Basic Grid Terminology
    3. Placing Grid Lines
      1. Fixed-Width Grid Tracks
      2. Flexible Grid Tracks
      3. Repeating Grid Lines
      4. Grid Areas
    4. Attaching Elements to the Grid
      1. Using Column and Row Lines
      2. Row and Column Shorthands
      3. The Implicit Grid
      4. Error Handling
      5. Using Areas
      6. Grid Item Overlap
    5. Grid Flow
    6. Automatic Grid Lines
    7. The grid Shorthand
      1. Subgrids
    8. Opening Grid Spaces
      1. Grid Gutters (or Gaps)
      2. Grid Items and the Box Model
    9. Aligning and Grids
      1. Aligning and Justifying Individual Items
      2. Aligning and Justifying All Items
    10. Layering and Ordering
    11. Summary
  5. 5. Padding, Borders, Outlines, and Margins
    1. Basic Element Boxes
      1. Width and Height
    2. Padding
      1. Replicating Values
      2. Single-Side Padding
      3. Percentage Values and Padding
      4. Padding and Inline Elements
      5. Padding and Replaced Elements
    3. Borders
      1. Borders with Style
      2. Border Widths
      3. Border Colors
      4. Shorthand Border Properties
      5. Global Borders
      6. Borders and Inline Elements
      7. Image Borders
    4. Outlines
      1. Outline Styles
      2. Outline Width
      3. Outline Color
      4. How They Are Different
    5. Margins
      1. Length Values and Margins
      2. Percentages and Margins
      3. Single-Side Margin Properties
      4. Margin Collapsing
      5. Negative Margins
      6. Margins and Inline Elements
    6. Summary
  6. 6. Positioning
    1. Basic Concepts
      1. Types of Positioning
      2. The Containing Block
    2. Offset Properties
    3. Width and Height
      1. Setting Width and Height
      2. Limiting Width and Height
    4. Content Overflow and Clipping
      1. Overflow
    5. Element Visibility
    6. Absolute Positioning
      1. Containing Blocks and Absolutely Positioned Elements
      2. Placement and Sizing of Absolutely Positioned Elements
      3. Auto-edges
      4. Placing and Sizing Nonreplaced Elements
      5. Placing and Sizing Replaced Elements
      6. Placement on the z-axis
    7. Fixed Positioning
    8. Relative Positioning
    9. Sticky Positioning
    10. Summary
  7. 7. Table Layout in CSS
    1. Table Formatting
      1. Visually Arranging a Table
      2. Table Display Values
      3. Anonymous Table Objects
      4. Table Layers
      5. Captions
    2. Table Cell Borders
      1. Separated Cell Borders
      2. Collapsing Cell Borders
    3. Table Sizing
      1. Width
      2. Height
      3. Alignment
    4. Summary
  8. 8. Transforms
    1. Coordinate Systems
    2. Transforming
      1. The Transform Functions
    3. More Transform Properties
      1. Moving the Origin
      2. Choosing a 3D Style
      3. Changing Perspective
      4. Dealing with Backfaces
    4. Summary
  9. 9. CSS Transitions and Animations
    1. 12 Basic Principles of Animation
    2. Animation and Transition Considerations
  10. 10. Transitions
    1. CSS Transitions
    2. Fallbacks: Transitions Are Enhancements
    3. Transition Properties
      1. The transition-property Property
      2. The transition-duration Property
      3. The transition-timing-function Property
      4. The transition-delay Property
      5. The transition Shorthand Property
    4. In Reverse: Transitioning Back to Baseline
    5. Animatable Properties and Values
      1. How Property Values Are Interpolated
      2. Animatable Properties
      3. transition Events Revisited
  11. 11. Animation
    1. Keyframes
    2. Setting Up Your Keyframe Animation
    3. Keyframe Selectors
      1. Omitting from and to Values
      2. Repeating Keyframe Properties
      3. Animatable Properties
      4. Nonanimatable Properties That Aren’t Ignored
      5. Dynamically Changing @keyframes Animations
    4. Animated Elements
      1. The animation-name Property
      2. The animation-duration Property
      3. The animation-iteration-count Property
      4. The animation-direction Property
      5. The animation-delay Property
      6. Animation Events
      7. The animation-timing-function Property
      8. The animation-play-state property
      9. The animation-fill-mode Property
      10. The animation Shorthand Property
    5. Animation, Specificity, and Precedence Order
      1. Specificity and !important
      2. Animation Order
      3. Animation Iteration and display: none;
      4. Animation and the UI Thread
      5. Seizure Disorders
    6. Animation Events and Prefixing
      1. animationstart
      2. animationend
      3. animationiteration
    7. Other Considerations
      1. Printing Animations
  12. 12. CSS and Documents
    1. A Brief History of (Web) Style
    2. Elements
      1. Replaced and Nonreplaced Elements
      2. Element Display Roles
    3. Bringing CSS and HTML Together
      1. The link Tag
      2. The style Element
      3. The @import Directive
      4. HTTP Linking
      5. Inline Styles
    4. Style Sheet Contents
      1. Markup
      2. Rule Structure
      3. Whitespace Handling
      4. CSS Comments
    5. Media Queries
      1. Usage
      2. Simple Media Queries
      3. Media Types
      4. Media Descriptors
      5. Media Feature Descriptors
      6. New Value Types
    6. Feature queries
    7. Summary
  13. 13. Fonts
    1. Font Families
      1. Using Generic Font Families
      2. Specifying a Font Family
    2. Using @font-face
      1. Required Descriptors
      2. Other Font Descriptors
      3. Combining Descriptors
    3. Font Weights
      1. How Weights Work
      2. Getting Bolder
      3. Lightening Weights
    4. Font Size
      1. Absolute Sizes
      2. Relative Sizes
      3. Percentages and Sizes
      4. Font Size and Inheritance
      5. Using Length Units
      6. Automatically Adjusting Size
    5. Font Style
      1. The font-style Descriptor
    6. Font Stretching
      1. The font-stretch Descriptor
    7. Font Kerning
    8. Font Variants
      1. Level 3 Values
    9. Font Features
      1. The font-feature-settings Descriptor
    10. Font Synthesis
    11. The font Property
      1. Adding the Line Height
      2. Using Shorthands Properly
      3. Using System Fonts
    12. Font Matching
    13. Summary
  14. 14. Text Properties
    1. Indentation and Horizontal Alignment
      1. Indenting Text
      2. Horizontal Alignment
      3. Aligning the Last Line
    2. Vertical Alignment
      1. The Height of Lines
      2. Vertically Aligning Text
    3. Word Spacing and Letter Spacing
      1. Word Spacing
      2. Letter Spacing
      3. Spacing and Alignment
    4. Text Transformation
    5. Text Decoration
      1. Weird Decorations
    6. Text Rendering
    7. Text Shadows
    8. Handling White Space
      1. Setting Tab Sizes
    9. Wrapping and Hyphenation
      1. Wrapping Text
    10. Text Direction
    11. Summary
  15. 15. Selectors
    1. Basic Style Rules
      1. Element Selectors
      2. Declarations and Keywords
    2. Grouping
      1. Grouping Selectors
      2. Grouping Declarations
      3. Grouping Everything
    3. Class and ID Selectors
      1. Class Selectors
      2. Multiple Classes
      3. ID Selectors
      4. Deciding Between Class and ID
    4. Attribute Selectors
      1. Simple Attribute Selectors
      2. Selection Based on Exact Attribute Value
      3. Selection Based on Partial Attribute Values
      4. A Particular Attribute Selection Type
    5. Using Document Structure
      1. Understanding the Parent-Child Relationship
      2. Descendant Selectors
      3. Selecting Children
      4. Selecting Adjacent Sibling Elements
      5. Selecting Following Siblings
    6. Pseudo-Class Selectors
      1. Combining Pseudo-Classes
      2. Structural Pseudo-Classes
      3. Dynamic Pseudo-Classes
      4. UI State Pseudo-Classes
      5. The :target Pseudo-Class
      6. The :lang Pseudo-Class
      7. The Negation Pseudo-Class
    7. Pseudo-Element Selectors
      1. Styling the First Letter
      2. Styling the First Line
      3. Restrictions on ::first-letter and ::first-line
      4. Styling (Or Creating) Content Before and After Elements
    8. Summary
  16. 16. Specificity and the Cascade
    1. Specificity
      1. Declarations and Specificity
      2. Universal Selector Specificity
      3. ID and Attribute Selector Specificity
      4. Inline Style Specificity
      5. Importance
    2. Inheritance
    3. The Cascade
      1. Sorting by Weight and Origin
      2. Sorting by Specificity
      3. Sorting by Order
      4. Non-CSS Presentational Hints
    4. Summary
  17. 17. Values, Units, and Colors
    1. Keywords, Strings, and Other Text Values
      1. Keywords
      2. Strings
      3. URLs
      4. Images
      5. Identifiers
    2. Numbers and Percentages
      1. Integers
      2. Numbers
      3. Percentages
    3. Distances
      1. Absolute Length Units
      2. Resolution Units
      3. Relative Length Units
    4. Calculation values
    5. Attribute Values
    6. Color
      1. Named Colors
      2. Colors by RGB and RGBa
      3. Colors by HSL and HSLa
      4. Bringing the Colors Together
    7. Angles
    8. Time and Frequency
    9. Position
    10. Summary
    11. Color Equivalence Table