How To Add CSS

Apply CSS with external, internal, and inline methods.

Syntax<link rel="stylesheet" href="styles.css">

There are three ways to insert CSS:

External — a separate .css file linked with <link>. Best for whole sites.
Internal — a <style> block in the page <head>. Good for a single page.
Inline — a style attribute on one element. Use sparingly.

If several rules target the same element, the one with the highest specificity and the one that appears last wins. This is the cascade.

Example

Loading editor…

Press Run to see the result.

A developer adds an external stylesheet to a 50-page site so a single file change rebrands every page at once.
A designer adds an internal style block to a one-off landing page to avoid creating a separate file for a minor tweak.
A CMS plugin injects an inline style on a dynamically generated banner to set a background color fetched from the database.

The preferred method — links a separate file so styles apply to the whole site and the file can be browser-cached.

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

Places CSS directly in the page head, useful for single-page styling when no external file is warranted.

<head>
  <style>
    body { font-family: Arial, sans-serif; }
    h1   { color: #2965f1; }
  </style>
</head>

Applies style with the style attribute directly on an element — highest specificity but hardest to maintain at scale.

<p style="color: #e05c00; font-weight: bold;">
  This paragraph has an inline style.
</p>