<style> - Embedded Style Information

The `<style>` Element

Metadata HTML 3.2

The <style> element contains CSS style information for a document or document fragment. It allows you to embed CSS directly into HTML, defining how elements should be displayed in the browser. While typically placed in the <head> section, <style> elements can appear anywhere in your document.

Quick Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: #ffeb3b;
      padding: 4px 8px;
      border-radius: 3px;
    }
    .text-large {
      font-size: 1.5em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is <span class="highlight">highlighted text</span>.</p>
  <p class="text-large">This text is large and bold.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: #ffeb3b;
      padding: 4px 8px;
      border-radius: 3px;
    }
    .text-large {
      font-size: 1.5em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is <span class="highlight">highlighted text</span>.</p>
  <p class="text-large">This text is large and bold.</p>
</body>
</html>

Syntax

<style>
  /* CSS rules go here */
  selector {
    property: value;
  }
</style>

The content inside <style> tags should be valid CSS. The styles apply to the document or shadow DOM tree containing the element.

Attributes

Element-Specific Attributes

Attribute	Description	Values
`media`	Specifies which media/device the styles are optimized for	Media query (e.g., `screen`, `print`, `(max-width: 600px)`)
`type`	MIME type of the style sheet (deprecated)	`text/css` (default, can be omitted)
`nonce`	Cryptographic nonce for Content Security Policy	Base64-encoded string
`blocking`	Indicates rendering should block on fetching critical subresources	`render`

Global Attributes

This element supports all global attributes, including id, class, and title.

Common Use Cases

Basic Embedded Styles

Embed CSS directly in your HTML for small projects or single-page applications:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      color: #2c3e50;
      border-bottom: 3px solid #3498db;
      padding-bottom: 10px;
    }
    p {
      margin-bottom: 1em;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This page uses embedded styles for a clean, professional look.</p>
  <p>All styling is contained within the HTML document.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      color: #2c3e50;
      border-bottom: 3px solid #3498db;
      padding-bottom: 10px;
    }
    p {
      margin-bottom: 1em;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This page uses embedded styles for a clean, professional look.</p>
  <p>All styling is contained within the HTML document.</p>
</body>
</html>

Media-Specific Styles

Use the media attribute to apply styles only for specific devices or conditions:

<!DOCTYPE html>
<html>
<head>
  <!-- Screen styles -->
  <style media="screen">
    body {
      background-color: #f0f0f0;
      color: #333;
    }
    .print-only {
      display: none;
    }
  </style>

  <!-- Print styles -->
  <style media="print">
    body {
      background: white;
      color: black;
      font-size: 12pt;
    }
    .no-print {
      display: none;
    }
    .print-only {
      display: block;
    }
  </style>
</head>
<body>
  <h1>Document Title</h1>
  <p>This content appears on screen and in print.</p>
  <button class="no-print">Click Me (hidden in print)</button>
  <p class="print-only">This only appears when printed.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <!-- Screen styles -->
  <style media="screen">
    body {
      background-color: #f0f0f0;
      color: #333;
    }
    .print-only {
      display: none;
    }
  </style>

  <!-- Print styles -->
  <style media="print">
    body {
      background: white;
      color: black;
      font-size: 12pt;
    }
    .no-print {
      display: none;
    }
    .print-only {
      display: block;
    }
  </style>
</head>
<body>
  <h1>Document Title</h1>
  <p>This content appears on screen and in print.</p>
  <button class="no-print">Click Me (hidden in print)</button>
  <p class="print-only">This only appears when printed.</p>
</body>
</html>

Critical CSS for Performance

Inline critical above-the-fold styles to improve initial render performance:

<!DOCTYPE html>
<html>
<head>
  <!-- Critical CSS for immediate rendering -->
  <style>
    /* Above-the-fold styles */
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }
    .hero {
      height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .hero h1 {
      font-size: 3rem;
      margin: 0;
    }
  </style>
  <!-- Non-critical CSS loaded separately -->
  <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
</head>
<body>
  <div class="hero">
    <h1>Fast-Loading Hero Section</h1>
  </div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <!-- Critical CSS for immediate rendering -->
  <style>
    /* Above-the-fold styles */
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }
    .hero {
      height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .hero h1 {
      font-size: 3rem;
      margin: 0;
    }
  </style>
  <!-- Non-critical CSS loaded separately -->
  <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
</head>
<body>
  <div class="hero">
    <h1>Fast-Loading Hero Section</h1>
  </div>
</body>
</html>

Component-Scoped Styles

Use <style> within document fragments or web components for scoped styling:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Global styles */
    body { font-family: Arial, sans-serif; padding: 20px; }
  </style>
</head>
<body>
  <h1>Product Cards</h1>

  <template id="card-template">
    <style>
      /* Scoped to this component */
      .card {
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin: 10px 0;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card h3 {
        color: #3498db;
        margin-top: 0;
      }
    </style>
    <div class="card">
      <h3 slot="title">Product Name</h3>
      <p slot="description">Product description goes here.</p>
    </div>
  </template>

  <div id="container"></div>

  <script>
    const template = document.getElementById('card-template');
    const container = document.getElementById('container');
    const clone = template.content.cloneNode(true);
    container.appendChild(clone);
  </script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Global styles */
    body { font-family: Arial, sans-serif; padding: 20px; }
  </style>
</head>
<body>
  <h1>Product Cards</h1>

  <template id="card-template">
    <style>
      /* Scoped to this component */
      .card {
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin: 10px 0;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card h3 {
        color: #3498db;
        margin-top: 0;
      }
    </style>
    <div class="card">
      <h3 slot="title">Product Name</h3>
      <p slot="description">Product description goes here.</p>
    </div>
  </template>

  <div id="container"></div>

  <script>
    const template = document.getElementById('card-template');
    const container = document.getElementById('container');
    const clone = template.content.cloneNode(true);
    container.appendChild(clone);
  </script>
</body>
</html>

Dark Mode with Media Queries

Implement dark mode using the prefers-color-scheme media query:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Light mode (default) */
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --border-color: #dddddd;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: system-ui, sans-serif;
      padding: 20px;
      transition: background-color 0.3s, color 0.3s;
    }

    .card {
      border: 1px solid var(--border-color);
      padding: 20px;
      border-radius: 8px;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
        --border-color: #444444;
      }
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Automatic Dark Mode</h2>
    <p>This page adapts to your system's color scheme preference.</p>
  </div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Light mode (default) */
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --border-color: #dddddd;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: system-ui, sans-serif;
      padding: 20px;
      transition: background-color 0.3s, color 0.3s;
    }

    .card {
      border: 1px solid var(--border-color);
      padding: 20px;
      border-radius: 8px;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
        --border-color: #444444;
      }
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Automatic Dark Mode</h2>
    <p>This page adapts to your system's color scheme preference.</p>
  </div>
</body>
</html>

Responsive Styles with Multiple Media Queries

Create responsive layouts with media query-based styles:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Mobile-first base styles */
    .container {
      padding: 10px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .card {
      background: #f0f0f0;
      padding: 15px;
      border-radius: 4px;
    }

    /* Tablet: 2 columns */
    @media (min-width: 600px) {
      .container {
        padding: 20px;
      }
      .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
    }

    /* Desktop: 3 columns */
    @media (min-width: 900px) {
      .container {
        padding: 40px;
        max-width: 1200px;
        margin: 0 auto;
      }
      .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="grid">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Mobile-first base styles */
    .container {
      padding: 10px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .card {
      background: #f0f0f0;
      padding: 15px;
      border-radius: 4px;
    }

    /* Tablet: 2 columns */
    @media (min-width: 600px) {
      .container {
        padding: 20px;
      }
      .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
    }

    /* Desktop: 3 columns */
    @media (min-width: 900px) {
      .container {
        padding: 40px;
        max-width: 1200px;
        margin: 0 auto;
      }
      .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="grid">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </div>
</body>
</html>

Style vs Link: When to Use Each

Understanding when to use <style> versus <link> is crucial for performance and maintainability:

Use inline <style> when: Critical above-the-fold CSS (improves First Contentful Paint), small amounts of CSS (under 10KB), page-specific styles not reused elsewhere, implementing critical rendering path optimization, working with component-based architectures where scoping is important, or creating single-page applications or standalone HTML files.

Use external <link> when: Styles are shared across multiple pages (better caching), total CSS exceeds 14KB (HTTP/2 packet size), you want to leverage browser caching, managing large stylesheets that benefit from separation, working in teams where CSS and HTML are maintained separately, or you need to support style sheet switching or alternate stylesheets.

Best practice for production: Inline critical CSS for above-the-fold content in a <style> tag, then load the rest via <link rel="stylesheet"> with appropriate loading strategies. This combines the benefits of both approaches for optimal performance.

Comparison Example

<!DOCTYPE html>
<html>
<head>
  <!-- Inline critical CSS -->
  <style>
    /* Immediate rendering styles */
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }
    .hero {
      min-height: 400px;
      background: #3498db;
      color: white;
      padding: 40px 20px;
    }
  </style>

  <!-- External stylesheet for non-critical CSS -->
  <!-- <link rel="stylesheet" href="/styles/main.css"> -->

  <!-- Preload for better performance -->
  <!-- <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> -->
</head>
<body>
  <div class="hero">
    <h1>Hero Section (Critical CSS)</h1>
    <p>This loads instantly with inline styles.</p>
  </div>
  <main>
    <p>Additional content can use external CSS.</p>
  </main>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <!-- Inline critical CSS -->
  <style>
    /* Immediate rendering styles */
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }
    .hero {
      min-height: 400px;
      background: #3498db;
      color: white;
      padding: 40px 20px;
    }
  </style>

  <!-- External stylesheet for non-critical CSS -->
  <!-- <link rel="stylesheet" href="/styles/main.css"> -->

  <!-- Preload for better performance -->
  <!-- <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> -->
</head>
<body>
  <div class="hero">
    <h1>Hero Section (Critical CSS)</h1>
    <p>This loads instantly with inline styles.</p>
  </div>
  <main>
    <p>Additional content can use external CSS.</p>
  </main>
</body>
</html>

Performance Considerations

Render-Blocking Behavior

Styles in <style> tags are render-blocking, meaning the browser must parse and apply them before rendering content. This is both a strength and a consideration:

Benefits
Drawbacks

Advantages of inline styles: No network request required (faster than external files for small CSS), guaranteed to be available immediately, perfect for critical rendering path optimization, and eliminates FOUC (Flash of Unstyled Content) for initial content. Inline styles reduce Total Blocking Time and improve First Contentful Paint metrics.

Critical CSS Strategy

The optimal approach for most production websites:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Optimized Page</title>

    <!-- Step 1: Inline critical CSS (above-the-fold) -->
    <style>
      /* Critical styles for immediate render */
      body { margin: 0; font-family: system-ui; }
      .header { background: #333; color: white; padding: 1rem; }
      .hero { min-height: 500px; background: #f0f0f0; }
    </style>

    <!-- Step 2: Preload non-critical CSS -->
    <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/styles/main.css"></noscript>

    <!-- Step 3: Preconnect to external resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
  </head>
  <body>
    <!-- Content renders immediately with critical styles -->
  </body>
</html>

Size Recommendations

Keep inline <style> blocks appropriately sized:

Under 5KB: Ideal for critical CSS
5-10KB: Acceptable for component-specific styles
10-14KB: Maximum recommended (fits in one TCP packet)
Over 14KB: Consider splitting or using external stylesheet

Security Considerations

Content Security Policy (CSP)

Modern web applications use Content Security Policy to prevent XSS attacks. The nonce attribute allows inline styles while maintaining security:

<!DOCTYPE html>
<html>
<head>
  <!--
    Server generates unique nonce per request
    CSP header: Content-Security-Policy: style-src 'self' 'nonce-2726c7f26c'
  -->
  <style nonce="2726c7f26c">
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .secure {
      background: #d4edda;
      border: 1px solid #c3e6cb;
      padding: 10px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="secure">
    <h2>Secure Inline Styles</h2>
    <p>This style block uses a nonce for CSP compliance.</p>
  </div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <!--
    Server generates unique nonce per request
    CSP header: Content-Security-Policy: style-src 'self' 'nonce-2726c7f26c'
  -->
  <style nonce="2726c7f26c">
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .secure {
      background: #d4edda;
      border: 1px solid #c3e6cb;
      padding: 10px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="secure">
    <h2>Secure Inline Styles</h2>
    <p>This style block uses a nonce for CSP compliance.</p>
  </div>
</body>
</html>

CSP Best Practices

When implementing Content Security Policy with inline styles:

Generate unique nonces: Use a cryptographically secure random generator on the server for each request
Match header and attribute: Ensure the nonce in your CSP header matches the nonce attribute exactly
Avoid ‘unsafe-inline’: Never use 'unsafe-inline' in production; use nonces or hashes instead
Use hashes for static styles: For truly static inline styles, you can use hash-based CSP instead of nonces

<!-- Example with hash-based CSP -->
<!-- CSP header: style-src 'sha256-xyz123abc456...' -->
<style>
  body { margin: 0; }
</style>

Preventing Style Injection

Inline styles can be vectors for CSS injection attacks if user content is unsafely inserted:

Unsafe
Safe

<!-- DANGEROUS: Never do this -->
<style>
  .user-color {
    /* User input: <%= user_input %> */
    color: <%= user_input %>;
  }
</style>

Risk: An attacker could inject malicious CSS to steal data or manipulate the page appearance for phishing attacks.

<!-- SAFE: Sanitize and validate user input -->
<style>
  .user-color {
    /* Validated hex color only */
    color: <?= htmlspecialchars($validated_color) ?>;
  }
</style>

Protection: Always validate and sanitize user input. For colors, use allowlists or strict regex validation. Never trust user input directly in CSS.

Accessibility Considerations

High Contrast Mode

Respect user preferences for high contrast mode:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .button {
      background: #007bff;
      color: white;
      border: 2px solid #007bff;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 16px;
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
      .button {
        background: #000;
        color: #fff;
        border: 3px solid #fff;
        font-weight: bold;
      }
    }
  </style>
</head>
<body>
  <button class="button">Accessible Button</button>
  <p>This button adapts to high contrast mode preferences.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .button {
      background: #007bff;
      color: white;
      border: 2px solid #007bff;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 16px;
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
      .button {
        background: #000;
        color: #fff;
        border: 3px solid #fff;
        font-weight: bold;
      }
    }
  </style>
</head>
<body>
  <button class="button">Accessible Button</button>
  <p>This button adapts to high contrast mode preferences.</p>
</body>
</html>

Reduced Motion

Respect user preferences for reduced motion to avoid triggering vestibular disorders:

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      background: #3498db;
      color: white;
      padding: 20px;
      border-radius: 8px;
      transition: transform 0.3s ease;
    }

    .animated:hover {
      transform: scale(1.1);
    }

    /* Disable animations for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .animated,
      .animated:hover {
        transition: none;
        transform: none;
      }
    }
  </style>
</head>
<body>
  <div class="animated">
    <p>Hover over me (animation respects motion preferences)</p>
  </div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      background: #3498db;
      color: white;
      padding: 20px;
      border-radius: 8px;
      transition: transform 0.3s ease;
    }

    .animated:hover {
      transform: scale(1.1);
    }

    /* Disable animations for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .animated,
      .animated:hover {
        transition: none;
        transform: none;
      }
    }
  </style>
</head>
<body>
  <div class="animated">
    <p>Hover over me (animation respects motion preferences)</p>
  </div>
</body>
</html>

Font Size and Zoom

Ensure your styles support browser zoom and user font size preferences:

/* Good: Use relative units */
body {
  font-size: 1rem; /* Respects user preferences */
  line-height: 1.5;
}

h1 {
  font-size: 2em; /* Scales with body font */
}

/* Avoid: Fixed sizes that don't scale */
body {
  font-size: 16px; /* Ignores user preferences */
}

Color Contrast

Ensure sufficient color contrast for readability:

/* Good: WCAG AA compliant (4.5:1 contrast ratio) */
.text {
  color: #333333;
  background-color: #ffffff;
}

/* Poor: Insufficient contrast */
.text {
  color: #cccccc;
  background-color: #ffffff;
}

Browser Support

Browser	Version	Notes
Chrome	1+	Full support including media queries
Firefox	1+	Full support including media queries
Safari	1+	Full support including media queries
Edge	12+	Full support including media queries
IE	3+	Basic support; IE9+ for media queries

Feature Support

Feature	Chrome	Firefox	Safari	Edge
Basic `<style>`	1+	1+	1+	12+
`media` attribute	1+	1+	3+	12+
Media queries	4+	3.5+	4+	12+
`nonce` attribute	45+	31+	10+	79+
`blocking` attribute	105+	105+	17+	105+

Container for document metadata where style elements typically reside. Learn more →

Links to external stylesheets, an alternative to inline styles. Learn more →

<style> - Embedded Style Information

The <style> Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Basic Embedded Styles

Media-Specific Styles

Critical CSS for Performance

Component-Scoped Styles

Dark Mode with Media Queries

Responsive Styles with Multiple Media Queries

Style vs Link: When to Use Each

Comparison Example

Performance Considerations

Render-Blocking Behavior

Critical CSS Strategy

Size Recommendations

Security Considerations

Content Security Policy (CSP)

CSP Best Practices

Preventing Style Injection

Accessibility Considerations

High Contrast Mode

Reduced Motion

Font Size and Zoom

Color Contrast

Browser Support

Feature Support

Related Elements

The `<style>` Element