The <style> element
The <style> tag holds CSS written directly inside an HTML page, usually in the <head>. The rules apply to the whole page, just like an external stylesheet, without needing a separate file. It is handy for single-page projects, quick prototypes and small amounts of critical CSS; larger sites usually keep their CSS in files loaded with <link>.
Last updated: October 3, 2026
Quick facts
| Category | Metadata content |
| Content model | CSS text |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | A <head> element (browsers also accept it in the <body>, but the HTML standard expects it in the head) |
| DOM interface | HTMLStyleElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| media | Applies the CSS only for a media query, e.g. print or (max-width: 600px) |
| title | Names an alternative stylesheet set |
| blocking | render keeps the page hidden until this CSS is ready |
| type | Obsolete: text/css is the default, so leave it out |
Common examples
Print styles
A <style media="print"> block applies only when the page is printed, so you can hide menus and buttons on paper.
Dark mode
Use the prefers-color-scheme media query to match the visitor’s light or dark setting.
Reusable colors with CSS variables
Define colors once in :root and reuse them everywhere — change one line to restyle the page.
Critical CSS in <style> vs a full stylesheet
A common speed technique uses both. The small amount of CSS needed for what appears first on screen — the header, the main heading, the layout — is placed in a <style> tag so the page can show immediately, with no extra download. The rest of the CSS loads from an external file via <link>, which the browser caches for every other page.
For small sites, a single external stylesheet is simpler and perfectly fast. Inline “critical CSS” is worth it on large, busy pages where every fraction of a second of loading time counts.
| Critical CSS in <style> | Full stylesheet | |
|---|---|---|
| Downloads | None (in the page) | One file, then cached |
| Size | Small, above-the-fold only | Everything |
| Benefit | Faster first paint | Caching across pages |
Common mistakes to avoid
- Copying the same big
<style>block into every page. It can’t be cached and is hard to update; move shared CSS into one external file. - Fighting with
!important. Using it to win every conflict makes styles impossible to override later; fix the selector order instead. - Writing
//comments. CSS only understands/* … */comments;//breaks the rule that follows. - Forgetting the closing
</style>. Everything after it is treated as CSS and disappears from the page.
Accessibility & SEO tips
- Check text color contrast — a ratio of at least 4.5:1 for normal text keeps your page readable for everyone.
- Respect visitors who prefer less motion with
@media (prefers-reduced-motion: reduce)and tone down animations there. - Never remove focus outlines without replacing them; keyboard users rely on them to see where they are.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. Modern CSS features used above, such as variables and prefers-color-scheme, work in all current browsers.
Tutorials: How to add a background image, How to center a div, How to change the font, How to change text color, How to link CSS to HTML