CSS (Cascading Style Sheets) is the language that controls how a web page looks: colours, fonts, sizes, spacing and where things sit on the screen. HTML says "this is a heading"; CSS says "make headings dark green, 40 pixels tall, with space underneath".
How CSS rules find and style elements
A CSS rule has a selector and a set of declarations. h1 { color: #1f4d3a; font-size: 2.5rem; } targets every h1 and sets two properties. Selectors can target tag names, classes (.price), IDs, attributes and states such as :hover.
The "cascading" part decides what wins when several rules hit the same element. The browser weighs specificity (an ID beats a class, a class beats a tag name), then source order (later rules beat earlier ones at equal specificity), and inherits some properties like font and colour from parent elements. Most styling confusion comes from not knowing which rule is winning, which is why browser developer tools show crossed-out declarations.
Layout, screens and modern features
CSS also handles page layout. Flexbox lines items up in a row or column, CSS Grid places them on a two-dimensional grid, and media queries change styles based on screen width so one page works on a phone and a desktop. Custom properties (often called CSS variables) let you define a brand colour once and reuse it everywhere.
An example: rebranding a florist's site
A florist switches from pink to a deep purple brand colour. If the site defines --brand: #6b2d73; in one place and every button and link uses that variable, the change is one line. If the old pink was pasted into forty separate rules, someone has to hunt down every copy, and the ones they miss leave the site half-rebranded.
When owners should care about CSS
You do not need to write it, but CSS decides whether your site is readable on a phone, whether text has enough contrast, and how heavy the page is to download. Large unused stylesheets slow down first paint, and layout that shifts as styles load hurts Core Web Vitals.
Common CSS mistakes
- Overusing !important. It wins the cascade by force, so the next fix needs another !important, and so on.
- Fixed pixel widths on containers. A 1200px box overflows a 390px phone screen.
- Low-contrast text. Light grey on white looks elegant and is hard to read for many visitors.
- Hard-coding colours and sizes repeatedly instead of variables, which makes redesigns slow and inconsistent.
Related terms
- HTML: the structure CSS styles.
- Media queries: the CSS feature behind responsive layouts.
- Tailwind CSS: a way of writing CSS through small utility classes.
- Responsive design: making one layout adapt to every screen.