HTML <style> Tag

<style> tag is used to style HTML document with CSS. It defines what different elements will look like in websites.

To link to external style sheet use <link> tag.

The information included in <style> tag is meant for browsers, that’s why <style> tag is placed inside the <head> element. In case of having scripts in the page, they are placed after CSS code.

It is possible to use more than one <style> element on one page.

In the previous versions of HTML ( up to 5th version) and in XHTML use type - <style type = "text/css"> attribute with <style> tag.

Syntax

<style> tag comes in pair.Its content is written between opening (<style>) and closing (</style>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
    <style>
      h1 {color:orange;}
      p {color:green;}
    </style>
  </head>
  <body>
    <h1>Text heading.</h1>
    <p>First paragraph.</p>
  </body>
</html>

Attributes

Attribute Value Description
media media_query Indicates the type of the device which optimizes the style.Styling tables support any device by default.
scoped scoped Logical attribute, which indicates that the style applies only to parent and child elements. At the same time <style> tag is not inside the <head> tag. Instead it is inside the element which it is supposed to style.
type text/css Indicates which syntax to use to interpret the styles correctly.
It is not used in HTML5.