This is a great training for those just starting and those who have some experience with the program. The virtual... More Testimonials »

CSS3 Training

Delivery Options

Class Description

Class Overview

This course is for people who already know HTML and CSS well and are interested in learning the new capabilities of CSS3.

It uses The Book of CSS3: A Developer's Guide to the Future of Web Design by Peter Gaston as a text. Each student will receive a copy.

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

Why Webucator?

  • Expert instructors.
  • Classes are never canceled for low enrollment.
  • 100% free re-take option.
  • We have taught more than 45,879 students at 12,404 different organizations.

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

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:

Technical Requirements

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

Potential Follow-on Classes

Client Success
  1. Independent Survey
  2. Client List
  3. Testimonials
Join The Team
  1. Learn how you can become a Webucator Trainer
  2. Career Opportunities
Compare Us
Watch 2-minute Demo Video
of Live Online Training:
Learn the benefits of online training with Webucator
Webucator is a Registered Education Provider (R.E.P.) approved by PMI to issue professional development units (PDUs) for our training courses.
© Webucator, Inc. All rights reserved. | Toll Free: 1-877-932-8228 Toll Free: 1-877-932-8228 | From outside the USA: 315-849-2724| Fax: 315-849-2723