Proficient use of CSS (Cascading Style Sheets) enables web designers to create sites that:

• are quicker and easier to develop and maintain;
• download faster;
• are visually consistent;
• are more accessible;
• provide a better user experience; and
• rank better with search engines

Anyone who is already using CSS-based layouts but has encountered problems with making CSS designs work in multiple browsers and who wishes to understand the impact of Internet Explorer 7 on existing websites.

Students should have completed the Advanced Website Design Using CSS course or have equivalent knowledge prior to commencing this course. A sound understanding of both XHTML and CSS 2.1 (including creating layouts with both floats and positioning) is assumed.

During this 3 day course, you will learn how to:

• Use advanced CSS selectors;
• Understand the cascade, specificity, and inheritance;
• Use background images to create round-cornered boxes and drop shadows;
• Use PNG alpha transparency;
• Create complex buttons and rollovers;
• Apply conditional comments and band pass filters for Internet Explorer;
• Create liquid and elastic layouts;
• Employ a variety of hacks and filters to hide and/or show CSS to specific browsers;
• Learn a systematic approach to bug hunting;
• Squash a range of common CSS bugs.
  

The following content list is designed to provide a broad overview of the topics that will be covered in the course.

Unit 1: CSS Foundations

* Structuring code correctly
   - Meaningful markup
   - DOCTYPE switching & browser modes
   - Validation
* Advanced CSS selectors
   - Universal selector
   - Child and adjacent sibling selectors
   - Attribute selectors
* The cascade and specificity
* Inheritance
* Planning, organising, and maintaining stylesheets
   - Adding and removing comments
   - Optimising your stylesheets
   - Style guides

Unit 2: The Visual Formatting Model

* The CSS Box Model
   - IE/Win and the box model
   - Margin collapsing
* Positioning
   - Visual Formatting model
   - Relative positioning
   - Absolute positioning
   - Fixed positioning
* Floating

Unit 3: Background Images

* Rounded-corner boxes
   - Fixed width
   - Flexible
* Drop-shadows
   - Easy CSS drop shadows
   - Clagnut drop shadows
   - Fuzzy shadows
* Fluid Images

Unit 4: Image Replacement

* Using bitmaps
   - Fahner method
   - Phark method
   - Gilder/Levin method
* Using Flash
   - Inman Flash Replacement
   - Scaleable Inman Flash Replacement

Unit 5: Advanced Link Styling

* Fancy link underlines
* Highlighting different types of links
* Highlighting downloadable documents and feeds
* Visited link styles

Unit 6: Buttons and Rollovers

* Simple rollovers
* Image rollovers
* Pixy-style rollovers

Unit 7: Styling Lists and Navigation Bars

* Basic list styling
* Creating a vertical navigation bar
* Highlighting the current page in a nav bar
* Creating a horizontal navigation bar

Unit 8: More Complex Navigation

* CSS Tabs
* CSS image maps
* Dropdown menus

Unit 9: Advanced Layout

* Centering a design
   - Using positioning
   - Using negative margins
* Float-based layouts
   - Two-column layout
   - Three-column layout
* Liquid and elastic layouts
* Faux columns

Unit 10: Introduction to hacks and filters

* Using hacks sensibly
* Filtering separate stylesheets
   - Internet Explorer conditional comments
   - Band pass filters
* Applying IE conditional comments

Unit 11: Filtering individual rules and              declarations

* Child selector hack
* Attribute selector hack
* Star HTML (* HTML) hack
* Escaped property hack
* Tantek's box model hack
* Modified simplified box model hack
* The !important and underscore hacks
* Owen hack

Unit 12: Bugs and Bug Fixing

* A systematic approach to bug hunting
* Recognizing common CSS problems
   - Specificity and sort order
   - Margin collapsing
* Bug hunting basics
   - Isolate the problem
   - Create a minimal test case
   - Fix the problem, not the symptoms
   - Ask for help
* Understanding IE's rendering engine
   - What is "layout"?
   - What is the effect of "having layout"?
* Common bugs and their fixes
   - Double-margin float bug
   - Three-pixel text jog bug
   - IE6 duplicate character bug
   - IE6 peek-a-boo bug
   - Absolute positioning in a relative container