CSS (Cascading Style Sheets) controls how HTML looks: colors, fonts, spacing, layout, and responsiveness. You link a stylesheet to your HTML or write styles in a style block. Rules consist of a selector (which elements) and declarations (property: value).

The cascade means later rules can override earlier ones; specificity and !important determine which rule wins when multiple apply.

Selectors target elements: by tag (p), class (.classname), id (#id), attribute ([href]), or combination (div.class, ul li). Pseudo-classes like :hover and :focus style state; pseudo-elements like ::before add generated content.

Specificity (inline > id > class > tag) and source order decide conflicts. Prefer classes over ids for reusable styles; keep specificity low so overrides are predictable.

Every element is a box: content, then padding, border, then margin. Box-sizing: border-box makes width/height include padding and border, which simplifies layout. Display controls flow: block, inline, inline-block, flex, grid.

Flexbox and Grid are the main tools for layout. Flexbox is for one-dimensional (row or column) alignment; Grid is for two-dimensional layouts. Start with these instead of floats for new projects.