HTML vs CSS
HTML (HyperText Markup Language) describes the structure of a web page — what each piece of content is, in order. CSS (Cascading Style Sheets) describes how those pieces look — colours, fonts, layout, spacing. They're separate languages and you need both to build a web page; they work together but answer different questions.
Last reviewed on 2026-04-27.
Quick Comparison
| Aspect | HTML | CSS |
|---|---|---|
| Stands for | HyperText Markup Language | Cascading Style Sheets |
| Job | Define content and structure | Define presentation and layout |
| Syntax | Tags inside angle brackets (<p>, <h1>) | Selectors plus property:value pairs |
| Without it | No content | Plain, unstyled content (still readable) |
| Where it lives | In .html files (or templates that produce them) | In .css files (or <style> tags) |
| Browser handles | Parsed into a DOM (Document Object Model) | Parsed into a CSSOM and applied to the DOM |
| Replaces | Nothing — every page has it | Old inline presentation tags (<font>, etc.) |
Key Differences
1. Structure versus presentation
HTML says what: this is a heading, this is a paragraph, this is a list, this is an image.
CSS says how: this heading is 2rem and dark blue, this paragraph has 1.5 line-height, this list has bullets removed.
2. Different syntax, different mental model
HTML is markup. You wrap content in tags to label it. The browser builds a tree (the DOM) from your tags.
CSS is rules. You write selectors that match parts of the tree, then apply property-value pairs. The browser walks the tree, decides which rules apply where, and paints.
3. You can have one without the other
HTML alone still works. Browsers apply default styles (margins, font, basic list bullets) so a no-CSS page is plain but readable.
CSS alone doesn't make a page. CSS needs HTML (or some DOM-equivalent) to style.
4. Where they live
HTML files have a .html extension and start with <!doctype html>. They reference CSS files via <link> tags in the head.
CSS typically lives in .css files referenced by HTML. It can also be embedded inline (style="...") or in <style> blocks.
5. Specialisation
HTML is a comparatively small language: a few dozen elements you'll use regularly.
CSS is a much bigger surface area: hundreds of properties, selectors, pseudo-classes, layout systems (flexbox, grid), and animations.
6. They evolve together
HTML5 added structural elements (<article>, <nav>, <section>) and richer media tags.
Modern CSS added flexbox, grid, custom properties, container queries, cascade layers — much of what web design once required JavaScript for.
When to Choose Each
Choose HTML if:
- Structuring any text content into logical pieces.
- Adding semantic meaning a screen reader, search engine, or scraper can read.
- Holding the content side of any web page or app.
Choose CSS if:
- Making a structured page look the way you want.
- Implementing layout — flexbox and grid handle 95% of page structure.
- Theming, animations, dark mode, responsive design.
Worked example
A blog post is HTML: a heading, a few paragraphs, an image, a quote, links to related posts. The same HTML can look like a magazine article, like a typewritten manuscript, or like a stark Brutalist page — those are three CSS files. Strip the CSS off and the content is still there, just plain. Strip the HTML off and there's nothing to style.
Common Mistakes
- "CSS is part of HTML." They're separate languages with separate specs. They work together but you can swap, replace, or test them independently.
- "HTML and CSS are programming languages." They're markup and styling languages, respectively — declarative, not Turing-complete in the usual sense. JavaScript is the programming language of the trio.
- "You should style with HTML attributes." Old HTML had presentational attributes; current best practice keeps style entirely in CSS so HTML stays semantic.