Advanced CSS

Overview

This course is designed for those with previous experience of HTML or XHTML and who have a general understanding of CSS but need to gain an in depth understanding of the latest techniques using CSS for web design.

By the end of this course you will have a comprehensive knowledge of CSS and have built several CSS based visual design features. You will be able to create first class accessible web designs designs using CSS for presentation and semantic mark up. You will also learn about cross browser support for CSS and many of the work around's used in common practice.

The course is available on both Mac and PC systems.

Required skills and experience.

1. A good grasp of web page mark up (html or xhtml).
2. Some previous use of CSS.
3. Knowledge of different web browsers and cross browser compatibility.
4. A good working knowledge of either the Windows or Mac operating systems.
5. How to create and manage files and folders.

Duration

3 Days.

Standard course price

£650 pp excluding VAT

For more information on pricing please go to my rates page.

Course modules

Semantic mark up

• HTML or (x)HTML
• the DOCTYPE
• Semantics explained
• Document structure and flow
• Removing visual elements from mark up
• About web standards
• Validating your mark up

CSS review and basics

• CSS syntax
• CSS selectors
• Classes and ID's
• CSS1 vs CSS2 vs CSS3
• The cascade
• Inheritance
• Specificity
• Validating your CSS

Some basic CSS properties

• The box model
• Block vs inline elements
• Div's and spans
• Border properties
• Width, height and max, min
• The auto property

Creative artwork and CSS

• Using images in CSS
• Applying texture
• Graduated fills
• Round corners
• Transparency and semi-transparency
• Stretchy boxes
• Creative typography

Layout principals with CSS

• Document flow
• Absolute positioning
• Relative positioning
• Static positioning
• Floating elements

Building layout with CSS

• A centred container
• 2 column layout
• 3 column layout
• Faux columns

CSS based navigation

• Mark up structures for navigation
• Styling links with pseudo classes
• Building a horizontal navigation bar
• Building a vertical navigation bar
• CSS drop down navigation systems

Creating a CSS styled form

• Form mark up
• Associating labels with inputs
• Grouping form elements together
• Form based selectors
• Changing properties of form elements
• Formatting text in forms
• Formatting inputs
• Formatting form areas
• Changing the appearance of buttons
• Laying out forms

Styling a data table

• Basic table mark up
• Adding row and column headers
• Simplifying table structure
• Styling row and column headings
• Adding borders
• Formatting text in tables
• Laying out and positioning tables

Creating a print page

• Switching to a different media for print
• Showing and hiding elements
• Altering layout for print
• Changing font and font size for print
• Showing or hiding link information
• Previewing and testing print styles

Working with other media types

• Switching to a different media
• Delivery to other devices
• Dynamically switching style sheets
• Accessibility considerations
• Graceful transformation

Common CSS problems and Hacks!

• Browser support issues
• Writing CCS rules for specific browsers
• Has "layout" for IE
• Peekaboo bug and Holly hack
• IE box model problem and Tan Hack
• Float clearing issues and :after
• 3 pixel jog
• Validating your CSS
• Common validation errors

Questions and answers