Contents

About the Author

About the Technical Reviewer

Acknowledgments

Introduction

Part I: CSS Basics

Chapter 1: Introducing CSS—the Language of Web Design

A Short History of CSS

Why Designers Took So Long to Embrace CSS

Understanding the Different Versions of CSS

So, How Do I Use CSS?

How Do I Write a Style Rule?

Why Are They Called “Cascading” Style Sheets?

Where Do I Create My CSS?

Learning to Write CSS Well

Test Your CSS Early in Several Browsers

Use Browser Developer Tools to Inspect Your CSS

Summary

Chapter 2: Using Basic Selectors

How Selectors Work

Understanding the DOM

The Importance of the DOCTYPE

Deciding Which Selector to Use

Universal Selector

Type Selectors

Class Selectors

ID Selectors

Pseudo-classes

Pseudo-elements

Descendant Selectors

Attribute Selectors

Grouping Multiple Selectors

Trying It Out

Styling Links

Changing the Look of the Cursor

Using Class Selectors

Using Pseudo-elements

What Happens When Style Rules Conflict?

Summary

Chapter 3: Specifying Sizes, Colors, and Files

Specifying Size and Other Units of Measurement

Numeric Values

Length

Percentages

Angles

Time

Setting Color Values

Color Keywords

Using Hexadecimal Notation

Using RGB Format

Using HSL Format

Creating Transparent Colors with the RGBA and HSLA Formats

Specifying Background Images and Other Files

Summary

Part II: Working with Text

Chapter 4: Styling Text

Selecting and Adjusting Fonts

Using font-family to Choose a Range of Alternative Fonts

Changing the Size of Fonts

Using font-style to Italicize Text

Using font-weight to Make Text Bolder or Lighter

Using font-variant to Display Text in Small Caps

Adjusting the Vertical Space Between Lines of Text

Using the Shorthand font Property

Changing the Color of Text

Formatting Text

Increasing or Decreasing the Space Between Letters

Controlling the Space Between Words

Aligning Text Horizontally

Aligning Text Vertically

Drawing Lines Under, Above, and Through Text

Indenting the First Line of Text

Switching Between Uppercase and Lowercase

Controlling Whitespace and Line Wrapping

Dealing with Text That’s Too Long

Adding Shadows to Text

Summary

Chapter 5: Embedding Web Fonts

Adding Web Fonts to Your Sites

Using a Font Hosting Service

Storing Fonts on Your Own Server

Choosing the Right Font Formats

Checking the License

Embedding Fonts with @font-face

Basic Syntax

“Bulletproof” @font-face Syntax

Specifying Bold and Italic

Specifying a Range of Characters

Adjusting Relative Font Sizes

Summary

Part III: CSS Page Layout

Chapter 6: Understanding the CSS Box Model

Introducing the Components of the Box Model

Setting Width and Height

Using Padding and Margins to Add Space Around Elements

Isn’t There an Easier Box Model?

Using Margins to Improve Page Layout

Removing the Default Margin from Your Pages

Centering Block-level Elements

Using Margins to Indent Text

Using Negative Margins

Changing Layout with the display Property

Understanding the Difference between inline and inline-block

Using the display Property to Hide Elements

Controlling Visibility

Handling Content That’s Too Big

Summary

Chapter 7: Floating Elements for Layout

How to Float an Element

Using float to Flow Text Around Images

Preventing Elements from Moving Alongside a Floated Element

Centering an Image

Adding a Caption to an Image

Adding a Sidebar Using the float and margin Properties

Summary

Chapter 8: Adding Backgrounds

Controlling Backgrounds with CSS

Changing the Background Color of an Element

Using Background Images

Adding Background Images

Controlling How Background Images Repeat

Controlling Background Images During Scrolling

Controlling the Position of Background Images

Setting the Size of Background Images

Using the background Shorthand Property

Adding Multiple Background Images to an Element

Summary

Chapter 9: Adding Borders and Drop Shadows

Creating Basic Borders

Setting Individual Border Properties

Using Border Shorthand Properties

Preventing Borders and Backgrounds from Extending Under Floats

Adding Rounded Corners and Drop Shadows Without Images

Creating Rounded Corners With border-radius

Adding Drop Shadows With box-shadow

Using Border Images

Individual Properties for Border Images

Using the Shorthand Property for Border Images

Avoiding Problems With the Center Slice

Styling Outlines

Summary

Chapter 10: Styling Lists and Navigation Menus

Styling Unordered and Ordered Lists

Changing the Symbol or Number

Changing the Position of the Symbol

Replacing the Symbol with Your Own Image

Using the list-style Shorthand Property

Creating a Navigation Bar from a List

Creating a Vertical Text-based Navigation Bar

Creating a Horizontal Text-based Navigation Bar

Using CSS Sprites in a Navigation Bar

Summary

Chapter 11: Positioning Elements Precisely

How Does CSS Positioning Work?

Understanding the Different Types of Positioning

Identifying the Containing Block

Setting the Offsets of a Positioned Element

Fixing Elements Inside the Browser Window

Using Relative Positioning

Using Absolute Positioning

Setting the Stacking Order with z-index

Understanding the Stacking Context

Using CSS Positioning for Tooltips and Menus

Creating Styled Tooltips

Creating a CSS Drop-down Menu

Masking an Absolutely Positioned Element

Summary

Chapter 12: Cross-Browser Layout Techniques

What Size Browser Window Should I Design For?

Creating a Single-column Layout

Using Floats for a Two-column Layout

Putting the Sidebar First and Floating It to One Side

Putting the Main Content First

Using Floats for a Three-column Layout

Using CSS Table Display for Layout

Anonymous Table Objects

Using CSS Table Display for Forms

Improving Accessibility with a “Skip to Main Content” Link

Summary

Part IV: Advanced CSS Techniques

Chapter 13: Using Advanced Selectors

Selecting First, Last, and Only Instances

Selecting Elements Based on their Position in a Series

Using a Number to Specify the Position

Using a Keyword

Specifying a Recurring Sequence

Selecting Elements Based on Their Relationship with Another

Using the Adjacent Sibling Combinator

Using the General Sibling Combinator

Selecting Form Elements Based on Their State

Selecting Elements Based on Negative Factors

Other Selectors

Pseudo-classes

Attribute Selectors

Pseudo-elements for Generated Content

Summary

Chapter 14: Styling Tables

Basic Table Structure

Header Cells

Table Captions

Defining Table Columns

Defining Table Header and Footer Rows

Grouping Table Rows into Sections

How Browsers Lay Out Tables

Styling Tables with CSS

Styling Table Borders

Adding Borders to Table Cells

Eliminating the Space Between Cells

Adding Borders to Columns and Rows

Applying Other Styles to Columns

Using the visibility Property with Table Rows

Adjusting the Space Between Table Cells

Adjusting Horizontal and Vertical Space Inside Table Cells

Controlling the Position of the Table Caption

Handling Empty Cells

Controlling the Width of a Table

Controlling the Horizontal and Vertical Alignment of Table Cells

Summary

Chapter 15: Generated Content

Inserting Generated Content

Defining the Content to be Inserted

Inserting Images and Text

Generating Content from an Attribute

Generating Quotes Automatically

Generating Numbered Sequences

Creating Fun Visual Effects with Generated Content

Creating a Ribbon Effect

Creating a Comment Bubble

Creating a Thought Bubble

Creating a Speech Bubble

Summary

Chapter 16: Creating a Print Style Sheet

What’s Different About Print CSS?

Issues that Need to be Considered

What Print Style Sheets Cannot Do

Specifying the Media Type

Linking External Style Sheets

Specifying Media Types with @import

Specifying Media Types for Embedded Styles

Using @media Rules

Setting Page Margins

The @page Rule

Controlling Where to Break Content

Controlling How Elements Are Broken

Creating Styles for Printing

Using the Cascade for Print Styles

Attaching Independent Style Sheets

Summary

Chapter 17: Targeting Styles with Media Queries

Creating Responsive Web Designs

Desktop or Mobile First?

Browser Support for Media Queries

How Media Queries Work

Media Features

Media Query Syntax

Attaching External Style Sheets

Using Media Queries Inside Style Sheets

Normalizing Width Values for Mobile Devices

Setting the Viewport Size in HTML

Setting the Viewport Size in CSS

Width and Orientation—A Conundrum

Dealing with Images

Controlling Background Images with Media Queries

Controlling Images Embedded in the HTML

Providing Images for High-Resolution Displays

Case Study: Responsive Layout

Summary

Chapter 18: Using CSS3 Multi-Column Layout

Browser Support for Multi-Column Layout

How Columns Are Laid Out

Setting the Width and Number of Columns

Setting Only Width

Setting Only the Number of Columns

Setting Both Width and Number

Using the Shorthand Property

Setting the Gap and Rule Between Columns

Changing the Width of the Gap

Adding a Vertical Rule Between Columns

Spanning, Filling, and Breaking Columns

Spanning Columns

Controlling How Columns Are Filled

Dealing with Column Breaks

Summary

Chapter 19: Creating Gradients Without Images

CSS Gradient Basics

Using Browser-Specific Prefixes

Specifying Gradient Colors

Creating Linear Gradients

Using Keywords to Set the Direction of the Gradient Line

Setting the Angle of the Gradient Line

Creating Radial Gradients

Standard Syntax

Syntax for Browser-Specific radial-gradient() Functions

Creating Repeating Gradients

Creating Diagonal Stripes

Creating a Smooth Repeating Gradient

Creating Repeating Radial Gradients

Using Multiple Gradients

Supporting Older Browsers

Summary

Chapter 20: 2D Transforms and Transitions

Browser Support for 2D Transforms and Transitions

Using 2D Transforms

2D Transform Functions

Animating Property Values with CSS Transitions

Choosing Which Properties to Animate

Specifying the Duration of the Transition

Setting the Pace of the Transition

Delaying the Transition

Changing the Reverse Transition

Using the Shorthand Property

Using CSS Transitions with Images

Creating a Rollover Image Without JavaScript

Sliding an Image Out of View

Summary

Chapter 21: Animating with CSS Keyframes

Browser Support for CSS Animations

Defining Keyframes

Specifying the Pace of Change Between Keyframes

Animating Elements with Keyframes

Specifying Which Animation to Use

Setting the Duration of an Animation

Setting the Timing Function Between Keyframes

Setting the Number of Times an Animation Runs

Specifying Whether the Animation Should Run in Reverse

Pausing an Animation

Delaying an Animation

Controlling Properties Before and After Animation

Using the animation Shorthand Property

Applying Multiple Animations

Summary

Chapter 22: What Next?

Flexible Box Layout

Understanding Flex Layout Terminology

Creating a Flex Container

Controlling the Flow in a Flex Container

Reordering Individual Flex Items

Controlling the Dimensions of Flex Items

Aligning Flex Items

Other Features to Look Forward To

Checking Whether a Browser Supports a Feature

Hyphenation

3D Transforms

CSS Variables

CSS4 Selectors

Advanced Layout and Effects

Summary

Index