CSS3 Training

"Lots of neat features were demoed on the CSS3 course. I enjoyed all the new material covered and along the way I managed to pick up a lot of regular CSS too." - Ken Ramkeesoon - esure Ltd

Our comprehensive 1-day CSS3 Training Course provides an introduction to CSS3, including current and planned browser support. The CSS3 Training course has plenty of practical exercises and examples to enable you to implement the exciting new features in CSS3

Book HTML5 Training and CSS3 Training together for a total of just £495 + vat (A saving of £155!)

Why is CSS3 Important?

Along with HTML5 - CSS3 forms part of the latest web standards for developing responsive web content for both desktop and mobile web sites and apps.

CSS3 allows developers to design more flexible and dynamic stylesheets, which can respond to a user's device, screen size and orientation, and also the user's behaviour.

CSS3 can be used to add effects to page elements, and even to skew, re-size, rotate and transform page elements without the use of animation software like Flash.

We also provide private and in-company CSS3 courses. Call +44 (0) 1273 622272 to discuss.

CSS3 Training Feedback

"We were brought up to date with current and emerging technological CSS3 trends."
Mialisa Fenty - University of Sussex Library

"The course tutor definitely knows his onions."
David Shenton - Equiniti Ltd 

CSS3 Training Course Objectives

After this CSS3 training course, delegates will have:

• An understanding of the CSS3 specification
• Knowledge of current browser support for CSS3 in Chrome, Firefox, Safari and IE9+
• Practical knowledge of how to implement new CSS3 features
• Providing support for older browsers including IE6 - 8 (polyfills)

CSS3 Training Course Prerequisites

You will need a working knowledge of, and practical experience with:

• HTML
• CSS
• Tableless layouts

Familiarity with JavaScript is an advantage.

We strongly recommend booking this workshop with our HTML5 course - book together for just £495 + vat - a saving of £155

Download the CSS3 Training Course Outline

CSS3 Course Content

Introduction

• Overview of the CSS3 specification
• The DOM tree

Shadows

• Box Shadows
• Multiple Shadows
• Duplicating Elements anywhere on the screen
• Creative effects with multiple shadows
• Implementing shadows in IE7+
• IE6 Caveats

Older Browsers (IE6 - IE8)

• Polyfills with Modernizr and JQuery
• Polyfills with CSS3 PIE

Opacity

• Partially transparent elements
• RGBA partially transparent colours
• Transparency in IE6+, what can and can't be done

Text

• Text shadows
• Multiple text shadows
• Bevelled text
• Duplicating Text
• Conditional image replacement in IE6+

Rounded Corners

• Rounded corners
• Multiple Rounded corners
• PIE rounded corners for IE
• Performant custom polyfills for IE

Border Effects

• Gradient borders
• Using images for borders

Selectors

• New CSS3 selectors
• Attribute Selectors
• Selecting first and last elements
• Selecting Alternate Rows
• Nth Child selectors.
• Nth child polyfills for IE6+

Structural Pseudoclasses

• Before and After
• Image replacement polyfill strategies for IE6+

Fun with CSS3 Art

• Triangles
• Hearts
• Speech Bubbles
• Flowers

Backgrounds

• Resizing backgrounds
• Multiple background images on one element
• Gradients
• Gradient Background filters for IE6+

Layout

• Box-sizing
• Multi Column Layout
• IE issues and strategies

Web fonts with @font-face

• Adding any font to your page
• Issues and caveats with IE6-IE8

Transformation

• Rotation
• Scaling
• Skewing

Animation and Transitions

• Transitions
• Animating on hover
• Full timeline animation

Media queries

• Styling according to media capabilities
• Creating a mobile phone style sheet using media queries
• Responsive web design: designing for multiple screen sizes

What you can do now

• Applications and online examples
• Using CSS3 with JavaScript and HTML5
• Online resources
• Download the CSS3 Training Course Outline

Download the CSS3 Training Course Outline