CSS Introduction / Intermediate

Overview

Aspect Training's two day CSS Introduction / Intermediate training course covers the fundamentals of CSS web design through expert tuition and hands-on exercises. The course teaches delegates how to deliver identical, visually appealing, content to different browsers, applications, platforms, and devices, using Cascading Stylesheets (CSS).

Aspect Training's two day CSS course is ideal for:

• Web site designers
• Web developers
• Communications, marketing and design professionals who want to:
  • Produce more accessible sites using CSS
  • Produce more usable sites using CSS
  • Produce search engine optimised (SEO) sites using CSS

Prerequisites:

This course is suitable for people with limited CSS experience and those with no CSS experience at all and who have a good understanding of HTML or XHTML

Course Topics:

Getting Started with CSS

Introduction to this CSS course

Course Organisation

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

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