HTML Style Tag

The HTML <style> tag is used for declaring style sheets within your HTML document.

Note:The <style> element does not represent actual content for the user. Rather, it is used for styling the content.

Syntax:

The <style> tag is written as <style>....</style> with the style sheet inserted between the start and end tags.

Like this:

<style>
    Styles here....
</style>

You can use the type attribute to specify the style sheet language. In HTML 4 this is a required attribute. From HTML5 it is optional. Like this:

<style type="text/css">
    Styles here....
</style>

You can use the media attribute to specify which media the styles should apply to.

Like this:

<style media="screen">
    Styles here....
</style>

Attributes

Attribute Value Description
type text/css Specifies the style sheet language as a content-type (MIME type).
media screen tty tv projection handheld print braille aural all Specifies the device the document will be displayed on.

Standard Attributes

Attribute Description
dir Specifies the direction of the text.
id Document wide identifier.
lang Sets the language code.
xml:space Sets the language code.

Example

Use of the <style> element in an HTML document:

<!DOCTYPE html>
<html>
<head>
<style> 
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1></br>
<p>A paragraph</p>
</body>
</html>
Try it with the Editor

Within the <body> Element

Despite only being valid in the document's head, the placement of the <style> element within the document's body has been a widespread practice, despite it's non-conformance to the HTML specification.