How to Add CSS to HTML: External, Internal and Inline Styles

There are three ways to connect CSS to HTML. Real websites mostly use the first one, but you will meet all three.

1. External stylesheet#

Write CSS in a separate .css file and link it from the <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Site</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, CSS!</h1>
  </body>
</html>

h1 {
  color: teal;
}

Save both files in the same folder and open index.html: the heading is teal.

Why this is the standard choice:

• One file styles every page. Change a colour once and the whole site updates.
• Caching. The browser downloads the stylesheet once and reuses it on every page.
• Separation. HTML files hold content; CSS files hold design.

A page can link several stylesheets. They apply in the order they are linked.

2. Internal styles: the style element#

CSS can go inside a <style> element in the <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Internal styles</title>
    <style>
      p { color: purple; font-size: 20px; }
    </style>
  </head>
  <body>
    <p>Styled by a style element in the head.</p>
  </body>
</html>

This is handy for one-page demos, emails and small experiments. For a multi-page site, the styles would have to be copied into every page.

3. Inline styles: the style attribute#

The style attribute applies declarations to one element:

<p style="color: crimson; font-weight: bold;">Only this paragraph is crimson.</p>

Inline styles are hard to maintain (they are scattered through the HTML), cannot use selectors, pseudo-classes or media queries, and override most stylesheet rules, which makes them difficult to change later. They are mainly used when JavaScript sets a value, such as the position of something being dragged.

Which to use?#

Browser default styles#

Even with no CSS at all, headings are big and bold, links are blue and underlined, and the body has a small margin. These come from the browser's built-in user agent stylesheet. Your CSS overrides these defaults. Some projects start with a small reset or normalise stylesheet that removes or evens out these defaults, so every browser starts from the same point.

How examples work on this site#

Lesson examples show a CSS code block and an HTML code block. The live Result puts the CSS in a <style> element and the HTML in the body, exactly like the internal-styles method above. In your own projects, put the CSS in a .css file instead.

Practice#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Practice</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>My first stylesheet</h1>
    <p>This text is dark grey.</p>
  </body>
</html>

h1 { color: navy; }
p { color: #333; }

Key takeaway#