Course Overview

This CSS training course teaches the fundamentals of modern web design using only stylesheets for layout and design — no HTML formatting attributes

Getting Started with CSS

• Separating HTML from CSS
• Using HTML only for structure. meaning, and content
• Using only CSS for graphic design, presentation and rendering
• Linking CSS style sheets to web pages
• Embedding CSS styles in HTML — usually a bad idea
• The basic syntax of CSS
  • Rules
  • Selectors
  • Block
  • Properties
  • Values
• Whitespace and Comments in CSS
• Why CSS standards matter
• Current standards and their status
• CSS 1
• CSS 2
• CSS 2.1
• CSS 3
• Browser Support for CSS standards
  • Which standards are supported by which browsers
  • Proper behaviour when styles are missing/present
  • Browser default styles vs. designer stylesheets
  • Quirks mode vs. standards mode
  • Non-standard behaviours in IE6, IE7 and IE8
• Hands-on Exercises

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
• Using the Generic Block Level Element: <div>
• Hands-on Exercises

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: <span>
• Hands-on Exercises

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
• Hands-on Exercises

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
• Page Layout Using Floated Blocks
• Hands-on Exercises

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
• Hands-on Exercises

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
• Hands-on Exercises

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-transpaency with Alpha-Blended PNG
• PNG Translucency Example and Sample Code
• Pseudo-Transparency with JPG Positioned Backgrounds
• JPG Pseudo Transparency Example
• Hands-on Exercises

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

Target Audience

People who want to:

• Improve control over how browsers render your designs
• Display web designs identically in different browsers
• Vary web designs for different output media (e.g. Print, Handheld, Desktop)
• Use CSS for search engine optimisation (SEO), e.g.
  • Out-of-order positioning — content and display in different orders
  • Increasing key word densities
  • Remove HTML formatting and JavaScript bloat
• Use CSS to improve website usability
• Use CSS to enhance website accessibility

Potential students may be:

• Web site designers
• Web developers
• Communications and marketing professionals with a web brief
• Graphic designers who need to enhance their web design skills
• SEO consultants
• Members of the general public who wish to do the things outlined in the previous list

Pre-requisites

• A good understanding of HTML or XHTML
• Graphic ambition — actual talent is not required!
• Willingness to throw away outdated HTML formatting habits
• Willingness to hand code HTML and CSS

Course Schedule

• Wed, 11 April 2012 in London, £450
• Wed, 9 May 2012 in Leeds, £450
• Tue, 12 June 2012 in London, £450
• Tue, 10 July 2012 in Leeds, £450
• Tue, 7 August 2012 in London, £450
• Tue, 4 September 2012 in Leeds, £450
• Tue, 9 October 2012 in London, £450
• Tue, 6 November 2012 in Leeds, £450
• Tue, 4 December 2012 in London, £450