Cascading Style Sheets (CSS) 101: Rookie

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


• Child, Sibling and Pseudo-Class Selectors


• 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

More on CSS Page Layout

• Alternative Methods of CSS Positioning


• Centring 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

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


• Authorative Sources versus Web Myths and Gossip


• Free Lifetime Support