The Style Element

15 September 2015

The <style> element is a "metadata” type element, which means its purpose is to provide setup for how the rest of the document will be displayed. We use this element to embed style declarations within our HTML document, rather than linking to an external dedicated stylesheet. It is essentially a form of inline styling.

In addition to the global HTML attributes, the style element accepts the following attributes -

Attribute	Description	Default
`type`	A valid MIME type that specifies the language for the style	`”text/css”`
`media`	A valid media query	`”all”`
`title`	Specifies a title for an alternate style element	none
`scoped`*	Allows us to place a `<style>` element within the body and limit the scope of the styles to the parent element	none/false

* Limited browser support

By default, most browsers apply a single line of styling to the <style> element -

style {
  display: none;
}

Here are some things you may not know you can do with the style element.

Styling the `style` element #

Although it may not always seem like it, the <style> element is just like any other element in an HTML document. This means that it can be targeted with CSS and even styled.

Not only can we override the default styling and show the content of the <style> element, we can add any style we could to a regular div.

style {
  display: block;
  background-color: palevioletred;
  color: #fff;
}

<style>
  html {
    font-family: 'Proxima Nova';
    padding: 30px;
    color: #fff;
  }
</style>

Styleception

Similarly, we can use the style attribute to the <style> element and apply CSS to it directly within the HTML.

<style style=“display: block; background-color: palevioletred; color: #fff;">
  // styles
</style>

We can even target the <style> element within itself -

<style>
  style {
    display: block;
    background-color: palevioletred;
    color: #fff;
  }
</style>

Placement of the `<style>` element #

The <style> element does not necessarily have to be within the <head> (although that is currently the best pratice for HTML validation).

HTML5 introduced the scoped attribute, which is supposed to allow us to insert the <style> attribute anywhere within the body and limit the scope of the styles to the element’s immediate parent. For example -

<p>This sentence colour should be the default black</p>

<div>
  <style scoped>
    p { color: plum; }
  </style>
  <p>This sentence colour should be plum</p>
</div>

Unfortunately, the browser support for this attribute is very low at the moment. Currently, only Firefox supports it out of the box.

However, most browsers will still allow us to place the <style> element within the <body>, but without the scoping ability. The styles will just apply to the whole document. So, with the example HTML above, both <p>s will appear in plum for most major browsers.

Conditional styling with `noscript` #

Besides being able to conditionally apply styles with the media attribute, we can specify different styles to apply depending on if javascript is enabled in the browser.

We do this by placing the conditional styling within a <style> element within a <noscript> element in the <head>. For example -

<head>
  <!-- Default styling -->
  <style>
    p { color: plum; }
  </style>

  <noscript>
    <!-- Styling for when javascript is disabled -->
    <style>
      p { color: cornflowerblue; }
    </style>
  </noscript>
</head>
<body>
  <p>What colour will this sentence be?</p>
</body>