CSS can be applied to an HTML page three ways: an external stylesheet linked via <link>, an internal <style> block in the document head, or inline style attributes on individual elements.

Syntax

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

Deep Dive Course

An external stylesheet, linked with <link rel="stylesheet" href="...">, is the standard, recommended approach for real projects, since it keeps styling separate from markup, gets cached by the browser across page loads, and can be shared across multiple HTML pages. An internal <style> block embeds CSS rules directly inside the HTML document's <head>, useful for a single page's unique styles or quick prototyping without a separate file. Inline styles, written directly on an element via its style attribute, like style="color: red;", apply only to that one specific element and carry the highest specificity of the three methods, which makes them useful for one-off overrides but generally discouraged for anything beyond that, since they can't be reused and are harder to maintain at scale.

1Understanding Including CSS in HTML

💡

Reach for inline styles sparingly, mainly for a genuine one-off override or dynamically-computed values set via JavaScript — because they carry the highest specificity, overusing them makes a stylesheet's other, more maintainable rules difficult or impossible to override later.

editor.html

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

localhost:3000

2Practical Example

Here is a real-world application of Including CSS in HTML showing how it is used in production CSS code.

editor.html

<!-- Internal style block -->
<head>
  <style>
    body { font-family: sans-serif; }
  </style>
</head>

<!-- Inline style -->
<p style="color: red;">Warning text</p>

localhost:3000

3Best Practices

Follow these guidelines when working with Including CSS in HTML:

1. Use an external stylesheet as the default approach for real projects, for caching, reusability across pages, and separation of concerns

2. Reserve an internal <style> block for genuinely page-specific styles or quick prototyping, rather than an entire project's styling

3. Avoid inline styles except for genuine one-off cases or values computed dynamically at runtime, since their high specificity makes later overrides difficult

⚠️

Tip: Reach for inline styles sparingly, mainly for a genuine one-off override or dynamically-computed values set via JavaScript — because they carry the highest specificity, overusing them makes a stylesheet's other, more maintainable rules difficult or impossible to override later.

editor.html

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

localhost:3000

Examples

Example 01Basic Usage

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

Example 02Advanced Example

<!-- Internal style block -->
<head>
  <style>
    body { font-family: sans-serif; }
  </style>
</head>

<!-- Inline style -->
<p style="color: red;">Warning text</p>

Best Practices

Use an external stylesheet as the default approach for real projects, for caching, reusability across pages, and separation of concerns
Reserve an internal