Free Computer Courses

How to add CSS to HTML

Updated September 2026 · Beginner-friendly guide

Link an external stylesheet

Place a link in the document head. A root-relative path starts at the website root.

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

Create the CSS file

Save the stylesheet at the linked location. The browser downloads it and applies matching rules.

body {
  font-family: system-ui, sans-serif;
  margin: 0;
}

Know the alternatives

  • A style element is useful for a small, page-specific example
  • An inline style attribute is hard to reuse and should usually be avoided
  • An external file can be cached and shared by many pages
  • The order of linked stylesheets can affect the cascade

Check common problems

Confirm the filename, path, and capitalization; then inspect the browser developer tools. A CSS error normally invalidates one declaration or rule rather than the whole file.

Related tutorials