CSS: The Definitive Guide: Visual Presentation for the Web

Description

If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a comprehensive guide to CSS implementation, along with a thorough review of the latest CSS specifications. CSS is a constantly evolving language for describing the presentation of web content on screen, printers, speech synthesizers, screen readers, and chat windows. It is used by all browsers on all screen sizes on all types of IoT devices, including phones, computers, video games, televisions, watches, kiosks, and auto consoles. Authors Eric Meyer and Estelle Weyl show you how to improve user experience, speed development, avoid potential bugs, and add life and depth to your applications through layout, transitions and animations, borders, backgrounds, text properties, and many other tools and techniques. This guide covers: Selectors, specificity, and the cascade Values, units, fonts, and text properties Padding, borders, outlines, and margins Colors, backgrounds, and gradients Floats and positioning tricks Flexible box layout The new Grid layout system 2D and 3D transforms, transitions, and animation Filters, blending, clipping, and masking Media and feature queries Cover Copyright Table of Contents Preface Conventions Used in This Book Value Syntax Conventions Using Code Examples O’Reilly Online Learning How to Contact Us Acknowledgments Eric Meyer Estelle Weyl Chapter 1. CSS and Documents A Brief History of (Web) Style Elements Replaced and Nonreplaced Elements Element Display Roles Bringing CSS and HTML Together The link Tag The style Element The @import Directive HTTP Linking Inline Styles Stylesheet Contents Markup Rule Structure Vendor prefixing Whitespace Handling CSS Comments Media Queries Usage Simple Media Queries Media Types Media Descriptors Media Feature Descriptors and Value Types Feature Queries Summary Chapter 2. Selectors Basic Style Rules Element Selectors Declarations and Keywords Grouping Grouping Selectors Grouping Declarations Grouping Everything New Elements in Old Browsers Class and ID Selectors Class Selectors Multiple Classes ID Selectors Deciding Between Class and ID Attribute Selectors Simple Attribute Selectors Selection Based on Exact Attribute Value Selection Based on Partial Attribute Values The Case Insensitivity Identifier Using Document Structure Understanding the Parent-Child Relationship Descendant Selectors Selecting Children Selecting Adjacent Sibling Elements Selecting Following Siblings Pseudo-Class Selectors Combining Pseudo-Classes Structural Pseudo-Classes Dynamic Pseudo-Classes UI-State Pseudo-Classes The :target Pseudo-Class The :lang Pseudo-Class The Negation Pseudo-Class Pseudo-Element Selectors Styling the First Letter Styling the First Line Restrictions on ::first-letter and ::first-line Styling (or Creating) Content Before and After Elements Summary Chapter 3. Specificity and the Cascade Specificity Declarations and Specificity Universal Selector Specificity ID and Attribute Selector Specificity Inline Style Specificity Importance Inheritance The Cascade Sorting by Weight and Origin Sorting by Specificity Sorting by Order Non-CSS Presentational Hints Summary Chapter 4. Values and Units Keywords, Strings, and Other Text Values Keywords Strings URLs Images Identifiers Numbers and Percentages Integers Numbers Percentages Fractions Distances Absolute Length Units Resolution Units Relative Length Units Calculation values Attribute Values Color Named Colors Colors by RGB and RGBa Colors by HSL and HSLa Color Keywords Angles Time and Frequency Position Custom Values Chapter 5. Fonts Font Families Using Generic Font Families Specifying a Font Family Using @font-face Required Descriptors Other Font Descriptors Combining Descriptors Font Weights How Weights Work Getting Bolder Lightening Weights The font-weight descriptor Font Size Absolute Sizes Relative Sizes Percentages and Sizes Font Size and Inheritance Using Length Units Automatically Adjusting Size Font Style The font-style Descriptor Font Stretching The font-stretch Descriptor Font Kerning Font Variants Level 3 Values Font Features The font-feature-settings Descriptor Font Synthesis The font Property Adding the Line Height Using Shorthands Properly Using System Fonts Font Matching Summary Chapter 6. Text Properties Indentation and Inline Alignment Indenting Text Text Alignment Aligning the Last Line Inline Alignment The Height of Lines Vertically Aligning Text Word Spacing and Letter Spacing Word Spacing Letter Spacing Spacing and Alignment Text Transformation Text Decoration Weird Decorations Text Rendering Text Shadows Handling Whitespace Setting Tab Sizes Wrapping and Hyphenation Wrapping Text Writing Modes Setting Writing Modes Changing Text Orientation Declaring Direction Summary Chapter 7. Basic Visual Formatting Basic Boxes A Quick Refresher The Containing Block Altering Element Display Changing Roles Block Boxes Horizontal Formatting Horizontal Properties Using auto More Than One auto Negative Margins Percentages Replaced Elements Vertical Formatting Vertical Properties Percentage Heights Auto Heights Collapsing Vertical Margins Negative Margins and Collapsing List Items Inline Elements Line Layout Basic Terms and Concepts Inline Formatting Inline Nonreplaced Elements Building the Boxes Vertical Alignment Managing the line-height Scaling Line Heights Adding Box Properties Changing Breaking Behavior Glyphs Versus Content Area Inline Replaced Elements Adding Box Properties Replaced Elements and the Baseline Inline-Block Elements Flow Display Contents Display Other Display Values Computed Values Summary Chapter 8. Padding, Borders, Outlines, and Margins Basic Element Boxes Width and Height Padding Replicating Values Single-Side Padding Percentage Values and Padding Padding and Inline Elements Padding and Replaced Elements Borders Borders with Style Border Widths Border Colors Shorthand Border Properties Global Borders Borders and Inline Elements Rounding Border Corners Image Borders Outlines Outline Styles Outline Width Outline Color How They Are Different Margins Length Values and Margins Percentages and Margins Single-Side Margin Properties Margin Collapsing Negative Margins Margins and Inline Elements Summary Chapter 9. Colors, Backgrounds, and Gradients Colors Foreground Colors Affecting Borders Affecting Form Elements Inheriting Color Backgrounds Background Colors Clipping the Background Background Images Background Positioning Changing the Positioning Box Background Repeating (or Lack Thereof) Getting Attached Sizing Background Images Bringing It All Together Multiple Backgrounds Gradients Linear Gradients Radial Gradients Manipulating Gradient Images Repeating Gradients Box Shadows Summary Chapter 10. Floating and Shapes Floating Floated Elements Floating: The Details Applied Behavior Floats, Content, and Overlapping Clearing Float Shapes Creating a Shape Shaping with Image Transparency Adding a Shape Margin Summary Chapter 11. Positioning Basic Concepts Types of Positioning The Containing Block Offset Properties Width and Height Setting Width and Height Limiting Width and Height Content Overflow and Clipping Overflow Element Visibility Absolute Positioning Containing Blocks and Absolutely Positioned Elements Placement and Sizing of Absolutely Positioned Elements Auto-edges Placing and Sizing Nonreplaced Elements Placing and Sizing Replaced Elements Placement on the Z-Axis Fixed Positioning Relative Positioning Sticky Positioning Summary Chapter 12. Flexible Box Layout Flexbox Fundamentals A Simple Example Flex Containers The flex-direction Property Other Writing Directions Wrapping Flex Lines Defining Flexible Flows flex-wrap Continued Arranging Flex Items Flex Container Justifying Content justify-content Examples Aligning Items Start, End, and Center Alignment Baseline Alignment Additional Notes The align-self Property Aligning Content Flex Items What Are Flex Items? Flex Item Features Minimum Widths Flex-Item–Specific Properties The flex Property The flex-grow Property Growth Factors and the flex Property The flex-shrink Property Proportional Shrinkage Based on Width and Shrink Factor Differing Bases Responsive Flexing The flex-basis Property The content Keyword Automatic Flex Basis Default Values Length Units Zero Basis The flex Shorthand Common Flex Values The order property Tabbed Navigation Revisited Chapter 13. Grid Layout Creating a Grid Container Basic Grid Terminology Placing Grid Lines Fixed-Width Grid Tracks Flexible Grid Tracks Fitting Track Contents Repeating Grid Lines Grid Areas Attaching Elements to the Grid Using Column and Row Lines Row and Column Shorthands The Implicit Grid Error Handling Using Areas Grid Item Overlap Grid Flow Automatic Grid Lines The grid Shorthand Subgrids Opening Grid Spaces Grid Gutters (or Gaps) Grid Items and the Box Model Aligning and Grids Aligning and Justifying Individual Items Aligning and Justifying All Items Layering and Ordering Summary Chapter 14. Table Layout in CSS Table Formatting Visually Arranging a Table Table Display Values Anonymous Table Objects Table Layers Captions Table Cell Borders Separated Cell Borders Collapsing Cell Borders Table Sizing Width Height Alignment Summary Chapter 15. Lists and Generated Content Lists Types of Lists List Item Images List-Marker Positions List Styles in Shorthand List Layout Generated Content Inserting Generated Content Specifying Content Counters Defining Counting Patterns Fixed Counting Patterns Cyclic Counting Patterns Symbolic Counting Patterns Alphabetic Counting Patterns Numeric Counting Patterns Additive Counting Patterns Extending Counting Patterns Speaking Counting Patterns Summary Chapter 16. Transforms Coordinate Systems Transforming The Transform Functions More Transform Properties Moving the Origin Choosing a 3D Style Changing Perspective Dealing with Backfaces Summary Chapter 17. Transitions CSS Transitions Transition Properties Limiting Transition Effects by Property Setting Transition Duration Altering the Internal Timing of Transitions Delaying Transitions The transition Shorthand In Reverse: Transitioning Back to Baseline Animatable Properties and Values How Property Values Are Interpolated Fallbacks: Transitions Are Enhancements Printing Transitions Chapter 18. Animation Defining Keyframes Setting Up Keyframe Animations Naming Your Animation Keyframe Selectors Omitting from and to Values Repeating Keyframe Properties Animatable Properties Nonanimatable Properties That Aren’t Ignored Scripting @keyframes Animations Animating Elements Naming Animations Defining Animation Lengths Declaring Animation Iterations Setting an Animation Direction Delaying Animations Animation Events Changing the Internal Timing of Animations Setting the Animation Play State Animation Fill Modes Bringing It All Together Animation, Specificity, and Precedence Order Specificity and !important Animation Order Animation Iteration and display: none; Animation and the UI Thread Seizure and Vestibular Disorders Animation Events and Prefixing animationstart animationend animationiteration Printing Animations Chapter 19. Filters, Blending, Clipping, and Masking CSS Filters Basic Filters Color Filtering Brightness, Contrast, and Saturation SVG Filters Compositing and Blending Blending Elements Darken, Lighten, Difference, and Exclusion Multiply, Screen, and Overlay Hard and Soft Light Color Dodge and Burn Hue, Saturation, Luminosity, and Color Blending Backgrounds Blending in Isolation Clipping and Masking Clipping Clip Shapes Clip Boxes Clip Filling Rules Masks Defining a Mask Changing the Mask’s Mode Sizing and Repeating Masks Positioning Masks Clipping and Compositing Masks Bringing It All Together Mask Types Border-image Masking Object Fitting and Positioning Chapter 20. Media-Dependent Styles Defining Media-Dependent Styles Basic Media Queries Complex Media Queries Paged Media Print Styles Summary Appendix A. Animatable Properties Appendix B. Basic Property Reference Appendix C. Color Equivalence Table Index About the Authors Colophon