CSS Training Course

The CSS training course is best suited to people who want to design their web pages well, and who want to learn how to avoid the most common problems when using CSS. You will learn how to setup your machine for debugging and testing, and also learn useful tips and techniques for styling your pages, and how to organise your styles to help you maintain your web pages more easily.

Prerequisites
Delegates should be comfortable working with either the Windows or Mac operating systems, and should feel at ease performing tasks such as copy and paste, open and save files, switch between windows, and starting programs.  You should have attended the Intro to HTML training course or have equivalent knowledge.

Course Outline

Introduction

• Syntax
• Structuring your code
• A brief history of markup
• The power of meaning
• IDs and class names
• Naming your elements
• IDs and Classes
• Divs and spans
• Different versions of HTML and CSS
• Document types
• DOCTYPE switching, and browser modes
• Validation

Basic CSS

• Browser modes
• Backgrounds
• Text and Font
• The Box Model
• Borders
• Outline
• Margins and Padding
• Lists and Tables

Styles

• Common selectors
• Pseudo-classes
• The universal selector
• Advanced selectors
• Child and adjacent sibling selectors
• Attribute selectors
• Cascading and Inheritance
• Adding a class or an ID to the body tag
• Planning, organising, and maintaining your style sheets
• Applying styles to your document
• Style guides

Effects

• Background image basics
• Rounded-corner boxes
• Fixed-width rounded-corner boxes
• Flexible rounded-corner box
• Mountaintop corners
• Multiple background images
• border-radius
• border-image
• Shadows
• PNG transparency
• CSS parallax effect
• Image replacement

Styling with Links

• Link styles
• Rollover effects
• CSS tooltips
• Lists
• Navbars

Forms and Tables

• Styling forms
• Styling tables

Layout

• Boxes
• Columns
• Liquid layouts
• Alignments
• Positioning
• Floats

Commons Problems

• Common CSS problems
• Finding the bug
• Using Firefox with Firebug, and other add ons
• Internet Explorer workarounds
• How to set up your test machine

Summary

Quiz

References

• CSS references
• CSS Units
• CSS Colours
• CSS Colour values
• CSS Colour names