HTML vs CSS: what's the difference, and how do they work together?

What's the difference between HTML and CSS?

HTML says what is on a web page; CSS says how it looks. With HTML you give every piece of text a role: this is the title, this is a paragraph, this is a price list, this is a link. With CSS you then choose the colour, the font, the space in between and where things sit on the screen. Two languages, two jobs, one page.

The people who maintain the standard put it plainly: "HTML is the World Wide Web's core markup language", and for the look of a page it points authors to a styling language like CSS (WHATWG). Think of a shop. HTML is the building, with its door, its window and the sign over the door. CSS is the paint, the striped awning and the flower boxes. Without paint you can still walk in. Without a building there's nothing to paint.

What does HTML look like?

HTML is made of elements, and you mark an element with tags. An opening tag like <h1> says where the main heading starts, and the closing tag </h1>, with a slash, says where it ends. Here's a simplified piece of the site of Snip & Curl, the hair salon in Leeds that gets its first style in module 2 of our course:

<header>
  <h1>Snip &amp; Curl</h1>
  <p class="slogan">Hair salon in the heart of Leeds</p>
</header>
<main>
  <h2>Our prices</h2>
  <ul>
    <li>Haircut: £28</li>
    <li>Colouring: £55</li>
  </ul>
</main>
<footer>
  <p>8 Kirkgate, Leeds</p>
</footer>

Read the code aloud and you only hear roles, not looks: a header with a main heading and a slogan, a subheading, a list with two items and a footer. Nothing says the title should be purple or the footer grey. class="slogan" is a name you choose yourself, so you can find that one part again in CSS later. To see how tags and elements fit together, start with what HTML is.

Why does HTML describe meaning, not looks?

Because not everyone reads your page with their eyes. A screen reader doesn't read out colours, but it does announce that something is a heading, and a search engine follows the links in your HTML. If you only make the text big and bold, only people looking at the screen can tell it's a title. Meaning in HTML, looks in CSS: that keeps a page clear for everyone.

Still, the most used element on the web is one without any meaning. Of all elements on mobile pages in 2024, 28.7% were a <div>, a box that says nothing about what's inside it, far ahead of the link <a> at 12.6% (Web Almanac). A <div> isn't wrong, but <header>, <main> and <footer> tell the browser a lot more. You'll learn to pick them in blocks with meaning.

Why does a page without CSS still have big headings?

Because every browser brings a stylesheet of its own. Load a page without a single line of CSS and the headings are still larger than normal text, paragraphs start on a new line with space between them, and links are coloured and underlined. MDN calls these the browser's default styles: basic styling that keeps any page readable, defined in stylesheets inside the browser, which have nothing to do with HTML itself (MDN).

That explains a classic beginner's mistake: picking an <h1> because you want big letters, or an <h3> because the <h2> looks too large. You pick an element for its role, never for its looks. If the main heading is too big, you make it smaller with CSS, and the HTML still says it's the main heading.

Pick an element for what it is, not for how big the browser shows it by default. Size is a job for CSS.

What does CSS look like?

You write CSS in rules. A rule starts with a selector, which says which elements it styles. Then, between curly brackets, come one or more declarations: a property, a colon, a value and a semicolon. These three rules give the piece of HTML above a face of its own, without changing a single letter of the HTML:

h1 {
  color: purple;
  text-align: center;
}

.slogan {
  font-style: italic;
}

h2 {
  color: teal;
}

The salon's name turns purple and moves to the centre, the slogan goes italic and the subheading turns teal. CSS is written in English, and American English at that: color, not colour. The browser quietly skips any property it doesn't know, with no error message, and almost everyone falls for that once. In what CSS is you see each rule light up the element it styles.

To pick out one particular part, you give it a class in the HTML and put a dot before that name in CSS, like .slogan. You'll learn how a class differs from an id in class and id, and every selector and property is on one page in the HTML and CSS cheat sheet.

How do you link CSS to HTML?

With a <link> in the <head> of your HTML. CSS usually lives in a file of its own, a stylesheet, and it only works once the HTML points to it. At Snip & Curl that pointer sits in index.html, just below the title that shows in the browser tab:

<head>
  <title>Snip &amp; Curl hair salon</title>
  <link rel="stylesheet" href="style.css">
</head>

The pay-off is big: ten pages with the same <link> share one stylesheet. Change the colour of h2 once and it changes across the whole site. CSS can also go in a <style> element or in a style attribute on a single element, but then it only applies there and it's hard to find later. You can practise it in linking a stylesheet. On the page below, the link is already in place: style.css is still empty, waiting for your first rule.

The rule you just wrote ran in your own browser, on a real page. Lurndo doesn't check it letter by letter; it checks what the browser makes of it: the colour and alignment the footer really gets, and whether the rest of the page is left alone. It does that on a second version of the page too, with different text. So if you wrote #808080 instead of gray, that counts just as well: it's the same colour.

How does the browser combine HTML and CSS?

In four steps: it builds a tree from the HTML, matches the CSS rules to it, works out where everything goes and then paints the pixels. That's how MDN and web.dev describe it, and it happens for every page you open (MDN, web.dev):

1. The tree. The browser reads the HTML and turns it into a tree, the DOM. <main> is a branch, the <h2> and <ul> inside it are smaller branches, and the text in each <li> is a leaf.
2. The rules. For each element it finds the CSS rules whose selector matches. Together with the DOM, that gives the render tree: everything that will be visible, with its styles. An element with display: none is left out.
3. Layout. It works out exactly where each box sits and how big it is, in pixels.
4. Paint. Finally, it turns the render tree into pixels on your screen.

That's why the shape of your HTML matters. CSS picks elements by their place in that tree: footer p means "every paragraph inside the footer". A missing closing tag moves branches around, and suddenly a rule hits something you didn't expect. In our lessons the page next to your code changes as you type: each time, the browser runs those four steps again, and you see straight away what your rule does.

Where does JavaScript fit in?

JavaScript is the third layer: behaviour. HTML says what's there, CSS how it looks, and JavaScript what happens when you click, type or scroll, like a menu that opens or a form that flags a mistake before you send it. Unlike HTML and CSS, JavaScript is a real programming language, and it can change the DOM and the styles after the page has loaded. You don't need it to get started, though: with HTML and CSS alone you can build a site that fits every screen.

When were HTML and CSS created?

HTML came first: content before presentation. Tim Berners-Lee invented the World Wide Web in 1989 and also wrote the first version of HTML (W3C). The proposal for the web, Information Management: A Proposal, went round CERN that year, and in August 1991 the web's files were made available to anyone on the net (W3C).

CSS followed three years later. On 10 October 1994, Håkon Wium Lie published a proposal for Cascading HTML style sheets: style sheets for HTML (W3C). The W3C, the body that has worked on the web's standards ever since, was founded that same month (W3C). Lie and Bert Bos turned the proposal into a standard: CSS1 became a W3C Recommendation on 17 December 1996 (W3C).

Browsers didn't wait for the standard. Internet Explorer 3, released in August 1996, was the first commercial browser to support CSS, and CSS2 followed in May 1998 (W3C). HTML kept changing too, with a whole series of revisions between 1990 and 1995 alone. Since a 2019 agreement between the WHATWG and the W3C there's a single HTML, the standard the WHATWG maintains (WHATWG).

Should you learn HTML or CSS first?

Both, together, with HTML a little first. CSS styles elements that live in the HTML, so a rule like footer { color: gray; } only makes sense once you know what a <footer> is. The other way round, plain HTML gets dull fast: after a few lessons you'll want to see some colour. So start with tags and elements, and write your first CSS as soon as you can build a page with headings, paragraphs and a list.

You can see how closely the two belong together in Stack Overflow's yearly survey of developers. The Stack Overflow Developer Survey 2025 counts HTML/CSS as a single language: 61.9% of all respondents use it, 63% of professional developers and 66.6% of people learning to code (Stack Overflow).

That's how our course is built too. Module 1 starts with tags and elements, module 2 brings your first CSS, and in module 3 you give your page structure and meaning. Those three modules are free. Learn HTML and CSS as a beginner shows how the lessons build on each other, and build your own website shows where you're heading. And if you want to put something neatly in the middle next, here's how to center a div.