CSS3 Training

Delivery Options

• Customized Onsite Training (3 days): Request a Proposal

Class Description

Class Overview

Class Goals

• Learn to use media queries to tailor your page presentation for different output devices.
• Learn to use the new CSS3 selectors.
• Learn about the new pseudo-classes and pseudo elements.
• Learn to work with Web Fonts.
• Learn to apply to shadows, outlines, and strokes.
• Learn about new column layout methods.
• Learn about the new ways to work with background images with CSS3.
• Learn to work with border and box effects.
• Learn to work with color, opacity and gradients.
• Learn to create 2D and 3D transformations and to work with transitions and animations.
• Learn to create flexible box layouts.
• Learn to describe page layouts at a high level using CSS3.
• Learn about current browser support for CSS3 and about the future of CSS.

Class Outline

1. Introducing CSS3
   1. What CSS3 Is and How It Came to Be
   2. Let's Get Started: Introducing the Syntax
2. Media Queries
   1. The Advantages of Media Queries
   2. Syntax
   3. Media Features
   4. Media Queries: Browser Support
3. Selectors
   1. Attribute Selectors
   2. New Attribute Selectors in CSS3
   3. The General Sibling Combinator
   4. Selectors: Browser Support
4. Pseudo-classes and Pseudo-elements
   1. Structural Pseudo-classes
   2. Other Pseudo-classes
   3. Pseudo-elements
   4. DOM and Attribute Selectors: Browser Support
5. Web Fonts
   1. The @font-face Rule
   2. A "Bulletproof" @font-face Syntax
   3. Licensing Fonts for Web Use
   4. A Real-World Web Fonts Example
   5. More Font Properties
   6. OpenType Features
   7. Web Fonts: Browser Support
6. Text Effects and Typographic Styles
   1. Understanding Axes and Coordinates
   2. Applying Dimensional Effects: text-shadow
   3. Adding Definition to Text: text-outline and text-stroke
   4. More Text Properties
   5. Text Effects: Browser Support
7. Multiple Columns
   1. Column Layout Methods
   2. Column Gaps and Rules
   3. Containing Elements within Columns
   4. Multiple Columns: Browser Support
8. Background Images and Other Decorative Properties
   1. Background Images
   2. Image Masks
   3. Background Images: Browser Support
9. Border and Box Effects
   1. Giving Your Borders Rounded Corners
   2. Using Images for Borders
   3. Multicolored Borders
   4. Adding Drop Shadows
   5. Border and Box Effects: Browser Support
10. Color and Opacity
    1. Setting Transparency with the opacity Property
    2. New and Extended Color Values
    3. Matching the Operating System's Appearance
    4. Color and Opacity: Browser Support
11. Gradients
    1. Linear Gradients
    2. Radial Gradients
    3. Multiple Gradients
    4. Repeating Gradients in Firefox
    5. Gradients: Browser Support
12. 2D Transformations
    1. The transform Property
    2. rotate
    3. translate
    4. skew
    5. scale
    6. Multiple Transformations
    7. Transforming Elements with Matrices
    8. Reflections with WebKit
    9. 2D Transformations: Browser Support
13. Transitions and Animations
    1. Transitions
    2. More Complex Animations
    3. Transitions and Animations: Browser Support
14. 3D Transformations
    1. 3D Elements in CSS
    2. Transform Style
    3. The Transformation Functions
    4. The perspective and perspective-origin Properties
    5. The Transformation Origin
    6. Showing or Hiding the Backface
    7. 3D Transformations: Browser Support
15. Flexible Box Layout
    1. Triggering the Flexible Box Layout
    2. Making the Boxes Flexible
    3. Grouping Flexible Boxes
    4. Changing Orientation
    5. Changing the Order of Flexible Boxes
    6. Alignment
    7. Same-Axis Alignment
    8. Multiple Rows or Columns
    9. Cross-Browser Flex Box with JavaScript
    10. Stop the Presses: New Syntax
    11. Flexible Box Layout: Browser Support
16. Template Layout
    1. Setting Up the JavaScript
    2. Using position and display to Create Rows
    3. Multiple Rows
    4. Slots and the ::slot() Pseudo-element
    5. Creating Empty Slots
    6. Setting Height and Width on Rows and Columns
    7. Default Content: The @ Sign
    8. Template Layout: Browser Support
17. The Future of CSS
    1. Mathematical Operations
    2. The Grid Positioning Module
    3. Extending the Possibilities of Images
    4. Grouping Selectors
    5. Constants and Variables
    6. WebKit CSS Extensions
    7. Haptic Feedback
    8. Future CSS: Browser Support

Class Materials

All students receive a course manual or book and all the class examples.

Students in private onsite classes will also receive:

• The Book of CSS3: A Developer's Guide to the Future of Web Design

Class Prerequisites

Experience in the following areas is required:

• HTML (advanced)
• CSS (advanced)

Experience in the following areas would be beneficial:

• JavaScript

Courses that can help you meet these prerequisites:

• Introduction to HTML
• Introduction to CSS Training
• Advanced CSS Training

Technical Requirements

Our computer technical requirements and setup process is easy, with support just a click away.

• Onsite course technical requirements and setup instructions.

Potential Follow-on Classes

• HTML5 Training for Web Developers