Inline, internal and external CSS

The same styling, three places to write it

CSS can be written in an HTML element’s style attribute, in a style element inside the document head, or in a separate .css file linked from the head. Each method can make a heading blue and 32 pixels tall. The difference is where the declaration lives and how easily you can reuse or maintain it. The sections below show complete, copyable examples.

Inline CSS with the style attribute

The style attribute attaches declarations directly to one HTML element. In the example below, only this h1 gets color: blue and font-size: 32px. There is no selector or surrounding declaration block inside the attribute because the declarations already belong to that one element.

Inline CSS can be useful for a one-off style supplied dynamically by an application or for a tightly scoped demonstration. Repeating it across many elements makes maintenance difficult, and it cannot express ordinary stylesheet selectors or media-query rules inside a single style attribute. Prefer a stylesheet for shared design rules.

index.html — inline CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline CSS</title>
</head>
<body>
  <h1 style="color: blue; font-size: 32px;">Welcome</h1>
</body>
</html>

Internal CSS with a style element

A style element contains normal CSS rules and belongs inside the HTML head. Here the h1 selector matches the heading in the body. This keeps the rules in one place for that page while avoiding repeated style attributes.

Internal CSS can suit a self-contained page or a short experiment. If several pages need the same design, copying a style block to every page is harder to maintain than linking one shared CSS file.

index.html — internal CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 {
      color: blue;
      font-size: 32px;
    }
  </style>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

External CSS with a linked file

An external stylesheet puts rules in a separate .css file. In index.html, the link element goes inside head and href="styles.css" points to a file beside it. The browser loads that file and applies its h1 rule to the page. The two complete files below work together when saved in the same folder.

External CSS is usually the most maintainable choice for a project with multiple pages: link the same stylesheet from each page and update common styles once. A stylesheet in a subfolder needs a matching relative path, such as href="css/styles.css". If the path is wrong, the browser cannot load the rules.

index.html — external CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first styled page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Welcome to my page</h1>
    <p>CSS gives this page its colours and spacing.</p>
  </main>
</body>
</html>

styles.css — external CSS

body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
  color: #1f2937;
}

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

• Build the two-file project step by step

What if several declarations set the same property?

The cascade decides which applicable declaration wins; it considers factors including origin, importance, cascade layers, selector specificity and source order. For two ordinary author rules of equal specificity, the later rule wins. A more specific selector can win even if it appears earlier. An ordinary inline style generally beats ordinary author stylesheet rules, but it is not true that “inline always wins”: important declarations and other cascade rules can change the outcome.

For example, if an h1 has style="color: blue" and an ordinary external h1 rule says color: red, the inline blue declaration wins. Do not use inline styles just to force a result. Inspect the heading in browser developer tools to see matched rules, crossed-out declarations and where each rule came from. Then fix the underlying selector, ordering or rule structure instead of adding unnecessary overrides.

• Specificity
• Cascade Layers
• Basic Selectors

Choosing an approach

Begin with an external stylesheet for a page you plan to grow. Use an internal style element when a genuinely self-contained page benefits from carrying its own rules. Use the style attribute sparingly when the value must belong to one specific element. Whichever method you choose, HTML still supplies the content and CSS still describes its presentation.

• Understand rule syntax
• Return to the CSS introduction

Syntax

h1 {
  color: blue;
  font-size: 32px;
}

Examples

.card h2 {
  color: blue;
  font-size: 32px;
}

<article class="card"><h2>My first styled heading</h2><p>This paragraph keeps its normal size while the heading changes.</p></article>

Best practices

• Prefer a shared external stylesheet for styles used across several pages.
• Keep a style element in the HTML head and reserve inline CSS for narrow, deliberate cases.
• Debug competing declarations with the browser’s style inspector before adding more overrides.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Related CSS documentation

Specifications & further reading

• MDN: Getting started with CSS — adding CSS to a document
• MDN: Handling conflicts — cascade and specificity
• MDN: CSS cascading and inheritance