Free Computer Courses

How to add CSS to a page

Updated September 2026 · Beginner-friendly guide

Prefer an external stylesheet

A shared file can be cached and reused across every page.

<!-- Inside <head> -->
<link rel="stylesheet" href="/styles.css">
/* styles.css */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }

Embed page-specific CSS

A style element belongs in head and is reasonable for a tiny standalone example.

<style>
  .notice { border-inline-start: 4px solid royalblue; padding: 1rem; }
</style>

Avoid inline style attributes

Inline styles such as style="color: red" mix content and presentation, repeat easily, and are difficult to override. Use meaningful class names and stylesheet rules.

Keep accessibility intact

CSS should not remove focus outlines, hide content needed by screen readers, or create a reading order that conflicts with the DOM. Test zoom, narrow screens, high contrast, and reduced motion.

Related tutorials