CSS Training Overview

This in-depth CSS training course teaches attendees how to master Cascading Style Sheets to create visually appealing webpages using the latest CSS3 techniques for formatting text, laying out pages, adding transitions and animations, incorporating best practices, and more.

Location and Pricing

Accelebrate courses are taught as private, customized training for groups of 3 or more at your site. In addition, we offer live, private online training for teams who may be in multiple locations or wish to save on travel costs. To receive a customized proposal and price quote for private on-site or online training, please contact us.

In addition, some courses are available as live, online classes for individuals. See a schedule of online courses.

CSS Training Objectives

All students will learn how to:

  • Style elements using the new selectors, pseudo classes, and pseudo elements
  • Use font and text effects, including @font-face
  • Use the new gradient, mask, and background image techniques
  • Implement animations, transitions, and 2D and 3D transforms
  • Render content appropriately for mobile and tablet devices using media queries
  • Understand vendor-specific prefixes and browser support for various CSS3 techniques
  • Incorporate CSS optimization
  • Understand CSS rendering and performance

CSS Training Outline

Expand All | Collapse All | Printer-Friendly

Introduction to Cascading Style Sheets (CSS)
  • CSS Introduction
    • What is CSS?
    • CSS Version Numbers and CSS Levels
    • Who is responsible for CSS?
    • Why should I be writing CSS?
    • When was CSS created?
    • Where is the official CSS specification?
CSS Syntax
  • Introduction to Writing CSS
  • CSS @rules
  • CSS Modules/Scope
  • What is Critical CSS?
  • Critical CSS Resources
Selectors and Specificity
  • Introduction to CSS Selectors and Specificity
  • Helpful definitions
    • Selectors
    • Simple selectors
    • Combinators
    • Compound selectors
    • Complex selectors
    • The CSS “key”
    • CSS Selector types
    • Tag or element selectors
    • Id Selectors
    • Class selectors
  • Specificity
    • Specificity Hierarchy
    • CSS Cascade Rules
    • CSS Specificity Rules
  • Logically-applied selectors
Feature Detection
  • Introduction to Feature Detection
  • What is Modernizr?
  • CSS Feature Queries
    • CSS @supports
    • CSS.supports
The CSS Box Model
  • Introduction to the CSS box model
  • What is the CSS box model?
  • Two Types of Boxes
  • Alternate box model
  • Z-index
The CSS Reset
  • Introduction to the CSS reset
  • Why use a CSS reset?
  • Why not use a CSS reset?
CSS Custom Properties
  • Introduction to CSS Custom Properties
  • What are custom properties?
    • How to declare a custom property
    • Using a custom property
  • CSS Variable Use Cases
  • CSS Custom Properties vs. Preprocessor Variables
  • CSS Environment Variables
CSS Typography: Font Sizes
  • Introduction to Typography
  • Units of Measurement
    • Fixed units of measurement
    • Relative units of measurement
    • Absolute vs. relative units
  • Font Sizes and browser rendering
CSS 3
  • Introduction to CSS3
  • What is CSS3?
  • Understanding the CSS Version numbers and CSS Levels
    • Examples of CSS Level 3 features
  • CSS3 Transforms
    • What is a CSS transform?
    • CSS3 2D transforms
    • CSS3 3D transforms
    • CSS transform: properties and methods
  • CSS3 Transitions
  • CSS3 Animations
    • CSS3 animation code
  • CSS3 3D Animations
    • 3D transformations
CSS Layout Fundamentals
  • Introduction to page layout with CSS
  • CSS position property
  • Introduction to the CSS position property
  • Position property values
    • position: static
    • position: relative
    • position: absolute
    • position: fixed
    • position: sticky
  • Introduction to the CSS display property
    • Values that determine if the element will generate a display box
    • The values that determine the elements role in document flow
  • Using Viewport units for layout
  • Introduction to Viewport Units
    • Viewport width
    • Viewport height
    • Viewport minimum and maximum
CSS Flexbox
  • Introduction to the display: flex property
  • The flex layout model
  • The flex display properties
  • Flex Grow, Shrink and Basis
CSS Grid Layout
  • Introduction to the CSS grid layout
    • What is a grid?
    • Features of a grid layout
    • Grid glossary
    • Placing items on the grid
    • Grid properties
CSS Multi-Column Layout
  • CSS Multi-column layout
    • Introduction to CSS columns
    • Creating multi-column layout
    • Column properties
    • Column-related design issues
Introduction to CSS Optimization
  • What does CSS Optimization mean?
    • Tips for writing optimized CSS
  • CSS Minification
  • Writing shorter CSS Code
  • Limit the user of colors
  • Using CSS Resets
  • Why use a CSS Reset
  • Sorting CSS Rules
  • Object-oriented CSS
  • Non-Object-Oriented CSS
  • Making your CSS modular
  • Using CSS properties and functions
  • Using Sprites
  • Using an online minifier
  • Adding vendor prefixes
  • Checking the code quality of your CSS
  • Identifying unused CSS
  • Knowing where unused CSS comes from
  • Using a CSS Beautifier
  • What is clean CSS?
  • Code organization techniques
  • Using a CSS preprocessor
    • Using SASS
    • Preprocessor variables
    • Preprocessor functions
    • Nested styles
    • Mixins
Advanced CSS Optimization
  • Writing scalable, efficient and maintainable CSS
  • Naming Conventions
  • History of naming conventions in CSS
  • Naming Conventions: BEM
    • What are Elements?
    • What are Blocks?
    • What are Modifiers?
    • BEM Best practices
    • Pros and Cons of BEM
  • Naming Conventions: SMACSS
    • Scalable and Module Architecture for CSS
  • Organizing CSS
  • Formatting CSS
Understanding CSS Rendering and Performance
  • Optimizing your CSS
  • Browser Rendering Triggers
  • Paint Cycles and Composite layers
  • Using a Content Delivery System
CSS and JavaScript
Conclusion
Request Pricing for CSS Boot Camp

Lecture percentage

40%

Lecture/Demo

Lab percentage

60%

Lab

Course Number:

CSS-104

Duration:

4 Days

Prerequisites:

Prior hands-on experience with HTML and CSS is required.

Training Materials:

All students receive a copy of Peachpit Press's Practical CSS3: Develop and Design and related courseware.

Software Requirements:

  • Windows or macOS with at least 8 GB RAM
  • 2 or more browsers of your choice (recent versions):
    • Google Chrome
    • Mozilla Firefox with the Firebug extension installed
    • Internet Explorer 10 or later [Windows users]
    • Safari 5 or later
  • Web development tool of your choice (should support CSS synta

Contact Us:

Accelebrate’s training classes are available for private groups of 3 or more people at your site or online anywhere worldwide.

Don't settle for a "one size fits all" public class! Have Accelebrate deliver exactly the training you want, privately at your site or online, for less than the cost of a public class.

For pricing and to learn more, please contact us.

Contact Us Train For Us

Have you read our Google reviews?

Toll-free in US/Canada:
877 849 1850
International:
+1 678 648 3113

Fax: +1 404 420 2491

925B Peachtree Street, NE
PMB 378
Atlanta, GA 30309-3918
USA

Subscribe to our Newsletter:

Never miss the latest news and information from Accelebrate:

Microsoft Gold Partner

Please see our complete list of
Microsoft Official Courses

Recent Training Locations

Alabama

Birmingham

Huntsville

Montgomery

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

Los Angeles

Oakland

Orange County

Sacramento

San Diego

San Francisco

San Jose

Colorado

Boulder

Colorado Springs

Denver

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Jacksonville

Miami

Orlando

Tampa

Georgia

Atlanta

Augusta

Savannah

Hawaii

Honolulu

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Cedar Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Frederick

Hagerstown

Massachusetts

Boston

Cambridge

Springfield

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Minneapolis

Saint Paul

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Las Vegas

Reno

New Jersey

Princeton

New Mexico

Albuquerque

New York

Albany

Buffalo

New York City

White Plains

North Carolina

Charlotte

Durham

Raleigh

Ohio

Akron

Canton

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Oklahoma City

Tulsa

Oregon

Portland

Pennsylvania

Philadelphia

Pittsburgh

Rhode Island

Providence

South Carolina

Charleston

Columbia

Greenville

Tennessee

Knoxville

Memphis

Nashville

Texas

Austin

Dallas

El Paso

Houston

San Antonio

Utah

Salt Lake City

Virginia

Alexandria

Arlington

Norfolk

Richmond

Washington

Seattle

Tacoma

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Calgary

Edmonton

British Columbia

Vancouver

Manitoba

Winnipeg

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan

© 2013-2020 Accelebrate, Inc. All Rights Reserved. All trademarks are owned by their respective owners.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.