<style>: The STYLE Element
Last updated: 2026-10-13
<style>The STYLE Element
Writes CSS rules inline in the document without an external file; media can limit when it applies.
| Category | Metadata |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </style> tag |
| Status | Standard |
📝 Syntax
<style>
selector { property: value; }
</style>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
type | Style language, default text/css, usually omitted. | |
media | Media condition that limits when the style applies. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <style> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： style is handy for demos; production sites prefer external CSS via link for reuse.
❓ FAQ
QShould style go in head or body?
APer the spec, style only belongs in head (a style in body violates the content model). Browsers tolerate it in practice, but the right path is critical CSS in head to avoid FOUC; JS-injected styles for components are a separate story.
QWhat is the difference between style and link for CSS?
AAn inline
<style> block arrives with the HTML — no extra request — ideal for above-the-fold critical CSS; <link> external files are cacheable, reusable across pages, and easier to maintain — ideal for site-wide styles. The classic performance combo: critical CSS in a head style, the rest loaded asynchronously via link.QHow does the media attribute on style work?
AAdding
media='print' makes that CSS apply only when printing, or media='(max-width: 600px)' applies conditionally. Note: non-matching style blocks still download and parse — they just do not apply.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
