Modern CSS

Chapters

What is CSS?

  • Anatomy of a CSS rule
  • How CSS is used
  • CSS resources
  • A note on browser support

How CSS works

  • The Document Object Model (DOM)
  • The CSS Object Model (CSSOM)
  • The render tree, layout, and paint

The CSS box model

  • Box model basics
  • Box sizing

CSS selectors

  • Basic selector types
  • Combining selectors
  • Selector combinators
  • Pseudo-classes
  • Pseudo-elements
  • Specificity

Basic CSS concepts

  • Units
  • Functions
  • Colors
  • Block and inline elements
  • Overflow

Basic styling

  • Global keywords
  • Multiple values
  • Borders
  • Backgrounds
  • Gradients
  • Box shadows
  • Opacity
  • Hiding elements

Text styling

  • Fonts
  • Basic text styling
  • Text layout
  • Using web fonts
  • Text shadow

CSS variables

  • Using variables
  • Changing variables at runtime

Layout and positioning

  • Padding and margin
  • Width and height
  • Positioning elements
  • Z-index and stacking contexts
  • Floats

Transforms

  • Perspective
  • Rotation
  • Translation
  • Scaling
  • Skewing
  • Applying multiple transforms
  • Example: Making a heart with CSS
  • Example: Making a cube with CSS

Transitions and animations

  • Transitions
  • Animations
  • Performance implications
  • JavaScript events
  • Other tips

Flexbox

  • Basic concepts
  • A basic flex layout
  • Sizing
  • Alignment and spacing
  • Ordering
  • Examples
  • Flexbox cheat sheet

Responsive design

  • Media query basics
  • The viewport meta tag
  • Breakpoints
  • Responsive layouts with flexbox
  • Fluid typography
  • Adapting a layout with media queries

CSS Grid

  • Basic concepts
  • Basic grids
  • Grid sizing
  • Grid positioning
  • Grid flow
  • Alignment
  • Grid cheat sheet