<style>
The <style> element embeds an inline CSS stylesheet in a document. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <style> element embeds an inline CSS stylesheet in a document. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
media | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| The HTMLStyleElement interface represents a style element. It inherits properties and methods from its parent, HTMLElement. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLStyleElement.disabled property can be used to get and set whether the stylesheet is disabled (true) or not (false). | 1 | 13 | 1 | 1 | 18 | 1 |
| The HTMLStyleElement.media property specifies the intended destination medium for style information. | 1 | 12 | 1 | 1 | 18 | 1 |
Syntax
<style>
.highlight {
background-color: yellow;
padding: 0.2em 0.4em;
}
.text-center {
text-align: center;
}
</style>Use cases
Strengthen structure
Use <style> to make the document outline, grouping, or semantics more explicit.
Improve meaning
Apply <style> when clearer HTML structure helps users and tools understand the content.
Cautions
- Test <style> in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.
Related links
Powered by web-features