Three Ways to Add CSS to a Page

There are three places you can put CSS. They all work. They are not equally good.

1. Inline CSS

You write the styles inside an element’s style attribute.

1

<p style="color: green; font-size: 20px;">Styled with an inline style.</p>

It only affects that one element and it beats most other rules. It is handy for a quick test or for a value that is set by code, and awkward for everything else.

2. Internal CSS

You put a <style> element inside the page, normally in the <head>.

1
2
3
4
5

<style>
  p { color: green; font-size: 20px; }
</style>
<p>Styled with an internal stylesheet.</p>
<p>Every paragraph on this page is affected.</p>

This is good for a single page or a demo. Every example in this course uses it so you can see the HTML and the CSS together.

3. External CSS

You write the CSS in its own file, for example style.css, and link to it from each page.

1
2
3

<head>
  <link rel="stylesheet" href="style.css">
</head>

1
2
3
4

p {
  color: green;
  font-size: 20px;
}

One file can style every page of a website. The browser also downloads it once and reuses it, which makes later pages load faster.

Which one should you use?

1
2
3
4

<style>
  p { color: green; }
</style>
<p>Hello</p>