CSS Introduction / Intermediate

Duration: 2 days

Overview:

This CSS3 course will expose students to new features in CSS3. Participants will learn how to use selectors and pseudo elements, font, color, and layout techniques; transforms, transitions, and animations. The course will explore how CSS media queries can be used to change how websites are presented on mobile devices.

Prerequisites:

A working knowledge of HTML is required

Topics:

1 - Introducing CSS3

What is CSS3?

The History of CSS

Browser Support

HTML5

2 - Selectors and Pseudo Classes

Attribute Selectors

The Target Pseudo-Class

UI Element States Pseudo-Classes

Negation Pseudo-Class

Structural Pseudo-Classes

3 - Fonts and Text Effects

Fonts on the Web

Font Services

The @font-face Rule

Text Shadow

Word Wrapping

4 - Colors, Gradients, Background Images, and Masks

Color

The Opacity Property

Backgrounds

background-origin, and background-size

5 - Borders and Box Effects

Image Borders

Rounded Corners

Box Shadow

6 - Transitions, Transforms, and Animations

Transitions and Transforms

Transitions

7 - Layout

Layout: Columns and Flexible Box

Flexible Box Model

Vendor Prefixes

What Are Vendor Prefixes

Strategies

8 - Embedding Media

Video Formats

Styling Video

9 - Accessibility Features

Web Accessibility

The CSS3 Speech Module

10 - Media Queries

Targeting Widths and Devices with CSS3 Media Queries

Responsive Images and the viewport Metatag

11 - Implementing CSS3 in the "Real World"

jQuery

HTML5

Modernizr

Preprocessors

Frameworks and Grid Systems