Pixel To Presence

In short

There are three ways to add CSS to an HTML page: inline styles, an internal style tag, and an external stylesheet with link. Learn each one, when to use it, and build a small styled page.

Three ways to add CSS to HTML

You already know that HTML builds the structure of a page and CSS controls how it looks. To connect them, HTML gives you three options:

Method	Where the CSS lives	Best for
Inline	In a `style` attribute on one element	Quick tests, one-off changes
Internal	In a `<style>` element in the `<head>`	A single page, demos
External	In a separate `.css` file, connected with `<link>`	Real websites with many pages

Let's look at each one from the HTML side. Think of it like clothes: inline is pinning a badge on one person, internal is a dress code for one party, and external is a company uniform everyone shares.

Inline CSS with the style attribute

You met this in the HTML Styles lesson. The CSS goes straight onto the element.

<p style="color: navy; font-size: 1.2rem;">Welcome to our bookshop.</p>

This works, but it only styles this one paragraph. If you have twenty paragraphs, you need twenty style attributes.

Internal CSS with the style tag

An internal stylesheet is CSS written inside a <style> element in the page's <head>. Here you write CSS rules. A rule has a selector (which elements to style) and a block of declarations in curly braces.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Turner Books</title>
  <style>
    body {
      font-family: Georgia, serif;
      background-color: #fdf8f0;
      color: #333333;
    }
    h1 {
      color: #8b3a2b;
    }
    p {
      font-size: 1.1rem;
    }
  </style>
</head>
<body>
  <h1>Page Turner Books</h1>
  <p>New and second-hand books in the heart of town.</p>
  <p>Open every day except Monday.</p>
</body>
</html>

The selector p means "every paragraph", so both paragraphs get the larger text with one rule. The whole page has a warm cream background and a dark red heading. This is much tidier than inline styles, but the CSS only works on this one page.

External CSS with the link tag

An external stylesheet is a separate file that ends in .css. You connect it with a <link> element in the <head>:

rel="stylesheet" says "this file is a stylesheet".
href is the path to the file, just like a link or an image path.

Create a folder with two files. First, index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Turner Books</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <h1>Page Turner Books</h1>
    <p class="tagline">Find your next favourite story.</p>
  </header>
  <main>
    <h2>This week's picks</h2>
    <ul>
      <li>The Silent Garden</li>
      <li>A Map of Small Things</li>
      <li>Learning to Fly</li>
    </ul>
  </main>
  <footer>
    <p>12 High Street, open Tuesday to Sunday</p>
  </footer>
</body>
</html>

Then make a folder called css and save this as css/styles.css. Note that a CSS file contains only CSS, no <style> tags:

body {
  font-family: Arial, Helvetica, sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
  background-color: #fdf8f0;
  color: #333333;
}

header {
  background-color: #8b3a2b;
  color: white;
  padding: 16px;
  text-align: center;
}

.tagline {
  font-style: italic;
}

h2 {
  color: #8b3a2b;
}

footer {
  border-top: 2px solid #8b3a2b;
  font-size: 0.9rem;
}

Open index.html in your browser. You will see a centred column of content, a dark red header with white text and an italic tagline, a red "This week's picks" heading, and a footer with a line above it. Now make about.html, add the same <link> line, and it gets the same look instantly. Change one color in styles.css and every page updates. That is the real power of external CSS.

Common mistake: A wrong path in href. If your page shows no styles at all, check that the folder and file names match exactly, including capital letters. Open DevTools (F12), go to the Network or Console tab, and look for a 404 error for styles.css.

Which CSS wins? The order of styles

You can use more than one method at once. When two rules disagree, a few simple rules decide:

Inline styles usually win over styles in <style> or external files.
Between rules with the same selector, the one that comes later wins.
So if your <style> tag comes after the <link>, its rules beat the file's rules for the same selector.

This is called the cascade, the "C" in CSS. The CSS course explains it in full.

Tip: For real projects, use one external stylesheet linked on every page, and avoid inline styles. Your HTML stays clean and your design stays consistent. See MDN: Getting started with CSS to go further.

Practice exercise

Build a two-page mini website for a dog walker: index.html and prices.html. Create one file css/site.css with styles for body, h1 and footer, and link it from both pages. Then add a <style> block only on prices.html that makes its h1 a different color.

Hint: put the <style> block after the <link> line so it wins for the h1.

Key takeaways

Inline CSS uses the style attribute and affects one element.
Internal CSS goes in a <style> element in the <head> and affects one page.
External CSS lives in a .css file, connected with <link rel="stylesheet" href="...">, and can style a whole website.
When rules conflict, inline styles win, and later rules beat earlier ones.
Use an external stylesheet for real websites.

HTML and CSS: How to Add CSS to Your HTML Page