<style>
The <style> element contains CSS rules that apply to the current document. It embeds styling information directly within the HTML file rather than linking to an external stylesheet. While typically placed in the <head> section, it can technically appear anywhere in the document, though this is not recommended.
This page was last updated on 2025-11-27
Syntax
<style>
body {
font-family: Arial, sans-serif;
}
</style>
Attributes
- type - MIME type of the style language (default is "text/css", rarely needed in HTML5)
- media - Media query specifying which media/device the styles apply to
- nonce - Cryptographic nonce for Content Security Policy (CSP)
- title - Can be used to create alternative stylesheets (rarely used)
Examples
Basic internal stylesheet:
<head>
<style>
body {
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
</style>
</head>
Media-specific styles:
<style media="print">
.no-print {
display: none;
}
body {
font-size: 12pt;
}
</style>
<style media="screen and (max-width: 600px)">
.sidebar {
display: none;
}
</style>
Critical CSS for performance:
<head>
<!-- Critical CSS inline for fast first paint -->
<style>
header { background: #000; color: #fff; padding: 10px; }
.hero { min-height: 400px; }
nav { display: flex; }
</style>
<!-- Non-critical CSS loaded asynchronously -->
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
</head>
With Content Security Policy nonce:
<style nonce="abc123xyz">
.secure-element {
border: 1px solid green;
}
</style>
When to Use
The <style> element is appropriate in certain situations:
- Critical CSS - Inline styles needed for above-the-fold content to render quickly
- Single-page sites - Small sites where external files add unnecessary HTTP requests
- Email templates - HTML emails often require inline and embedded styles
- Quick prototyping - Testing styles during development
- Component-specific styles - Styles that only apply to one page
Best practices:
- Place <style> elements in the <head> section for predictable rendering
- Prefer external stylesheets for production sites (better caching, maintainability)
- Use internal styles for critical CSS that must load immediately
- Keep internal stylesheets small to avoid blocking page rendering
- Use media queries to target specific devices or contexts
- Consider using the nonce attribute when implementing Content Security Policy
- Don't use the type attribute in HTML5; "text/css" is the default
When to avoid:
- Large amounts of CSS that would benefit from caching
- Styles shared across multiple pages (use external stylesheet instead)
- When maintainability is a priority (external files are easier to manage)
Related Elements
- <head> - The preferred container for <style> elements
- <link> - For external stylesheets (usually preferred)
- <script> - Similar element for JavaScript
- <noscript> - Fallback for when scripts are disabled
