References

Beginner-friendly references for web development, with live, editable examples.

The HTML <style> tag

Element All modern browsers Updated
Quick answer

The HTML <style> element embeds CSS directly in the document, normally inside the <head>. Use the media attribute to scope styles to a media query. For anything beyond critical or page-specific CSS, prefer an external <link> stylesheet.

Overview

The <style> element embeds CSS directly in the document. It usually lives in the <head>, and its media attribute can limit the styles to matching conditions, for example media="print" for print-only rules.

Inlining CSS this way is best reserved for a small amount of critical or page-specific CSS — the styles needed to render the first screen quickly. For shared styles used across the site, an external <link rel="stylesheet"> is better, because the browser can cache one file across every page.

One security note: a strict Content-Security-Policy may block inline <style> blocks unless they carry a matching nonce. The old type="text/css" attribute is no longer needed in HTML.

Syntax

<style>
  body { font-family: system-ui; }
  .card { padding: 1rem; }
</style>

Attributes

The <style> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
blocking render Marks a resource as render-blocking.
media A media query, e.g. (min-width: 600px) or print. Applies the resource to matching media only.
type A MIME type such as text/css or image/webp — or module on a <script>. Specifies the MIME type of a resource.

Example

Live example 
<style>
  p { color: #1c7ce9; }
</style>
<p>Styled by an embedded stylesheet.</p>

Best practices

  • Reserve inline <style> for small amounts of critical or page-specific CSS.
  • Use an external <link rel="stylesheet"> for shared, cacheable styles.
  • Scope a block with the media attribute (e.g. media="print") when needed.
  • Add a nonce if a strict Content-Security-Policy blocks inline styles.

Frequently asked questions

What is the style element for?
To embed CSS directly in the document, usually in the <head>.
Should I use a style element or an external stylesheet?
Use inline <style> only for small, critical CSS; use an external <link rel="stylesheet"> for shared styles so they can be cached.
How do I apply a style block only when printing?
Add media="print" to the <style> element so its rules apply only to printed output.
Does the style element need a type attribute?
No. type="text/css" is the default and is no longer needed in HTML.
strong sub