Duration
3 days (10:00 AM - 5:00 PM Eastern)
Cost
$975.00
Online Schedule
  • Jun 17 - Jun 19
  • Jul 1 - Jul 3
  • Aug 3 - Aug 5
  • Sep 8 - Sep 10

Details

Subjects Covered

Prerequisites

Setup Requirements

Details

Course Details

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 modern web design.

Subjects Covered

CSS Introduction

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

Prerequisites

Before Taking this Class

None

Setup Requirements

Software/Setup For this Class

Any text editor

Onsite Training

Do you have five (5) or more people needing this class and want us to deliver it at your location?