Internal CSS
The café is putting up a one-off page for its monsoon festival. It has its own look and will never be reused. Instead of creating a separate file, you can keep the CSS on the page itself, in a style element.
The rule
A style element styles one whole page, from one place.
Internal CSS sits inside a <style> element in the page's <head>. Its contents are ordinary CSS rules, not HTML attributes:
<head>
<title>Monsoon Festival — Harbour Café</title>
<style>
h1 {
color: teal;
}
.price {
color: green;
font-weight: bold;
}
</style>
</head>Compared with inline CSS, this is a big step up. One rule for .price now styles every price on the page, and you can use every kind of selector and media query. The looks are gathered in one block instead of scattered through the tags.
Its limit is the page boundary. A style element affects only the document it is in. If the café's five pages each carry the same block, they are five separate copies, and a new brand colour means five edits.
There is also a small cost in download: the CSS travels inside every page, so a browser cannot keep one copy and reuse it the way it can with a separate file.
The shortcut
Ask "How many pages need this?" Exactly one page → internal is fine. More than one → it belongs in an external file (next lesson).
Count the pages
The festival page is a single page with its own colours. One page.
A common slip is putting HTML inside the style element, such as <p style="...">. The browser reads the contents as CSS, so HTML there is just broken CSS.
Drills
Answer fast — trust the rule.
Where should the style element normally go?
The festival page has twelve prices and one internal rule .price { color: green; }. How many prices turn green?
The café's five pages each contain an identical style block. The brand colour changes. How many places must you edit?
What does the browser expect between <style> and </style>?
Remember
- A
styleelement in theheadstyles one whole page with full CSS rules. - Ask "how many pages?": one is fine, more means an external file.
- Trap: copying the same block into several pages.