The <style> tag defines CSS styles for a page.
These styles can be applied to elements on the same page.
The <style> element should be located in the <head> section.
A <style> element with a CSS class that is
applied to a <div> element.
<style>
.success {background:#e5fff2;padding:20px; font-style:italic;}
</style>
<div class="success">
Purchase completed!
</div>
The <style> tag should be located in the <head> section.
However, browsers do allow <style> elements anywhere in the page <body>.
A page can have multiple <style> elements.
A <style> element that defines styling for a discount coupon.
<style>
.coupon {
background: floralwhite;
border: 4px dashed #345;
padding:25px;
font-size:30px;
font-weight:bold;
text-align:center;
width:300px;
}
</style>
<div class="coupon">
COUPON<br />
25% OFF!
</div>
This table lists the <style> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| media | media-query | Media or device the styling information is optimized for |
| type | text/css | Media type |
| id | identifier | Defines a unique identifier for the style element. |
For additional global attributes see our global attributes list.
Do not use the attribute listed below. It is not valid on the style tag in HTML5.
| Attribute | Description | Alternative |
|---|---|---|
scoped |
Specifies that the styles only apply to the elements of its parent(s) and children. |
n/a |
Indeed, they both help with styling web pages and their elements.
A <style> element defines styles for the entire page.
And a style attribute only styles the element it is placed on.
The style attribute has some limitations:
it does not support pseudo elements or pseudo classes
like :before or :hover,
and it offers no support for media queries.
The <style> tag is part of a group of tags that
define the structure and style of a web page.
This group is referred to as the Page tag group.
Together, they allow you to create solid, well-structured web pages.
Here is the complete list.
| Element | Description |
|---|---|
| <!DOCTYPE> | Must appear on the first line of a page. Specifies the HTML version |
| <html> | Defines the root container for an HTML document |
| <head> | Creates a head container that holds page-level metadata elements |
| <meta> | Provides metadata about a web page |
| <link> | Defines a link to an external source, such as a style sheet |
| <base> | Sets the base URL for all relative URLs on a page |
| <script> | Adds JavaScript to a page. Either client- or server-side |
| <style> | Adds CSS style elements to a page |
| <title> | Specifies the page title that displays in the browser's tab |
| <body> | Specifies a container for the content of the page, with text, links, images, etc. |
Here is when <style> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
