Inline vs Internal vs External CSS

Three Places CSS Can Live

CSS can be written inline on an element, inside a style block in the document, or in a separate file. Each has a different scope and a different best use case.

Inline CSS

<p style="color: navy; font-weight: bold;">Important notice</p>

Inline styles apply only to the single element carrying the style attribute. They have the highest specificity of the three methods, which makes them hard to override later - useful for a one-off tweak, but a maintenance problem if used everywhere.

Internal CSS

<head>
  <style>
    p { color: navy; font-weight: bold; }
  </style>
</head>

Internal styles sit inside a <style> tag in the document's head and apply to every matching element on that page only. They are handy for a single standalone page or a quick prototype, but they cannot be shared across multiple pages.

External CSS

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

An external stylesheet lives in its own .css file and is linked from any page that needs it. This is the standard approach for real projects: one file can style an entire site, the browser can cache it separately from the HTML, and teams can edit styles without touching page markup.

Which One Should You Use?

• Default to external stylesheets for anything beyond a single quick test.
• Use internal styles for a small, self-contained demo page.
• Reserve inline styles for dynamic values set by scripts, or rare one-off overrides - not as a general styling method.