What Is HTML and CSS?

Every web page you have ever looked at is built from the same three technologies, doing three different jobs. Before writing a single tag, it's worth knowing what each one is actually for — otherwise the next nine lessons are just syntax with no reason behind it.

Three technologies, three jobs

• HTML (HyperText Markup Language) describes what things are. This is a heading, this is a paragraph, this is a list of links. It says nothing about colour, size, or position.
• CSS (Cascading Style Sheets) describes how things look. Given the same HTML, CSS decides whether that heading is huge and blue or small and grey.
• JavaScript describes what happens. It reacts to a click, fetches new data, updates the page without reloading it. This course doesn't teach JavaScript — that's a whole separate track — but it's worth naming here so you know where the boundary sits.

These three are deliberately separable. You can rewrite a page's entire visual design by changing only its CSS, without touching a single HTML tag. That separation is not an accident — it's the whole reason the web has scaled to billions of pages built by millions of different people.

What a browser actually does with your document

When a browser loads a page, roughly this happens:

1. It requests the HTML file from a server (a computer somewhere that has the file).
2. It parses the HTML — reads the raw text and builds an internal tree structure out of it, where each tag becomes a node with a parent and children. This tree is called the DOM (Document Object Model).
3. It applies CSS to that tree — for every node, it works out the colour, size, spacing and position that CSS rules say it should have.
4. It paints the result to the screen as actual pixels.
5. JavaScript, if present, can change any of this after the fact — add nodes, remove them, change their styles, respond to what you do.

None of this requires you to understand browser internals to write a web page. What matters is the mental model: your HTML file is not literally what you see. It's a description that the browser turns into a structure, and then decorates.

<h1>Hello</h1>
<p>This is a paragraph.</p>

That's a complete, valid (if minimal) piece of HTML. On its own, in a browser, it will render as plain black text — a large "Hello" and a smaller paragraph below it — using the browser's built-in default styles. No CSS has been written yet, and it's already visible. CSS doesn't make a page appear; it changes how an already-meaningful page looks.

Why separating structure from presentation matters

Imagine every paragraph on a large site had its font, colour and spacing written directly inline, one at a time, inside the HTML. Changing the site's body text colour would mean editing every single paragraph, on every single page. Now imagine that colour lives in one CSS rule instead — change it once, and every paragraph across the entire site updates.

That's the practical payoff of keeping HTML for meaning and CSS for appearance:

• One change, many places. A single CSS rule can restyle thousands of elements at once.
• Content and design can be worked on independently. Someone can write the words and structure without knowing anything about the visual design, and vice versa.
• The same content can look different in different contexts — a printed version, a dark theme, a narrow phone screen — without duplicating the HTML at all.

This is also why screen readers, search engines, and other tools that don't care about colour or layout can still make full sense of a page: they read the HTML, which describes meaning independently of appearance.

Try it yourself

Below is the exact same HTML markup, rendered twice — once with no styling at all, and once with a <style> block added. Nothing about the structure changes between the two; only the appearance does. That's CSS's entire job in one example.

What to remember

• HTML describes structure and meaning, CSS describes appearance, JavaScript describes behaviour.
• A browser parses HTML into a tree (the DOM), applies CSS to it, then paints the result to the screen.
• HTML is already meaningful and visible before any CSS exists — CSS restyles it, it doesn't create it.
• Keeping structure and presentation separate means one CSS change can restyle everything that shares it, without touching the underlying content.