Overview
CSS (Cascading Style Sheets) is the language used to describe the visual presentation of HTML documents. Modern CSS has evolved significantly, with features like custom properties (variables), grid, flexbox, container queries, and native nesting reducing the need for preprocessors.
Utility-first frameworks like Tailwind CSS have also changed how many developers approach styling, favoring composable class names over traditional semantic CSS.
Topics in This Section
CSS
Core CSS concepts: the cascade, specificity, box model, layout systems (flexbox, grid), custom properties, and modern features like container queries and @layer.
Tailwind CSS
A utility-first CSS framework that applies small, single-purpose classes directly in HTML markup. Eliminates context switching between HTML and CSS files, with excellent tooling for tree-shaking unused styles.
UnoCSS
An atomic CSS engine with a minimal runtime footprint. Highly configurable with presets, including compatibility with Tailwind, Windi CSS, and Bootstrap class names.
Key Concepts
- Cascade and Specificity: How the browser determines which CSS rule wins when multiple rules apply to the same element
- Box Model: Every element is a rectangular box with content, padding, border, and margin
- Flexbox: One-dimensional layout model for aligning items in rows or columns
- CSS Grid: Two-dimensional layout system for building complex page structures
- Custom Properties: Variables in CSS declared with
--nameand accessed withvar(--name)