The <style> HTML Element

Overview

The <style> element is used to integrate CSS directly into HTML documents, providing styling information for its encompassing content or the entire document. Unlike many other HTML elements, <style> does not present content for users but rather dictates how other elements should visually appear.

Examples and Usage

To demonstrate the versatility of the element, we'll showcase how to embed basic styles into an HTML document, the intricacies of how styles interact with one another, and its usage with the media attribute.

Basic Document Styling

We'll begin by setting some basic styles to an HTML document.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Styling</title>
    <style>
      body {
        font-family: 'UI Monospace', monospace;
        background-color: #f9f9f9;
        color: DarkSlateGray;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Documentation Page</h1>
    <p>Learn the basics of CSS</p>
  </body>
</html>

In this code, the <style> block within the <head> section contains styles targeting the body element. As a result, the entire document uses the 'UI Monospace' font, has a near-white (#f9f9f9) background, and displays text in a darkslategray color.

Understanding Style Prioritization

Multiple <style> elements in a document can target the same HTML elements. Let's explore how this impacts the final styling.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Cascading Styles</title>
    <style>
      h2 {
        color: darkred;
        text-decoration: underline overline orange;
        font-family: 'UI Monospace', monospace;
      }
    </style>
    <style>
      h2 {
        text-decoration: solid underline royalblue;
      }
    </style>
  </head>
  <body>
    <h2>JavaScript Basics</h2>
  </body>
</html>

The above code features two <style> elements both targeting the <h2> tag. The initial style gives the text a darkred color, an underline and overline decoration in orange, and a specific font. The subsequent style modifies the text-decoration property, emphasizing the underline with a royalblue hue.

Due to the cascading nature of CSS, the latter style overrides the former for the shared properties. This demonstrates how CSS rules are applied in the order they're defined, especially when the rules have equal specificity.

Using Media Queries

Styles can also be conditionally applied based on the viewport size using media queries.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Responsive Styling</title>
    <style media="all and (max-width: 600px)">
      p {
        color: tomato;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>Resize the browser window to less than 600px in width to see the style changes.</p>
  </body>
</html>

Media queries, as used within the <style> element's media attribute, enable conditional styling. Specifically, the value "all and (max-width: 600px)" within the media attribute indicates:

all: The styles apply to all media types, including both screen displays and print.
(max-width: 600px): The styles activate only when the viewport's width is 600 pixels or narrower.

So, the paragraph text shifts to a tomato hue and boldens when the viewport's width meets or falls below the 600px threshold.

To test this, you can:

Paste the code into platforms like CodePen or an online HTML editor of your choice.
View the document in a browser.
In Chrome:

Press F12 to open the Developer Tools.
Use the Ctrl + Shift + M shortcut to toggle the Device Toolbar.
With the dimensions set to Responsive(default), manually adjust the width to a value of 600px or below.

Alternatively, you can simply resize the browser window and zoom in to achieve a width of less than 600px and observe the style changes.

External stylesheets, linked via the <link> element, are favored in contemporary web development. This preference stems from improved organization, caching advantages, and a clear distinction between content and styling. However, the <style> element potentially holds its ground for specific use cases, such as small-scale projects, single-page documents, or for dynamically generated styles through scripting.

Attribute Breakdown

In addition to global attributes, the <style> element comes with a set of specific attributes to customize its behavior.

Attribute	Description
`media`	Defines the media types for which the style is applied, with its value being a media query. Defaults to "all" if omitted.
`title`	Specifies alternative style sheet sets. Unlike the global `title` attribute, a `style` block without a title doesn't inherit the title of the parent element.

The blocking attribute, currently marked as experimental, is introduced to explicitly indicate that certain operations should wait on the fetching of crucial subresources, such as stylesheets brought in via @import.

This means that elements like background images or fonts, which aren't categorized as critical, won't cause a delay in rendering. The notable value for this attribute is render, which halts the display of content on the screen until the necessary resources are fetched. It's worth noting that as an experimental feature, it's not uniformly supported across all browsers.

Accessibility Aspects

The <style> element doesn't possess specific accessibility considerations. It doesn't correlate with any particular role and doesn't utilize aria-* attributes. In essence, since it doesn't represent content for users, it doesn't have a direct impact on accessibility.

Associated Elements

<link>

Additional Notes

The <style> element can be nested within any HTML element that accepts metadata content.
The usage of multiple <style> elements in a document can potentially impact page render performance. Browsers read and apply styles from top to bottom. Therefore, defining critical styles (styles that affect the above-the-fold content) in the head section ensures they are parsed and applied first, optimizing the perceived page load performance for the user. However, overusing <style> elements, especially scattered throughout a document, can lead to increased complexity and maintenance challenges.
Specificity in CSS is a mechanism to determine which CSS rule should be applied to an element when conflicting rules exist. It assigns a weight to each rule based on its selector, and the rule with a higher weight (or specificity) takes precedence over those with lower specificity.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes*	Yes	Yes	Yes	Yes*

Useful Resources

Can I use HTML element: style

The HTML Living Standard Specification: style

Guide on CSS Specificity