The <style> Element
As defined in the HTML Living Standard, the <style> element allows authors to embed style information (CSS) in their documents. The <style> element is one of the two primary ways to document CSS rules for a document, the other being the <link> element.
body {
color: var(--color-text);
}
</style>
The <style> tag is typically placed in the <head> of the document, but it can also be used in the <body> under specific conditions in modern HTML5.
Separation of Concerns
The primary role of the <style> element is to separate Presentation from Structure.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By moving visual choices (like font-size, color, and positioning) into a <style> block instead of using inline style="" attributes or presentational tags (like <font>), you ensure that the HTML structure remains clean. This allows assistive technology to focus on the semantic meaning of the content without being cluttered by presentational noise.
Accessibility via Media Queries
The <style> element is the container for powerful media queries that allow you to adapt your site to specific user needs.
prefers-reduced-motion: Essential for users with vestibular disorders. Use this to turn off animations.prefers-color-scheme: Supports users who require high-contrast or dark modes for visual comfort.forced-colors: Helps you ensure your design remains usable in Windows High Contrast Mode.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Best Practices
- Avoid Inline Styles: Use
<style>or<link>instead of thestyleattribute. This makes the code more maintainable and easier for users to override with their own custom stylesheets. - The
mediaAttribute: You can use themediaattribute on the<style>tag itself (e.g.,<style media="print">) to apply styles only in specific contexts. - CSP Compliance: Note that strict Content Security Policies (CSP) may block internal
<style>tags. Use hashes or nonces if required by your security audit.
A11y Tip: User Overrides
Users with low vision often use "User Stylesheets" to increase font sizes or change background colors. Keeping your styles centralized in a <style> block makes it easier for these specialized browsers to calculate specificity and apply the user's preferred settings.