HTML style tag
Example
Use of the <style> element to apply a simple style sheet to an HTML document:
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
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 (how it is displayed) in a browser.
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:
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading. It will be green.</h1>
<p>This is a paragraph. It will be pink.</p>
</body>
</html>
Default CSS Settings
Most browsers will display the <style> element with the following default values:
display: none;
}
Comments
Post a Comment