Definition
The <style> tag contains CSS, a language used to style the web page or parts of it.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Element goes here.</title>
<style>
h1 {
color: orange;
font-family: arial;
}
p {
color: purple;
font-family: georgia;
}
</style>
</head>
<body>
<h1>Displayed Page Title</h1>
<p>The main content of your page goes here.</p>
</body>
</html>Usage
- Both the opening and closing tags are required.
- The
<style>element should be placed in the<head>of the document. - The
<style>tags should contain CSS declarations. These declarations will be processed in order and apply styling to the page or parts of it. - You can use multiple
<style>and<link>declarations together.
Attributes
The <style> element supports the Global Attributes, as well as the following:
typeThe
typeelement specifies the media type of the linked document.mediaThe
mediaattribute specifies the media or device the target document is optimized for. The following example will only apply to browsers with a screen of 600px wide, or less:<style> @media only screen and (max-width: 600px) { h1 {color:orange; font-family:arial;} p {color:purple; font-family:georgia;} } </style>nonceA
nonceattribute is a security feature where a server will transmit a cryptographic nonce (number used once) so that only<style>elements that match theContent-Security-Policywill be permitted. For example:Content-Security-Policy: style-src 'nonce-1736c3526c'<style nonce="nonce-1736c3526c"> h1 {color:orange; font-family:arial;} p {color:purple; font-family:georgia;} </style>titleThe
titleattribute has a particular context when used in<style>elements. Firefox allows you to name alternate stylesheets that can be selected in Firefox via the View -> Page Style submenu. You can view an example of this in action here.
Best Practices
- You may wish to consider putting your CSS styles in an external stylesheet and applying them to the document using the
<link>element. The best practice is to inline critical CSS required to render the initial loading of the page (above the fold content), and put the rest of the styles in an external stylesheet.
Specification
Browser Support
Desktop
| Chrome | Edge | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
| Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |