How To Add CSS

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Be able to tell apart the three ways of adding CSS

There are three ways to add CSS to an HTML page. External CSS is the best option for production websites. Keeping the CSS in its own file makes maintenance easy and lets you reuse it across many pages. Internal CSS works well for single-page tests, landing page prototypes, and tutorial demos. Inline CSS is handy for quickly styling one specific element, but it tends to make code messy once a project grows.

css

<!-- 1) External CSS: recommended for real projects -->
<link rel="stylesheet" href="styles.css">

<!-- 2) Internal CSS: useful for small demos -->
<style>
  body {
    background-color: lightblue;
  }
</style>

<!-- 3) Inline CSS: use carefully -->
<h1 style="color: navy;">A Blue Heading</h1>

You should see

All three methods can change the style of HTML elements. For real websites, though, External CSS is the way to go.

Tip

For small demo pages in a tutorial, it's fine to start with Internal CSS. But once you're building an actual project, splitting things into a separate CSS file is the cleanest approach.