Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Modern CSS Techniques

Course Code



3 Days

Previous work with front-end technologies, CSS, HTML, and JavaScript basics is recommended.

This course provides a formal exploration of Cascading Style Sheets, CSS. CSS represents the only technology available for rendering web content within a browser. This course provides basics through intermediate and even advanced techniques when working with CSS. After laying down the formal rules, and providing tips and techniques for creating cross-browser based solutions, it explores newer features such as CSS3 and emphasizes proper progressive enhancement principles. The course concludes with both lecture and hands-on exposure to modern CSS pre-processing frameworks, such as SASS, and popular CSS frameworks such as Bootstrap. Consideration for responsive solutions and mobile application development is included.

This course is designed for front-end developers and developers interested in the latest browser-based, front-end APIs.


Web Standards and Introduction
CSS History
Browser Support For CSS
Quirks Mode
Standards Mode
DTDs and Browser DOCTYPE Switching
Guides for Selecting DOCTYPEs
Using the JavaScript Console
Layered Semantic Markup
Semantic HTML
Progressive Enhancement
Browser Rendering Modes
Cross-Browser Development
Firebug Overview
Chrome Developer Tools
IE Developer Tools
Block vs. Inline Elements
Replaced and Non-replaced Elements

CSS Basics
CSS Rules
Inline Rules
Embedded Styles
Linked Style Sheets
Working with New and Old Browsers
Creating a Common Starting Point with Browsers
A Template CSS
Descendent Groupings
Child/Sibling Selectors
ID Selectors
Contextual Selectors
Attribute Selectors
Determining Cascade Order
CSS Inheritance
General CSS Rule Layouts
IE and CSS incompatibilities

CSS Design: Fonts, Colors, Backgrounds
Numbers and Units
Specifying Colors
Font Properties
Text Properties
Background Properties
Creating Lists
Styling Lists
List Properties

CSS Box Model, Positioning, Visual Formatting
The CSS Box Model
Setting Borders and Margins
Special Styles and Colors
Shorthand Notations
Collapsing Margins
Box Paddings
IE vs. W3C Box Model Differences
IE Box Model Hacks
Height and Widths
Block vs. Inline Styles
Absolute Positioning
Relative Positioning
Floating Elements
Three-Column Layouts
Fixed Positioning
Clearing Elements
Two-Column Layouts
Using Rounded Corners on Layouts
Drop Shadows on Text
Drop Shadows on Images
Image Opacities

New CSS3 Features
Cross-browser and Legacy Browser Support
CSS3 Selectors
New Color Support
Rounded Corners
Drop Shadows (Box and Text)
CSS3 Rules for Progressive Enhancement
Graceful Degradation
Borders and Images
Performance Enhancements

CSS Frameworks
Twitter Bootstrap for CSS
Bootstrap Base CSS for Text, Forms, Tables
Setting up a SASS environment
Using Nested Rules
Incorporating Variables and Mixins
SASS Inheritance

Responsive Design
RWD using the Presentation Layer
The Mobile First Philosophy
Understanding CSS Media Queries
CSS Grid Systems
Introducing ResponseJS
Send Us a Message
Choose one