Scripting & Styles
HTML <style> Tag
The <style> tag is used to define style information (CSS) for a document.
Definition and Usage
The <style> tag is used to define style information (CSS) for a document.
Standard Syntax:
<style>...</style>Interactive ExampleRunnable
HTML <style> Example
htmlLive code demonstration for the <style> tag. Click "Try it Yourself" to edit and experiment in real time.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>Attributes for <style>
2 Supported Attributes| Attribute | Values | Default | Description |
|---|---|---|---|
| media | media_query | none | Specifies what media/device the media resource is optimized for |
| type | text/css | none | Specifies the media type of the <style> tag |
Global Attributes
The <style> tag also supports the standard global attributes in HTML, including class, id, style, title, hidden, and data-*.
Event Attributes
The <style> tag supports event attributes in HTML, such as onclick, onmouseover, onfocus, and more.
Browser Compatibility
ChromeEdgeFirefoxSafariOpera
More Tags in Scripting & Styles
View All 123Tags →<details>The <details> tag specifies additional details that the user can open and close on demand.<dialog>The <dialog> tag defines a dialog box or subwindow.<noscript>The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.<script>The <script> tag is used to embed a client-side script (JavaScript).<search>The <search> tag is used to specify that here comes a set of elements that is related to search.<summary>The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.