<style>

Since:		HTML 4(1997)

The style element embeds CSS directly in an HTML document. It is typically placed inside head to define styles for the entire page.

Syntax

<!-- Basic usage: write CSS inside head -->
<head>
  <style>
    body {
      font-family: sans-serif;
      color: #333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>

<!-- Apply CSS only to a specific media type -->
<style media="print">
  .no-print { display: none; }
</style>

Main Attributes

Attribute	Description
type	Specifies the MIME type of the stylesheet. This attribute is now optional and defaults to `text/css` when omitted.
media	Specifies the media type(s) to which the styles apply, using a media query. When omitted, the styles apply to all media (e.g., `screen`, `print`, `(max-width: 768px)`).

Sample Code

sample_style_tag.html

View sample page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>style Tag Sample</title>

  <!-- Styles applied to all media -->
  <style>
    body {
      font-family: "Helvetica", sans-serif;
      margin: 24px;
      background-color: #f9f9f9;
    }
    .highlight {
      background-color: #ffffcc;
      padding: 4px 8px;
      border-radius: 3px;
    }
  </style>

  <!-- Styles applied only when printing -->
  <style media="print">
    .no-print {
      display: none;
    }
    body {
      font-size: 12pt;
    }
  </style>
</head>
<body>

  <p>This is a regular paragraph.</p>
  <p class="highlight">This text is highlighted.</p>

  <!-- This element is hidden when printing -->
  <nav class="no-print">
    <a href="/?lang=en">Back to top</a>
  </nav>

</body>
</html>

Output

The paragraph text is displayed in the specified font, and the second paragraph has a light yellow highlight applied. In the print preview, the navigation is hidden.

View sample page

Notes

Use the style element to write page-specific CSS. Compared to linking an external CSS file with the link element, embedding styles this way can slightly improve initial render time since no additional file request is needed. However, because the styles cannot be shared across multiple pages, it is recommended to consolidate styles common to the entire site into an external CSS file.

The media attribute lets you apply different styles for screen display and printing. For example, setting media="print" restricts those styles to print and print preview only. You can also use media queries such as (max-width: 768px) for responsive designs that adapt to different screen sizes.

To apply a style to a single element, you can use the style attribute directly on that tag (inline styles). For maintainability and reusability, it is generally better to consolidate styles in a style element or an external CSS file.

Inlining Critical CSS (Performance Optimization)

To speed up the rendering of the first visible area (above the fold), the technique of embedding the minimum CSS needed for the initial paint directly in a <style> tag is called "inlining critical CSS."

<head>
  <!-- Critical CSS (only styles needed for the first paint) -->
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #333; color: #fff; padding: 1rem; }
    .hero { height: 400px; background: #f0f0f0; display: flex;
            align-items: center; justify-content: center; }
  </style>

  <!-- Load the remaining CSS asynchronously -->
  <link rel="preload" href="/css/style.css?lang=en" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/style.css?lang=en"></noscript>
</head>

Dynamically Manipulating style Tags with JavaScript

// Dynamically add a style tag
var style = document.createElement("style");
style.textContent = ".modal-open { overflow: hidden; }";
document.head.appendChild(style);

// Add/remove rules via the CSSStyleSheet API
var sheet = document.styleSheets[0]; // get the first stylesheet
sheet.insertRule(".highlight { background: yellow; }", sheet.cssRules.length);

// Change a CSS custom property (variable) from JavaScript
document.documentElement.style.setProperty("--primary-color", "#e74c3c");

// Reset the custom property
document.documentElement.style.removeProperty("--primary-color");

Common Mistakes

Mistake 1: Writing the style element inside body

The style element belongs inside <head>. While browsers often handle it gracefully when placed inside <body>, this is invalid according to the HTML specification and may cause rendering delays or style application timing issues.

<!-- NG: style inside body -->
<body>
  <style>
    p { color: red; }
  </style>
  <p>Text</p>
</body>

The corrected version looks like this:

<!-- OK: style inside head -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>Text</p>
</body>

Mistake 2: Misusing inline style attributes vs. style tags

Inline style attributes apply to a single element. They have high specificity and are difficult to override with CSS classes, which reduces maintainability. Styles that follow design rules should be defined as CSS classes in a style tag or external stylesheet.

<!-- NG: repeating the same inline style on multiple elements -->
<p style="color: blue; font-weight: bold;">Text 1</p>
<p style="color: blue; font-weight: bold;">Text 2</p>
<p style="color: blue; font-weight: bold;">Text 3</p>

The corrected version looks like this:

<!-- OK: define as a CSS class -->
<head>
  <style>
    .highlight { color: blue; font-weight: bold; }
  </style>
</head>
<body>
  <p class="highlight">Text 1</p>
  <p class="highlight">Text 2</p>
  <p class="highlight">Text 3</p>
</body>