HTML + CSS: How They Work Together — HTML Fundamentals (Lesson 13)

You have built solid structure. Now meet the layer that makes it beautiful: CSS. This lesson is not a full CSS course — it is the bridge, showing exactly how HTML hands off to CSS so the next course makes sense.

Three ways to add CSS

CSS can reach your HTML in three ways. The best, by far, is an external stylesheet linked from the head — one file styling your whole site. There is also internal CSS in a <code><style></code> tag, and inline CSS in a <code>style</code> attribute (avoid this except for quick tests).

Method	How	Use when
External	<link> to a .css file	Almost always — best practice
Internal	<style> in the head	A single one-off page
Inline	style="..." on an element	Quick tests only — avoid

HTML · editable

<style>
  p { color: teal; font-size: 18px; }
</style>
<p>This paragraph is styled with internal CSS.</p>

Internal CSS in a style tag — try changing the colour.

Linking an external stylesheet

In real projects you link a separate CSS file from the head. One line connects your whole stylesheet, keeping HTML clean and letting one file style every page.

<link rel="stylesheet" href="styles.css">

Element<link>
Relationshiprel="stylesheet"
Filehref="styles.css"

Classes and ids: how CSS finds elements

CSS needs to know which elements to style. That is what the <code>class</code> and <code>id</code> attributes are for. A <code>class</code> can be reused on many elements; an <code>id</code> must be unique on the page. In CSS, you target a class with a dot (<code>.button</code>) and an id with a hash (<code>#header</code>).

HTML · editable

<style>
  .highlight { background: gold; padding: 4px; }
  #intro { font-weight: bold; }
</style>
<p id="intro">This is the intro.</p>
<p class="highlight">Highlighted.</p>
<p class="highlight">Also highlighted.</p>

A class styles many elements; an id styles one.

class vs id

class

Reusable on many elements
Targeted with .name in CSS
Use for styling groups
The everyday choice

Unique — one per page
Targeted with #name in CSS
Also used for page anchors
Use sparingly

Separation of concernsYou do not style with HTML — you add structure with HTML and hooks (classes and ids), then style with CSS. Keeping them separate keeps both clean. The full story is in the upcoming CSS course.

Try it yourself: style with class and id

In the editable box, create two paragraphs and a heading. Give the heading an id and the paragraphs a shared class. Then write CSS in the style block to colour the heading and add a background to the class. Watch it update live.

Quick quiz

1. What is the best way to add CSS to a real site?

2. How is a class different from an id?

3. How do you target a class in CSS?

4. What is the role of HTML when working with CSS?

Key takeaways

CSS connects via external <link> (best), internal <style>, or inline (avoid).
Classes are reusable (.name); ids are unique per page (#name).
HTML provides structure and hooks; CSS provides the styling.
Keeping structure and style separate keeps both clean.

Three ways to add CSS

Linking an external stylesheet

Classes and ids: how CSS finds elements

Related lessons