Syntax
<style>
body { font-family: sans-serif; }
</style>Examples
Basic Embedded Styles
Adding page-specific CSS directly in the document.
<head>
<style>
body { margin: 0; font-family: system-ui; }
h1 { color: #1f2937; }
</style>
</head>Media-Specific Styles
Using the media attribute to apply styles conditionally.
<style media="print">
nav, footer { display: none; }
</style>Component-Scoped Styles
A style block for a specific reusable component.
<style>
.card { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 16px; }
</style>
<div class="card">Card content</div>Attributes
- media (string): A media query specifying when the styles apply
- type (string): Defaults to text/css; rarely needs to be set explicitly
Best practices
- Prefer external stylesheets via <link> for anything beyond a handful of page-specific rules, for better caching and maintainability
- Use style blocks for critical above-the-fold CSS you want inlined for faster first paint
- Avoid inline style attributes on individual elements for anything reusable — a style block or external file keeps things DRY
- Keep embedded styles scoped and specific to avoid unexpectedly overriding global styles elsewhere on the site
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<style>
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 3.5
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 1
Edge
- From 12
Opera
- From 3.5
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<style> media
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 3.5
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 1
Edge
- From 12
Opera
- From 3.5
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<style> type
Deprecated feature: avoid in new projects.
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 3.5
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1 · Before 75, Firefox accepted any CSS media (MIME) type, with optional parameters. Starting in 75, this has been restricted to the string 'text/css', per the spec.
Safari
- From 1
Edge
- From 12
Opera
- From 3.5
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.