The <style> Element
As defined in the HTML Living Standard, the <style> element contains CSS styling information for the document. It is typically placed within the <head>.
<style>
body {
font-family: sans-serif;
color: #333;
}
</style>While external stylesheets are preferred for maintainability, internal styles are useful for critical CSS that must load immediately to prevent layout shift.
View HTML Living Standard: The style elementAccessibility Impact: Visual Presentation
The CSS within a <style> block directly controls the accessibility of the user interface.
WCAG Requirement: Use of Color
Success Criterion 1.4.1 (Level A): Use of Color.
Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. When writing CSS in a <style> block, ensure that errors or important states are indicated by more than just a color change (e.g., add an icon or a border).
Best Practices for Accessible Styling
- Avoid Fixed Units: Use
remoreminstead ofpxfor font sizes. This allows the text to scale when the user changes their browser's default font size. - Focus Indicators: Never use
outline: none;without providing a clear, high-contrast alternative focus style. - Logical Properties: Use properties like
margin-inline-startinstead ofmargin-leftto support Right-to-Left (RTL) languages automatically.
A11y Tip: High Contrast Mode
When using internal styles, be mindful of users in "High Contrast Mode" (Windows). Use the system-colors or avoid hard-coding colors for elements that should adapt to the user's OS theme.