HTML <style> Tag
Example
Use of the <style> element to apply a simple style sheet to an HTML document:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Try it Yourself »
More "Try it Yourself" examples below.
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
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
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.
More Examples
Example
Multiple styles for the same elements:
<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>
</body>
</html>
Try it Yourself »
Related Pages
HTML tutorial: HTML CSS
CSS tutorial: CSS Tutorial
HTML DOM reference: Style Object
Default CSS Settings
Most browsers will display the <style> element with the following default values:
style {
display: none;
}
