Introduction to CSS Training

Course Length: 3 days

Delivery Methods: Multiple delivery options

Course Overview

Modern browsers have terrific support for all commonly used CSS features, which means that it is no longer necessary to teach the types of CSS tricks and hacks that had to be used in the past to make pages look the same across browsers. This CSS course provides a thorough introduction to CSS as it is used in web design today.

Course Benefits

Learn the benefits of CSS.
Learn to avoid using deprecated HTML tags and attributes.
Learn CSS syntax.
Learn to use <div> and <span> tags appropriately.
Learn all the common CSS properties and their values.
Learn to use CSS resets and normalizers.
Learn best practices for choosing units of measurement.
Learn how to select CSS fonts and to download and use new fonts.
Learn about color and opacity and to create backgrounds.
Learn to work with borders, margin, and padding (the box model).
Learn to style tables with CSS.
Learn to use positioning.
Learn to use transforms and transitions rotate, scale, and skew elements and create animations.
Learn about flex, grid, and multi-column layouts.
Learn to style lists and create drop-down and fly-out navigation menus.
Learn to use media queries to style pages for different device sizes and media.

Available Delivery Methods

Private Class
Private classes are delivered for groups at your offices or a location of your choice.

Self-Paced
Learn at your own pace with 24/7 access to an On-Demand course.

Course Outline

Crash Course in CSS
1. Benefits of Cascading Style Sheets
2. CSS Rules
  1. CSS Comments
3. Selectors
  1. Type Selectors
  2. Class Selectors
  3. ID Selectors
  4. Attribute Selectors
  5. The Universal Selector
  6. Grouping
4. Combinators
  1. Descendant Combinators
  2. Child Combinators
  3. General Sibling Combinators
  4. Adjacent Sibling Combinators
5. Precedence of Selectors
6. How Browsers Style Pages
7. CSS Resets
8. CSS Normalizers
9. External Stylesheets, Embedded Stylesheets, and Inline Styles
  1. External Stylesheets
  2. Embedded Stylesheets
  3. Inline Styles
10. Exercise: Creating an External Stylesheet
11. Exercise: Creating an Embedded Stylesheet
12. Exercise: Adding Inline Styles
13. <div> and <span>
14. Exercise: Divs and Spans
15. Media Types
16. Units of Measurement
  1. Absolute vs. Relative Units
  2. Pixels
  3. Ems and Rems
  4. Percentages
  5. Other Units
17. Inheritance
  1. The inherit Value
CSS Fonts
1. font-family
  1. Specifying by Font Name
  2. Specifying Font by Category
2. @font-face
  1. Getting Fonts
3. font-size
  1. Relative font-size Terms
  2. Best Practices
4. font-style
5. font-variant
6. font-weight
7. line-height
8. font
9. Exercise: Styling Fonts
Color and Opacity
1. About Color and Opacity
2. Color and Opacity Values
  1. Color Keywords
  2. RGB Hexadecimal Notation
  3. RGB Functional Notation
  4. HSL Functional Notation
3. color
4. opacity
5. Exercise: Adding Color and Opacity to Text
CSS Text
1. letter-spacing
2. text-align
3. text-decoration
4. text-indent
5. text-shadow
6. text-transform
7. white-space
8. word-break
9. word-spacing
10. Exercise: Text Properties
Borders, Margins, and Padding
1. The CSS Basic Box Model
2. Introduction to using Google Chrome DevTools with CSS
3. Padding
4. Margin
5. Border
  1. border-width
  2. border-style
  3. border-color
  4. border-radius
6. box-sizing
7. box-shadow
8. Exercise: Borders, Margin, and Padding
Backgrounds
1. background-color
2. background-image
3. background-repeat
4. overflow
5. background-attachment
6. background-position
  1. Keywords
  2. Coordinates
7. Creating a "hint" Class
8. background-size
9. background-origin
10. background-clip
11. Modifying the "hint" Class
12. background
13. Exercise: Backgrounds
Display and Visibility
1. display
2. visibility
Pseudo-classes and Pseudo-elements
1. Pseudo-classes
2. Styling Links with Pseudo-classes
3. Styling Tables and Articles with Pseudo-classes
  1. :nth-child()
4. Pseudo-elements
  1. content
5. Using Pseudo-elements
Styling Tables with CSS
1. A Review of HTML table Elements and Attributes
  1. Spanning Columns and Rows
2. CSS Properties and Styling Tables
  1. table-layout
  2. border-collapse
3. Exercise: Styling a Table Exercise
Positioning
1. Normal Flow
2. position
  1. Positioning with top, bottom, left, and right
3. z-index
4. float and clear
  1. float
  2. clear
  3. float, clear, and ::after
5. Exercise: Positioning
Transforms and Transitions
1. transition
  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay
  5. transition
2. transform
  1. Rotation
  2. Scale
  3. Skew
  4. Translate
3. Exercise: Transforms and Transitions
Layouts
1. Introduction to Flexible Box Layout Module
  1. Some Flexbox Properties
2. Introduction to Grid Layout
  1. Some Grid Properties
3. Multi-column Layout
4. Exercise: Layouts
CSS Lists as Hierarchical Navigation
1. Exercise: Basic Vertical Navigation Bars
2. Dynamic Drop-down and Fly-out Navigation Bars
3. Exercise: Basic Drop-down Menu
4. Exercise: Basic Fly-out Menu
5. Exercise: CSS List Menus
Media Queries
1. What Are Media Queries?
  1. Breakpoints
  2. Media Types
  3. Syntax
2. Font Awesome
  1. Finding and Using Icons
3. Exercise: Breakpoints
4. Exercise: Targeting Print

Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this CSS class:

HTML

Prerequisite Courses

Courses that can help you meet these prerequisites:

Introduction to HTML Training

Follow-on Courses

Introduction to JavaScript Training

Request a Private Class

Private Class for your Team
Online or On-location
Customizable
Expert Instructors

Request Pricing

Self-Paced Course

$199.80 or 3 coupons

On Demand 24/7
Readings
Presentations
Exercises
Quizzes
Full Year of Access
Learn more