<style> Style block
Puts CSS rules straight into the page.
<style> holds CSS for the current page and usually sits in the head. For a small page or a demo it is handy. A real site is better off with an external stylesheet loaded through <link rel="stylesheet">, which every page can reuse and the browser can cache.
Old code often carries type="text/css". You can drop it. The element holds CSS only, so HTML tags inside it are wrong.
Its media and blocking attributes are defined under the style element in the HTML Living Standard (opens in a new tab). You can see it at work in the style element and selectors lesson.
Syntax
<style>
selector{property:value}
</style>When to use it
A style block fits single-page projects, quick demos, pages from a system that will not let you add files, and the small amount of critical CSS that must be ready before anything else loads. On a multi-page site, keep most of your CSS in an external file and save style for page-specific tweaks.
The element beats the style attribute because it keeps CSS in one place and supports selectors, media queries and hover states. An attribute can do none of that. Against <link> it saves a network request, but it cannot be cached separately, so every page that contains it downloads the same CSS again.
Putting a media attribute on style saves no download. The CSS is already in the page, and the browser only applies the rules when the query matches. A style element in the body works in browsers, but the standard allows it only in the head, and validators will complain. The colors and fonts lesson gives you rules worth putting in it.
Attributes
| Attribute | What it does |
|---|---|
media | Media query; the rules apply only when it matches, such as print. |
blocking | Set to render to block rendering until the styles are ready. |
Live example
Edit the code and watch the preview.
<style>
h1{color:#c0392b}
.note{background:#ffd;padding:8px}
</style>
<h1>Red heading</h1>
<p class="note">A highlighted note.</p>More examples
Print-only rules
A second style block with media="print" applies only when the page is printed. It hides the menu and writes each link's address after its text, so the paper copy stays useful. Open the print preview of your browser to see the difference.
<style>
body{font-family:Arial,sans-serif}
</style>
<style media="print">
nav{display:none}
a::after{content:" (" attr(href) ")"}
</style>
<nav><a href="index.html">Home</a> | <a href="menu.html">Menu</a></nav>
<h1>Opening hours</h1>
<p>Find us on <a href="https://sunny.example/map">the map</a>.</p>A color theme with custom properties
CSS custom properties defined on :root store the brand colors once. Every rule below reuses them with var(). Change one value and the heading and the card update together, and the style block stays short.
<style>
:root{--brand:#0b6e4f;--soft:#e6f4ee}
h1{color:var(--brand)}
.card{background:var(--soft);border-left:4px solid var(--brand);padding:8px 12px}
</style>
<h1>Garden Club</h1>
<p class="card">Next meeting: Saturday at 10am in the greenhouse.</p>Tip: Anything bigger than a demo deserves an external stylesheet.
Browser support
The style element has been supported in every browser since CSS arrived in the late 1990s, and its media attribute works everywhere. The newer blocking="render" attribute, which explicitly marks the styles as render-blocking, is not available in every engine yet; check the style blocking support table (opens in a new tab).
Accessibility
Color and other CSS effects should never be the only carrier of meaning. Text needs a contrast ratio of at least 4.5:1 against its background (WCAG 1.4.3), and the W3C note Understanding Contrast (Minimum) (opens in a new tab) shows how to measure it.
Common mistakes
Wrong
<style>
<p>color: red;</p>
</style>Right
<style>
p { color: red; }
</style>style holds CSS. HTML tags do not go there.
Frequently asked questions
Where should the style tag go in HTML?
In the <head>. Browsers will apply a <style> they find in the body, but the HTML standard allows <style> only in the head (or in a <noscript> inside the head), and styles that arrive late can cause a flash of unstyled content. Styles shared by many pages belong in an external file loaded with <link rel="stylesheet">. If the CSS in the block needs formatting or minifying, paste it into CSSEditor, an online CSS formatter (opens in a new tab).
What is the difference between the style tag and the style attribute?
The <style> element holds complete CSS rules with selectors, such as p{color:navy}, so one rule can style many elements. The style attribute holds declarations for its own element and nothing else, like style="color:navy". Inline styles carry very high specificity and get painful to maintain, so keep rules in a stylesheet when you can. The style attribute lesson covers the inline version and where it runs out.
Practise it
- The style Element and Selectors (Module 9: A Touch of CSS)
- External Stylesheets (Module 9: A Touch of CSS)
- Colors and Fonts (Module 9: A Touch of CSS)
- The Box Model (Module 9: A Touch of CSS)
- Project: Style Your Card (Module 9: A Touch of CSS)
- Personal Profile Page (Module 10: Final Projects)