# Cascading Style Sheets (CSS) CSS is the language used to style and lay out web pages. It controls how [[Hypertext Markup Language (HTML)]] elements are rendered — colors, fonts, spacing, positioning, animations, and responsive behavior. Separated from markup, it enables consistent styling across pages and maintainable design systems. ## Core Concepts - **Selectors** — Target elements by type, class, ID, attribute, pseudo-class, or pseudo-element - **Cascade** — Rules resolved by origin, specificity, and source order - **Specificity** — Inline > ID > class/attribute/pseudo-class > element/pseudo-element - **Inheritance** — Some properties (e.g., `color`, `font-family`) inherit from parent elements - **Box Model** — `content` → `padding` → `border` → `margin` ## Layout Systems - **Flexbox** — One-dimensional layout (row or column). Best for component-level alignment - **Grid** — Two-dimensional layout (rows and columns). Best for page-level structure - **Positioning** — `static`, `relative`, `absolute`, `fixed`, `sticky` - **Float** — Legacy layout technique, still useful for text wrapping ## Modern Features - **Custom Properties (CSS Variables)** — `--color-primary: #3b82f6;` with `var(--color-primary)` - **Container Queries** — Style based on parent container size, not just viewport - **`@layer`** — Explicit cascade layer ordering - **Nesting** — Native CSS nesting (no preprocessor needed) - **`:has()` selector** — Parent selector / relational pseudo-class - **Subgrid** — Inherit grid tracks from parent grid - **View Transitions API** — Animate between DOM states ## Responsive Design - Media queries (`@media`) for viewport-based breakpoints - Container queries (`@container`) for component-based breakpoints - Fluid typography with `clamp()` - Responsive images with `object-fit` and `aspect-ratio` ## Architecture Approaches - **BEM** — Block, Element, Modifier naming convention - **CSS Modules** — Scoped class names via build tools - **Utility-first** — Tailwind CSS, Tachyons - **CSS-in-JS** — styled-components, Emotion ## Preprocessors & Tools - Sass, Less, PostCSS - Autoprefixer for vendor prefixes - Lightning CSS, cssnano for minification ## References - https://developer.mozilla.org/en-US/docs/Web/CSS ## Related - [[Hypertext Markup Language (HTML)]] - [[JavaScript]] - [[Web Performance]] - [[Accessibility (a11y)]]