Skip to main content

CSS

Getting Started

  • Cascading and Inheritance - Cascade origin, specificity, inheritance, and initial values
  • Selectors - Selector patterns, pseudo-classes, and pseudo-elements
  • Values and Units - Length, percentage, angle, and CSS custom properties
  • Variables - CSS variables, context variables, and @property directive
  • Colors - Color formats, transparency, and color functions
  • Math Functions - calc(), clamp(), min(), max(), and comparison functions
  • Typography - Typography design
  • Text - Text properties, text alignment, text indentation, content and counter
  • Font - Font properties, font family, and font weight

Layout

  • Box Model - Box model, sizing, margins, padding, and line height
  • Inline Element - Inline element, inline-block element, and baseline alignment
  • Position - Positioning schemes, stacking context, and z-index
  • Float - Float layout and clearing
  • Column - Multi-column layout
  • Flexbox - Flexible box layout for one-dimensional arrangements
  • Grid - CSS grid layout for two-dimensional arrangements
  • Alignment - Box alignment and gap properties

Styling

  • Border - Border properties, border-image, and outlines
  • Background - Background colors, images, gradients, and positioning
  • Gradient - Linear, radial, and conic gradients
  • Shadow - Text shadow and box shadow effects
  • Object - Object-fit and object-position for replaced elements
  • Shape - CSS shapes for geometric layout
  • Mask - CSS mask for geometric layout
  • Filter and Blend - Visual effects and blend modes
  • SVG - SVG styling and CSS animation
  • Interaction - User interface interactions and pointers

Responsive

Animation

  • Transform - 2D and 3D transformations
  • Transition - Property transitions and timing functions
  • Animation - Keyframe animations and FLIP pattern

Frameworks

  • Sass - Sass/SCSS preprocessor features
  • Bootstrap - Bootstrap framework and reboot
  • Toolchain - PostCSS, Autoprefixer, and normalize

Best Practices

  • Style Guide - Naming conventions, architecture, and organization
  • Accessibility - Focus, visibility, and accessibility considerations
  • Hacks - Browser hacks and workarounds

Components