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>  

Style Applied With Javascript Enabled JavaScript Enabled

Style Applied With Javascript Disabled JavaScript Disabled