HTML <style> Element

The HTML <style> element contains CSS rules that control the appearance and presentation of an HTML document.

Syntax

<style>
  p {
    color: blue;
  }
</style>

The <style> element requires both an opening and closing tag. CSS rules are written between the tags and are applied to matching elements in the document.

Attributes

The <style> element supports the global HTML attributes and the following element-specific attributes:

Attribute	Description
`media`	Specifies the media or conditions for which the embedded CSS rules are intended.
`blocking`	Indicates that certain operations should be blocked while the stylesheet is being processed.

Example

This example places a <style> element in the document's <head> and uses CSS to change the color of the heading and the appearance of the paragraph.

Play in Editor

Usage Notes

The <style> element allows CSS to be included directly within an HTML document. This approach is commonly called an internal or embedded stylesheet.

A <style> element is normally placed inside the document's <head> so the browser can process the styles as the page is loaded.

CSS written inside <style> follows the same selector, property, and value syntax used in external CSS stylesheets.

More than one <style> element can appear in a document. The normal CSS cascade determines which declarations are applied when multiple rules target the same content.

For websites with multiple pages, an external stylesheet connected with the <link> element is often easier to maintain because the same CSS file can be shared across many documents.

The type="text/css" attribute was commonly included on <style> elements in older HTML. It is unnecessary in modern HTML because CSS is the default styling language.

Accessibility

The <style> element itself does not provide accessibility information, but the CSS it contains can significantly affect how easily users can read, understand, and interact with a webpage.

Use CSS that maintains readable text sizes, sufficient color contrast, visible keyboard focus indicators, and layouts that remain usable when content is enlarged or viewed on different screen sizes.

Avoid using CSS to hide important information or remove visual focus indicators unless an equally accessible alternative is provided.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <style> Element .

The <style> element is closely related to the <link> element for connecting an external stylesheet and the <head> element where document-level styles and other metadata are normally placed.

Specifications

HTML Living Standard: The <style> Element

HTML <style> Element