HTML <style> Tag for Inline Styles

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <style> Tag in HTML 5

The <style> tag can be used to include inline CSS style information in the document itself.

To link to an external CSS style sheet, use <link rel="stylesheet"/> instead.

<style> Tag Syntax

Rules for coding HTML `style` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

CSS <style> tag as metadata content

How to code a style element in the head section

<head>
   ... metadata content ...
   <title>... text content ...</title>
   ...
   <style type="text/css">
      ... inline styles ...
   </style>
   ...
</head>

Inside the <head> section of the HTML document where metadata content is allowed, code one or more optional style elements.
Begin the style element with a starting <style> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include the CSS style information between the starting and ending <style> tags.
End the style element with a matching </style> closing tag.

CSS <style> tag as flow content

How to code a scoped style element in the body section

<div>
   <style scoped="scoped" type="text/css">
      ...
   </style>
   ... flow content expected ...
</div>

Inside an element where flow content is expected, code a style element immediately after the starting tag for the element to which the style is to apply.
Begin the style element with <style scoped="scoped">. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include the CSS style information between the starting and ending <style> tags.
End the style element with a matching </style> closing tag.
Do not code a style attribute on the parent element because browsers will use the style information in the <style> tag instead of the style attribute.

<style> Content Model

Contents of the <style> Tag

Content model: CSS style information

<style> Tag Attributes

Attributes of the <style> tag

global attributes	In addition to the personal attributes of the <style> tag below, any of the common HTML attributes can also be coded.
`media`	The value of the media attribute is a media type or a comma-separated list of media types indicating an "or" relationship. Some browsers may also recognize expressions with media queries, such as `handheld and (min-width:200px)`. Continuous media types `media="braille"` `media="screen"` `media="speech"` `media="tty"` Hybrid (continuous or paged) media types `media="all"` (default) `media="handheld"` `media="tv"` Paged media types `media="embossed"` `media="print"` `media="projection"` These media query values can also be used in the `media` attribute of the <link/> tag and in the @media and @import CSS Rules.
`scoped="scoped"`	Sets the value of the <style scoped> boolean attribute to `true`. Omitting it sets to `false`.
`title`	Although `title` is one of the common HTML attributes, which can be coded on any HTML element, it is entirely different when coded on the `style` tag: A `title` attribute on the `style` tag indicates that the style element defines an alternative style sheet. The name of the alternative style sheet is the value of the `title` attribute. The value of the `title` attribute is not inherited from its ancestors. A style element without a title defines a primary style sheet.
`type`	specifies a MIME media type and subtype, without a `charset` attribute `type="text/css"` (default) `type="media-type/subtype"`

<style> Tag Examples

Examples of the `style` tag in HTML 5

<head>
   ...
   <style>
      ...
   </style>
   ...
</head>
<body>
   ...
   <div>
      <style scoped="scoped">
         ...
      </style>
      <p>This paragraph has a specific style.</p>
   </div>
   ...
</body>

Note that the scoped style element could not be put inside the p paragraph element because the content of the p element is phrasing content but the style element must be used in flow content.

Link to external style sheet

It is possible to link to an external style sheet using the <style> tag, although it's probably better to use <link rel="stylesheet"> instead.

<style type="text/css" media="screen">
   @import url("/screen.css");
</style>

The slash at the beginning of the CSS url string indicates that the style sheet is in the default location at the root of the web site's document tree.

Changes in HTML 5 - <style> Tag

What's new in HTML 5

The scoped attribute has been added.

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the style element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5