Css by Meyer, Eric A. -- Read -- Imperial Library of Trantor

Index

Preface

Conventions Used in This Book

Value Syntax Conventions

Using Code Examples O’Reilly Safari How to Contact Us Acknowledgments

Eric Meyer Estelle Weyl

1. CSS and Documents

A Brief History of (Web) Style Elements

Replaced and Nonreplaced Elements

Replaced elements Nonreplaced elements

Element Display Roles

Block-level elements Inline-level elements

Bringing CSS and HTML Together

The link Tag

Attributes Alternate stylesheets

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

2. Selectors

Basic Style Rules

Element Selectors Declarations and Keywords

Grouping

Grouping Selectors

The universal selector

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 A Particular Attribute Selection Type

Matching one word in a space-separated list Matching a substring within an attribute value Matching a substring at the beginning of an attribute value Matching a substring at the end of an attribute value

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

Selecting the root element Selecting empty elements Selecting unique children Selecting first and last children Selecting first and last of a type Selecting every nth child Selecting every nth of a type

Dynamic Pseudo-Classes

Hyperlink pseudo-classes User action pseudo-classes Real-world issues with dynamic styling

UI-State Pseudo-Classes

Enabled and disabled UI elements Check states Default option pseudo-class Optionality pseudo-classes Validity pseudo-classes Range pseudo-classes Mutability 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

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

4. Values and Units

Keywords, Strings, and Other Text Values

Keywords

Global keywords

inherit initial unset

Strings URLs Images Identifiers

Numbers and Percentages

Integers Numbers Percentages Fractions

Distances

Absolute Length Units

Pixel lengths Pixel theory

Resolution Units Relative Length Units

em and ex units The rem unit The ch unit Viewport-relative units

Calculation values Attribute Values Color

Named Colors Colors by RGB and RGBa

Functional RGB colors RGBa colors Hexadecimal RGB colors Hexadecimal RGBa colors

Colors by HSL and HSLa Color Keywords

Angles Time and Frequency Position Custom Values

5. Fonts

Font Families

Using Generic Font Families Specifying a Font Family

Using quotation marks

Using @font-face

Required Descriptors

On being bulletproof

Other Font Descriptors

Restricting character range

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

Rounding for display Keywords and monospace text

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

The font-variant descriptor

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

6. Text Properties

Indentation and Inline Alignment

Indenting Text Text Alignment

Start and end alignment Justified text Parent matching

Aligning the Last Line

Inline Alignment

The Height of Lines

Constructing a line Assigning values to line-height Line-height and inheritance

Vertically Aligning Text

Baseline alignment Superscripting and subscripting Bottom feeding Getting on top In the middle Percentages Length alignment

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

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

Baselines and line heights

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

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

Multiple styles Single-side styles

Border Widths

No border at all

Border Colors

Transparent borders

Shorthand Border Properties Global Borders Borders and Inline Elements Rounding Border Corners

More complex corner shaping Corner blending Individual rounding properties

Image Borders

Loading and slicing a border image Altering the image widths Creating a border overhang Altering the repeat pattern Shorthand border image Some examples

Outlines

Outline Styles Outline Width Outline Color

The only outline shorthand

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

9. Colors, Backgrounds, and Gradients

Colors

Foreground Colors Affecting Borders Affecting Form Elements Inheriting Color

Backgrounds

Background Colors

Special effects

Clipping the Background Background Images

Using an image Why backgrounds aren’t inherited Good background practices

Background Positioning

Keywords Percentage values Length values Negative values Changing the offset edges

Changing the Positioning Box Background Repeating (or Lack Thereof)

Repeating and positioning Spacing and rounding Tiling and clipping

Getting Attached

Interesting effects

Sizing Background Images

Covering and containing

Bringing It All Together Multiple Backgrounds

Filling in missing values

Gradients

Linear Gradients

Gradient colors Positioning color stops Setting color hints Gradient lines: the gory details

Radial Gradients

Shape and size Positioning radial gradients Radial color stops and the gradient ray Degenerate cases

Manipulating Gradient Images Repeating Gradients

Average gradient colors

Box Shadows Summary

10. Floating and Shapes

Floating

Floated Elements

No floating at all

Floating: The Details Applied Behavior

Negative margins

Floats, Content, and Overlapping

Clearing Float Shapes

Creating a Shape

Inset shapes Circles and ellipses Polygons

Shaping with Image Transparency Adding a Shape Margin

Summary

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

12. Flexible Box Layout

Flexbox Fundamentals

A Simple Example

Flex Containers

The flex-direction Property Other Writing Directions Wrapping Flex Lines Defining Flexible Flows

Understanding axes

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

Space between, around, and evenly

Flex Items

What Are Flex Items? Flex Item Features

Absolute positioning

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

Percentage units

Zero Basis

The flex Shorthand

Common Flex Values

Flexing with initial Flexing with auto Preventing flexing with none Numeric flexing

The order property

Tabbed Navigation Revisited

13. Grid Layout

Creating a Grid Container Basic Grid Terminology Placing Grid Lines

Fixed-Width Grid Tracks Flexible Grid Tracks

Fractional units Content-aware tracks

Fitting Track Contents Repeating Grid Lines

Auto-filling tracks

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

14. Table Layout in CSS

Table Formatting

Visually Arranging a Table

Table arrangement rules

Table Display Values

Row primacy Columns

Anonymous Table Objects

Object insertion rules

Table Layers Captions

Table Cell Borders

Separated Cell Borders

Border spacing Handling empty cells

Collapsing Cell Borders

Collapsing border layout Border collapsing

Table Sizing

Width

Fixed layout Automatic layout

Height Alignment

Summary

15. Lists and Generated Content

Lists

Types of Lists

String markers

List Item Images List-Marker Positions List Styles in Shorthand List Layout

Generated Content

Inserting Generated Content Specifying Content

Inserting attribute values Generated quotes

Counters

Resetting and incrementing Using counters Counters and scope

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

16. Transforms

Coordinate Systems Transforming

The Transform Functions

Translation functions Scale functions Rotation functions Skew functions The perspective function Matrix functions A note on end-state equivalence

More Transform Properties

Moving the Origin Choosing a 3D Style Changing Perspective

Defining a group perspective Moving the perspective’s origin

Dealing with Backfaces

Summary

17. Transitions

CSS Transitions Transition Properties

Limiting Transition Effects by Property

Suppressing transitions via property limits Transition events

Setting Transition Duration Altering the Internal Timing of Transitions

Step timing

Delaying Transitions

Negative delay values

The transition Shorthand

In Reverse: Transitioning Back to Baseline

Reversing interrupted transitions

Animatable Properties and Values

How Property Values Are Interpolated

Interpolating repeating values

Fallbacks: Transitions Are Enhancements Printing Transitions

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

Animation chaining Animation iteration delay

Changing the Internal Timing of Animations

Step timing functions Adding a second animation Animating the timing function

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

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

20. Media-Dependent Styles

Defining Media-Dependent Styles

Basic Media Queries Complex Media Queries

Media feature descriptors New value types Responsive styling

Paged Media

Print Styles

Differences between screen and print Defining the page size Page margins and padding Selecting page types Page-breaking Orphans and widows Page-breaking behavior Repeated elements Elements outside the page

Summary

A. Animatable Properties B. Basic Property Reference C. Color Equivalence Table Index

← Prev
Back
Next →

← Prev
Back
Next →