Definition and Usage

The <style> tag is used to define style information (CSS) for a document.

Inside the <style> element you specify how HTML elements should render in a browser.

The <style> element must be included inside the <head> section of the document.

Tips and Notes

Note: When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!

Tip: To link to an external style sheet, use the <link> tag.

Tip: To learn more about style sheets, please read our CSS Tutorial.

Browser Support

Attributes

Attribute	Value	Description
media	media_query	Specifies what media/device the media resource is optimized for
type	text/css	Specifies the media type of the <style> tag

Global Attributes

The <style> tag also supports the Global Attributes in HTML.

Event Attributes

The <style> tag also supports the Event Attributes in HTML.

How to create HTML <style> Tag

Use of the <style> element to apply a simple style sheet to an HTML document.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Output should be:

How to add Multiple styles for the same elements in HTML <style> Tag

Multiple styles for the same elements.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

<p>Notice that if some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used!</p>

</body>
</html>

Output should be:

How to set Default CSS Settings in HTML <style> Tag

Most browsers will display the <style> element with the following default values.

index.html

Example: HTML

<style>
style {
  display: none;
}
</style>

How to add HTML <style> media Attribute in HTML <style> Tag

Definition and Usage

The media attribute specifies what media/device the CSS style is optimized for.

This attribute is used to specify that the style is for special devices (like iPhone), speech or print media.

Tip: This attribute can accept several values.

Browser Support

Syntax

Possible Operators

Value	Description
and	Specifies an AND operator
not	Specifies a NOT operator
,	Specifies an OR operator

Devices

Value	Description
all	Default. Suitable for all devices
aural	Speech synthesizers
braille	Braille feedback devices
handheld	Handheld devices (small screen, limited bandwidth)
projection	Projectors
print	Print preview mode/printed pages
screen	Computer screens
tty	Teletypes and similar media using a fixed-pitch character grid
tv	Television type devices (low resolution, limited scroll ability)

Values

Value	Description
width	Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)"
height	Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)"
device-width	Specifies the width of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)"
device-height	Specifies the height of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)"
orientation	Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)"
aspect-ratio	Specifies the width/height ratio of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Specifies the device-width/device-height ratio of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)"
color	Specifies the bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)"
color-index	Specifies the number of colors the target display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)"
monochrome	Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)"
resolution	Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)"
scan	Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"
grid	Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)"

index.html

Example: HTML

 <style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

How to add and Value in HTML <style> media Attribute

and	Specifies an AND operator

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (min-width:500px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add not Value in HTML <style> media Attribute

not	Specifies a NOT operator

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen not (color:3)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add , Value in HTML <style> media Attribute

,	Specifies an OR operator

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen , (color:3)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add all Value in HTML <style> media Attribute

all	Default. Suitable for all devices

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="all and (orientation: landscape)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add aural Value in HTML <style> media Attribute

aural

Speech synthesizers

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="aural and (orientation: landscape)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add braille Value in HTML <style> media Attribute

braille

Braille feedback devices

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="braille and (orientation: landscape)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add handheld Value in HTML <style> media Attribute

handheld

Handheld devices (small screen, limited bandwidth)

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="handheld and (orientation: landscape)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add projection Value in HTML <style> media Attribute

projection

Projectors

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="projection and (orientation: landscape)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add print Value in HTML <style> media Attribute

Print preview mode/printed pages

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="print and (resolution:300dpi)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add screen Value in HTML <style> media Attribute

screen

Computer screens

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (min-width:500px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add tty Value in HTML <style> media Attribute

tty	Teletypes and similar media using a fixed-pitch character grid

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="tty and (min-width:500px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add tv Value in HTML <style> media Attribute

tv	Television type devices (low resolution, limited scroll ability)

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="tv and (scan:interlace)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add width Value in HTML <style> media Attribute

width

Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (min-width:500px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add height Value in HTML <style> media Attribute

height

Specifies the height of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (max-height:700px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add device-width Value in HTML <style> media Attribute

device-width

Specifies the width of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (device-width:500px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add device-height Value in HTML <style> media Attribute

device-height

Specifies the height of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (device-height:500px)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add orientation Value in HTML <style> media Attribute

orientation

Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="all and (orientation: landscape)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add aspect-ratio Value in HTML <style> media Attribute

aspect-ratio

Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (aspect-ratio:16/9)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add device-aspect-ratio Value in HTML <style> media Attribute

device-aspect-ratio

Specifies the device-width/device-height ratio of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (aspect-ratio:16/9)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add color Value in HTML <style> media Attribute

color

Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (color:3)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (color:3)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add color-index Value in HTML <style> media Attribute

color-index

Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (min-color-index:256)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add monochrome Value in HTML <style> media Attribute

monochrome

Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (monochrome:2)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="screen and (monochrome:2)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add resolution Value in HTML <style> media Attribute

resolution

Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (resolution:300dpi)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="tv and (scan:interlace)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add scan Value in HTML <style> media Attribute

scan	Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="tv and (scan:interlace)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add grid Value in HTML <style> media Attribute

grid	Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

<style media="handheld and (grid:1)">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>

<h1>Horje Example</h1>
<p><a href="/learn/816/what-is-html-style-tag" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to add HTML <style> type Attribute

Definition and Usage

The type attribute specifies the Internet media type (formerly known as MIME type) of the <style> tag.

The type attribute identifies the content between the <style> and </style> tags.

The default value is "text/css", which indicates that the content is CSS.

Browser Support

Syntax

Use the type attribute to specify the media type of the <style> tag :

Attribute Values

Value	Description
media_type	The Internet media type of the style sheet. For now, the only supported value is "text/css". Look at IANA Media Types for a complete list of standard media types

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Output should be:

html style

What is HTML <!--...--> Tag	HTML Tag
What is HTML <!DOCTYPE> Declaration	HTML Tag
What is HTML Elements and Doctypes	HTML Tag
What is HTML <a> Tag	HTML Tag
What is HTML <abbr> Tag	HTML Tag
What is HTML <acronym> Tag	HTML Tag
What is HTML <address> Tag	HTML Tag
What is HTML <applet> Tag	HTML Tag
What is HTML <area> Tag	HTML Tag
What is HTML <article> Tag	HTML Tag
What is HTML <aside> Tag	HTML Tag
What is HTML <audio> Tag	HTML Tag
What is HTML <b> Tag	HTML Tag
What is HTML <base> Tag	HTML Tag
What is HTML <basefont> Tag	HTML Tag
What is HTML <bdi> Tag	HTML Tag
What is HTML <bdo> Tag	HTML Tag
What is HTML <big> Tag	HTML Tag
What is HTML <blockquote> Tag	HTML Tag
What is HTML <body> Tag	HTML Tag
What is HTML <br> Tag	HTML Tag
What is HTML <button> Tag	HTML Tag
What is HTML <canvas> Tag	HTML Tag
What is HTML <caption> Tag	HTML Tag
What is HTML <center> Tag	HTML Tag
What is HTML <cite> Tag	HTML Tag
What is HTML <code> Tag	HTML Tag
What is HTML <col> Tag	HTML Tag
How to create HTML <colgroup> Tag	HTML Tag
What is HTML <data> Tag	HTML Tag
What is HTML <datalist> Tag	HTML Tag
What is HTML <dd> Tag	HTML Tag
What is HTML <del> Tag	HTML Tag
What is HTML <details> Tag	HTML Tag
What is HTML <dfn> Tag	HTML Tag
What is HTML <dialog> Tag	HTML Tag
What is HTML <dir> Tag	HTML Tag
What is HTML <div> Tag	HTML Tag
What is HTML <dl> Tag	HTML Tag
What is HTML <dt> Tag	HTML Tag
What is HTML <em> Tag	HTML Tag
What is HTML <embed> Tag	HTML Tag
What is HTML <fieldset> Tag	HTML Tag
What is HTML <figcaption> Tag	HTML Tag
What is HTML <figure> Tag	HTML Tag
What is HTML <font> Tag	HTML Tag
What is HTML <footer> Tag	HTML Tag
What is HTML <form> Tag	HTML Tag
What is HTML <frame> Tag	HTML Tag
What is HTML <frameset> Tag	HTML Tag
What is HTML <h1> to <h6> Tags	HTML Tag
What is HTML <head> Tag	HTML Tag
What is HTML <header> Tag	HTML Tag
What is HTML <hgroup> Tag	HTML Tag
What is HTML <hr> Tag	HTML Tag
What is HTML <html> Tag	HTML Tag
What is HTML <i> Tag	HTML Tag
What is HTML <iframe> Tag	HTML Tag
What is HTML <img> Tag	HTML Tag
What is HTML <input> Tag	HTML Tag
What is HTML <ins> Tag	HTML Tag
What is HTML <kbd> Tag	HTML Tag
What is HTML <label> Tag	HTML Tag
What is HTML <legend> Tag	HTML Tag
What is HTML <li> Tag	HTML Tag
What is HTML <link> Tag	HTML Tag
What is HTML <main> Tag	HTML Tag
What is HTML <map> Tag	HTML Tag
What is HTML <mark> Tag	HTML Tag
What is HTML <menu> Tag	HTML Tag
What is HTML <meta> Tag	HTML Tag
What is HTML <meter> Tag	HTML Tag
What is HTML <nav> Tag	HTML Tag
What is HTML <noframes> Tag	HTML Tag
What is HTML <noscript> Tag	HTML Tag
What is HTML <object> Tag	HTML Tag
What is HTML <ol> Tag	HTML Tag
What is HTML <optgroup> Tag	HTML Tag
What is HTML <option> Tag	HTML Tag
What is HTML <output> Tag	HTML Tag
What is HTML <p> Tag	HTML Tag
What is HTML <param> Tag	HTML Tag
What is HTML <picture> Tag	HTML Tag
What is HTML <pre> Tag	HTML Tag
What is HTML <progress> Tag	HTML Tag
What is HTML <q> Tag	HTML Tag
What is HTML <rp> Tag	HTML Tag
What is HTML <rt> Tag	HTML Tag
What is HTML <ruby> Tag	HTML Tag
What is HTML <s> Tag	HTML Tag
What is HTML <samp> Tag	HTML Tag
What is HTML <script> Tag	HTML Tag
What is HTML <search> Tag	HTML Tag
What is HTML <section> Tag	HTML Tag
What is HTML <select> Tag	HTML Tag
What is HTML <small> Tag	HTML Tag
What is HTML <source> Tag	HTML Tag
What is HTML <span> Tag	HTML Tag
What is HTML <strike> Tag	HTML Tag
What is HTML <strong> Tag	HTML Tag
What is HTML <style> Tag	HTML Tag
What is HTML <sub> Tag	HTML Tag
What is HTML <summary> Tag	HTML Tag
What is HTML <sup> Tag	HTML Tag
What is HTML <svg> Tag	HTML Tag
What is HTML <table> Tag	HTML Tag
What is HTML <tbody> Tag	HTML Tag
What is HTML <td> Tag	HTML Tag
What is HTML <template> Tag	HTML Tag
What is HTML <textarea> Tag	HTML Tag
What is HTML <tfoot> Tag	HTML Tag
What is HTML <th> Tag	HTML Tag
What is HTML <thead> Tag	HTML Tag
What is HTML <time> Tag	HTML Tag
What is HTML <title> Tag	HTML Tag
What is HTML <tr> Tag	HTML Tag
What is HTML <track> Tag	HTML Tag
What is HTML <tt> Tag	HTML Tag
What is HTML <u> Tag	HTML Tag
What is HTML <ul> Tag	HTML Tag
What is HTML <var> Tag	HTML Tag
What is HTML <video> Tag	HTML Tag
How to add HTML <wbr> Tag	HTML Tag

Single Articles

How to create HTML <style> Tag	HTML Tag
How to add Multiple styles for the same elements in HTML <style> Tag	HTML Tag
How to set Default CSS Settings in HTML <style> Tag	HTML Tag
How to add HTML <style> media Attribute in HTML <style> Tag	HTML Tag
How to add and Value in HTML <style> media Attribute	HTML Tag
How to add not Value in HTML <style> media Attribute	HTML Tag
How to add , Value in HTML <style> media Attribute	HTML Tag
How to add all Value in HTML <style> media Attribute	HTML Tag
How to add aural Value in HTML <style> media Attribute	HTML Tag
How to add braille Value in HTML <style> media Attribute	HTML Tag
How to add handheld Value in HTML <style> media Attribute	HTML Tag
How to add projection Value in HTML <style> media Attribute	HTML Tag
How to add print Value in HTML <style> media Attribute	HTML Tag
How to add screen Value in HTML <style> media Attribute	HTML Tag
How to add tty Value in HTML <style> media Attribute	HTML Tag
How to add tv Value in HTML <style> media Attribute	HTML Tag
How to add width Value in HTML <style> media Attribute	HTML Tag
How to add height Value in HTML <style> media Attribute	HTML Tag
How to add device-width Value in HTML <style> media Attribute	HTML Tag
How to add device-height Value in HTML <style> media Attribute	HTML Tag
How to add orientation Value in HTML <style> media Attribute	HTML Tag
How to add aspect-ratio Value in HTML <style> media Attribute	HTML Tag
How to add device-aspect-ratio Value in HTML <style> media Attribute	HTML Tag
How to add color Value in HTML <style> media Attribute	HTML Tag
How to add color-index Value in HTML <style> media Attribute	HTML Tag
How to add monochrome Value in HTML <style> media Attribute	HTML Tag
How to add resolution Value in HTML <style> media Attribute	HTML Tag
How to add scan Value in HTML <style> media Attribute	HTML Tag
How to add grid Value in HTML <style> media Attribute	HTML Tag
How to add HTML <style> type Attribute	HTML Tag

Read Full:	HTML Tag
Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded:	3 months ago
Uploaded by:	Admin
Views:	145

Reffered: https://www.w3schools.com/tags/tag_style.asp