CSS Components

  1. Selectors
  2. Specificity
  3. Media Queries
  4. Backgrounds & Borders
  5. Gradients
  6. Transforms
  7. Transitions & Animation

Exercise Files

Exercise files all open in the same seperate window

Selectors

  • Basic Selectors
  • Relational selectors
  • Selector list
  • selector support grid
  • Intro to Attribute selectors
  • Older attribute selectors
  • CSS3 Attribute Selectors
  • Attribute Selectors Examples
  • Using attribute selectors
  • UI pseudo-classes
  • Form related UI pseudo-classes
  • UI selectors
  • List of Structural selectors
  • :root
  • First, last, & only
  • nth pseudo-classes
  • Structural Selectors
  • :empty pseudo-class
  • :not - Negation pseudo-class
  • lang, target, anchor links
  • Pseudo elements
  • selectors tips

Specificity

  • Understanding Specificity
  • Specificity PDF
  • Specificity Notes

Media Queries

  • Syntax
  • Old Media Queries
  • New Media Queries
  • More Media Query Tidbits
  • In action
  • mediaqueri.es

Backgrounds and Borders

  • Background properties
    • background-color
    • background-image'
    • background-repeat
    • background-attachment
    • background-position
    • background-clip
    • background-origin
    • background-size
    • background shorthand
  • Border properties
    • border-color
    • border-style
    • border-width
    • border shorthand
    • border-radius
  • Border Images
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repea
    • border-image shorthand

Gradients

  • Types of Gradients
  • Angles & Keyterm directions
  • Color Stops
  • Linear Gradients
  • Angled patterns
  • with Background-size
  • Radial Gradients

Tranforms

  • 2D Transform Functions
  • 3D Transform Functions
  • Transform Related Properties
  • Multiple Transforms

Transitions & Animations

  • Transtion Propertes
  • What can be transitioned?
  • Animation Keyframes
  • Animation Properties