🎓 A1Learner
🔍

HTML Style Element

The style element holds CSS rules inside the head of a page. CSS is the language that sets colours, sizes, and spacing.

A rule inside the page

This rule paints every paragraph blue. The words below stay the only visible text, and the rule itself never prints.

<style>p { color: blue; }</style>
<p>These words wear blue.</p>

A linked stylesheet

The link element loads a stylesheet from a separate file. The rel value stylesheet names the kind of file being loaded.

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

A rule for headings

This rule gives every level-two heading a yellow background. The heading text is the visible part of the page.

<style>h2 { background-color: yellow; }</style>
<h2>Marked heading</h2>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Notes</title>
<link rel="stylesheet" href="styles.css">
<style>h1 { color: darkgreen; }</style>
</head>
<body>
<h1>Garden Notes</h1>
<p>Tomatoes need full sun.</p>
</body>
</html>

Key points

  • Style element: a block in the head that holds CSS rules for the page
  • CSS can live inside the page in a style element or in a linked file
  • Rule: one line of CSS that names an element and sets how it looks
  • Link element: the element that loads a stylesheet from a separate file
  • Stylesheet: a file that holds CSS rules

In this example, the head carries both homes for CSS. The link element points at an outside stylesheet file. The style element holds one rule that paints the heading dark green. Neither block prints on the page. The body shows the heading and the paragraph as the visible text.

Note

The CSS course teaches rules in depth, and this lesson only shows where they live

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element loads a stylesheet from a separate file?