Cascading Style Sheets (CSS) 101: Rookie

You should have a working knowledge of HTML.

Upon successful completion of this course you’ll be able to; convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.

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