Document Structure & Metadata

<style> Tag

Embed CSS directly inside the HTML document.

1Inline Stylesheets

The <style> element lets you write CSS directly inside <head>. Useful for critical above-the-fold styles or single-file demos.

Example Code

css

<head>
  <style>
    body { font-family: system-ui; margin: 2rem; }
    h1 { color: #4f46e5; }
  </style>
</head>

2Put the element in context

An internal style block applies CSS to the current document. It is useful for a small self-contained example, while a shared external stylesheet is often easier to maintain across several pages. The same cascade rules apply whether the CSS is internal or external.

3Practice with a small page

Style a card through a style block, then move those rules to a linked stylesheet. Compare the result and check the file path. Keep the HTML structure unchanged so that the exercise isolates where the styles are stored.

Finished reading?

Mark this topic as complete to track progress.

<link> Tag

Next Topic

<script> Tag