CSS Masterclass
The use of Cascading Style Sheets (CSS) enables web designers to create visually consistent sites that provide a better user experience. Advanced CSS skills allow users to ensure designs work with multiple browsers.
Quick Facts
Duration: 3 Days
Class Size: 10
Level: Advanced
Times: 9.00am to 5.00pm approx
About the Course
During this 3 day course, participants will learn advanced CSS techniques, including background images, PNG alpha transparency, buttons, rollovers, and cascade, specificity and inheritance properties. Instructors will also cover advanced CSS selectors, conditional comments, hacks and filters for specific browsers, and bug hunting and resolution.
Who should do this course?
The course is ideal for anybody currently using CSS-based layouts but has encountered problems with making CSS designs work in multiple browsers, and wants to understand the impact of Internet Explorer 7 on existing websites.
Prerequisites
Participants 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 (including creating layouts with both floats and positioning) is assumed.
Course Units
- Unit 1: CSS Foundations
- - Structuring code correctly
- • Meaningful markup
- • DOCTYPE switching and 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 shadow
- • 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 within a relative container
|
Upcoming Courses
|
Sydney
Level 11, 32 Walker Street
North Sydney
View map
|
- Date:
- 01-03 Nov 10
- 12-14 Jan 11
|
|
Melbourne
Level 12, 379 Collins Street
Melbourne
View map
|
- Date:
- 03-05 Nov 10
|
|
Brisbane
C/- Training Choice, Mezzanine Level, 88 Creek Street
Brisbane
View map
|
- Date:
- 25-27 Oct 10
|
|
Canberra
C/- Training Choice, Level 4, 54 Marcus Clarke Street
Canberra
View map
|
Date: upon demand
|
|
Adelaide
C/- Mindfull Computer & Seminar, Level 4, 74 Pirie Street
Adelaide
View map
|
Date: upon demand
|
|
Perth
C/- Training Choice, Level 7, 105 St Georges Terrace
Perth
View map
|
Date: upon demand
|
Duration: 3 Days
Class Size: 10
Level: Advanced
Times: 9.00am to 5.00pm approx
