CSS3 Jumpstart - Zero to CSS HERO

CSS Introduction

HTML Structure and Content, CSS Presentation
Advantages of CSS
Creating and Using Style-Sheets
CSS Rules: The Basic Syntax
Case, Whitespace and Comments in CSS
The CSS Standards
The Scope of CSS
Browser Support for CSS

CSS Boxes and CSS Selectors

The CSS Box Model
CSS and Logical HTML Structure
Styling Boxes: Borders, Margins and Padding
The IE Box Model and Quirks Mode
IE Box Model Workarounds
Using IE6 Standards Mode
Specifying CSS Distances
Problems with Absolute Units: pixels and point sizes
Using Proportional Units: em, ex and percentages
Formatting Box Edges Differently
Shorthand Syntax for Sets of Edges
Using Margins and Padding Effectively
Collapsing Vertical Margins on Paragraphs
Using Negative Margins on Boxes
Background Images on CSS Boxes
Grouping Elements with HTML Classes
Styling Multiple Elements Similarly (Selector Grouping)
Block Boxes and Inline Boxes
Block Box Behaviour
Inline Box Behaviour
Text Formatting in CSS
Text Formatting
Typefaces, Alternatives and Defaults
Text Size a Serious Usability Issue
Font Characteristics
Setting and Using Space Within Text
Formatting Blocks of Text
Using Arbitrary Inline Tags:

More CSS Selectors and Selection

Using HTML Element IDs in CSS
Using CSS Descendant Selectors
Descendant Selector Examples
Why You Need To Know Them
Browser Support and CSS Hacks
Distinguishing and Setting Link States
Link, Visited, Hover, Active, Focus
Modularising CSS Style-Sheets
Simpler Management, Less Effort, More Control
Embedded CSS Styles in HTML Documents
How and When to Use Them (Rarely)
Distinguishing Print, Screen and other Output Formats
Special Issues in CSS for Print

CSS Positioning

Choosing the Right CSS
Technique for Positioning Blocks
The Position Property, Floats, Margins (inc. Negative and Auto), etc
Static Positioning and Normal Flow
Absolute Positioning Outside Normal Flow
Relative Positioning — Not What You May Expect!
Fixed Positioning Outside Normal Flow
Relative Absolute Positioning
Absolutely Positioned Blocks in Relatively Positioned Containers
Floating Boxes with the CSS float property
Page Layout Using Absolutely Positioned Blocks

Using CSS in the Real World

Deploying CSS
CSS Formatting Versus HTML Formatting
Achieving a Balance
Standard Tags and Semantic Markup
Usability
Readable Pages
Screen Size and Fluid Design
Text Size, Including Internet Explorer Quirks
Table Layout and CSS Positioning
Table Layout and CSS Positioning as Alternatives
Combining Table Layout with CSS Positioning
CSS Browser Support
Testing Websites
Using Test Suites and Multiple Browsers
Cross-platform Testing in Single-platform Environments
CSS Help and Advice
Authoritative Sources versus Web Myths and Gossip
Free Lifetime Support

More on CSS Page Layout

Alternative Methods of CSS Positioning
Centering Blocks
Styling Lists
Redefining the Behaviour of Inline and Block Elements
Hiding and Revealing Blocks
Table Formatting in CSS
Styling Table Cell Borders
Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

Taking Control: Ensuring that CSS Rules Interact in the Way You Want
Combining Styles: Different Types, Origins, Importance, Specificity and Order
Examples: Combining Rules
Cascading and Cascade Order
Resolving Style Conflicts By Origin
Resolving Style Conflicts By Importance
Resolving Conflict By Selector Specificity
Resolving Conflict By Order
Non-CSS Presentational Hints
Property Inheritance

CSS Layers and Translucency

Different Forms of Layered Presentation in CSS
Layering with the z-index Property
Different Methods for Creating Translucency Effects
The CSS3 opacity Property
opacity Example
Fixed Attachment Backgrounds in Layers
background-attachment Example
Transparency and Semi-transparency with Alpha-Blended PNG
PNG Translucency Example and Sample Code
Pseudo-Transparency with JPG Positioned Backgrounds
JPG Pseudo Transparency Example

CSS3 on mobile devices

CSS3 media queries
Different Sizes
Orientation Change

Fonts & Text

Using Custom Fonts
@font property
Importing fonts
Web Font formats
Buying web fonts
TypeKit, fontsquirrel
Using google font api
Text shadows
Font sizing with REM
Enhanced Text Gradients

Enhancing your boxes

Box rounding
Adding a Shadow to objects
Opacity & Transparency
Colouring with RGB and Alpha
Adding a CSS3 Gradient
Rotating objects
Applying animations & transitions

Backward compatibility tools

CSS3Pie,
CSS3Please & Generators
Transformie, Modernizr
Selectivizr

Useful CSS Tips

Usage of CSS Sprites
Pseudo Selectors
CSS minify
Cheat Sheet for CSS3