Contents
Introduction
Who Should Read This Book
What You Will Learn
What You Won’t Find in This Book
What You Need to Follow Along
Resources
Writing CSS
Case Sensitivity
Comments
Whitespace
Quoting and Escaping Quotes
Tools
Chapter 1. CSS Basics
What Is CSS?
What Are Styles Sheets?
Anatomy of a Statement
Cascading
Inheritance
Specified, Computed, Used, and Actual Values
Block, Inline, and Replaced Elements
Web Standards and Specifications
User Agents, Browsers, and Devices
Working with CSS
Attaching Styles to HTML
Coding Styles
Chapter 2. Web Browsers
Where Do Styles Come From?
Browser Style Sheets
User Settings
User Style Sheets
Rendering Modes
Standards Mode
Almost Standards Mode
Quirks Mode
Choosing Modes with a DOCTYPE Switch
X-UA-Compatible
Specific Mode Differences
Targeting Browsers
Targeting with Selectors
Targeting with Syntax Hacks
Microsoft Conditional Comments
IE and hasLayout
Browser Grading
A-Grade Browsers
B-Grade Browsers
F-Grade Browsers
X-Grade Browsers
A+-Grade Browsers
CSS Support via JavaScript
Chapter 3. Selectors
E (Type Selectors)
* (Universal Selector)
#id (ID Selector)
.class (Class Selector)
Attribute Selectors
[att]
[att=val]
[att~=val]
[att|=val]
[att^=val]
[att$=val]
[att*=val]
Pseudo-class Selectors
:link, :visited (Link Pseudo-classes)
:hover, :active, :focus (Action Pseudo-classes)
:target (Target Pseudo-class)
:enabled, :disabled, :checked (UI Pseudo-classes)
:lang() (Language Pseudo-class)
:root (Root Element Pseudo-class)
:nth-child(), :nth-last-child() (Nth Child Pseudo-classes)
:first-child, :last-child (First and Last Child Pseudo-classes)
:nth-of-type(), :nth-last-of-type() (Nth of Type Pseudo-classes)
:first-of-type, :last-of-type (First and Last of Type Pseudo-classes)
:only-child (Only Child Pseudo-class)
:only-of-type (Only of Type Pseudo-class)
:empty (Empty Pseudo-class)
:not() (Negation Pseudo-class)
Pseudo-element Selectors
::first-letter (First-Letter Pseudo-element)
::first-line (First-Line Pseudo-element)
::before, ::after (Before and After Pseudo-elements)
::selection (Selection)
Combinators or Relational Selectors
E F (Descendant Combinator)
E>F (Child Combinator)
E+F (Adjacent Sibling Combinator)
E~F (General Sibling Combinator)
Combining and Chaining Selectors
Specificity
The !important Declaration
Selector Strategies
Browser Support for Selectors
Grouping Selectors
Selector Speed
Selector Readability
Selector Reusability
Chapter 4. Measurements, URLs, and Color Units
Measurements
Pixels (px)
Ems (em)
Points (pt)
Percentages (%)
Other Units of Note
URLs
Basic Colors
#rrggbb or #rgb
rgb(r,g,b)
hsl(h,s,l)
Color Keywords
Color with Alpha Transparency
rgba(r,g,b,a)
hsla(h,s,l,a)
transparent
Creating and Maintaining Color Palettes
Design
Maintenance
Chapter 5. The Box Model
Properties
width
height
margin
padding
border-width
overflow
Min and Max Dimensions
Nesting Elements
Using Negative Margins
Horizontal Centering Blocks
An Alternative Box Model
box-sizing
Chapter 6. Positioning and Floats
The Document Flow
display
Position
static
relative
absolute
fixed
Origins and Containing Blocks
z-index
visibility
float
clear
Chapter 7. Page Layouts
Building Blocks of CSS Layouts
Creating Content Blocks
Floating into Margins
Creative Use of Backgrounds
Inline and Floated List Items
Using Positioning to Escape Containers
Overlays, Tooltips, and Drop-Down Menus
Multicolumn CSS Layouts
A Two-Column Layout
Two Columns with Right Sidebar
A Three-Column Layout
Fixed-Sized, Flexible, and Mixed Columns
Designing with Constraints
Chapter 8. Backgrounds and Borders
Backgrounds
Multiple Background Images
Strategies for Background Images
Background Image Sprites
Border
Outline
Faking Rounded Corners
Chapter 9. Typography and Web Fonts
Font Basics
font-family
font-size
font-weight
font-variant
font-style
line-height
font (Shorthand)
vertical-align
Additional Font Styling
text-decoration
text-transform
word-spacing
letter-spacing
text-align
white-space
word-wrap
text-indent
text-shadow
Specifying Typefaces
System Fonts
Font Embedding
Custom Fonts via Text Replacement
Chapter 10. Lists and Tables
Lists
display: list-item
list-style-type
Generated Content
Counters
Tables
table-layout
border-collapse
border-spacing
empty-cells
vertical-align
text-align
Table display Values
Chapter 11. Forms and User Interface Elements
Working with Form Controls
Sizing
Colors, Backgrounds, and Borders
Text and Form Element Inheritance
States: Disabled, Required, and Invalid
Common Form Element Layouts
Label Stacked Above the Field
Basic Multicolumn Forms
Label Besides the Field
Exceptions for Radio Buttons and Check Boxes
Inputting Tabular Data
Conditional Fields
Placeholder Text
Making Buttons
Background Images
CSS3: text-shadow, border-radius, and Gradients
Links As Buttons
Chapter 12. Media: Printing and Other Devices
Media Types
List of Media Types
Specifying Media Types
Print Media
page-break-before and page-break-after
page-break-inside
The @page Rule
Print Considerations
Hyperlinks and Generated Content
Mobile Media
Mobile Considerations
Media Queries
Media Features
Responsive Design
Browser Support
Chapter 13. Resets and Frameworks
CSS Resets
Using Resets
Why Not Reset?
Cross-Browser CSS via JavaScript
Common Bridge Libraries
Why Not Use JavaScript?
CSS Frameworks
Common CSS Frameworks
Why Not Use a Framework?
Beyond Frameworks
CSS Preprocessors
Chapter 14. The Not Too Distant Future of CSS
The box-shadow Property
The background-size Property
Color Gradients
Border Images
WAI-ARIA Roles
The calc() Function
Transformations and Rotations
Transitions
Index
