1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
<header><h1><style>: The Style Information element</h1></header><div class="section-content"><p>The <code><style></code> <a href="../index">HTML</a> element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <code><style></code> element.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/style.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The <code><style></code> element must be included inside the <a href="head"><code><head></code></a> of the document. In general, it is better to put your styles in external stylesheets and apply them using <a href="link"><code><link></code></a> elements.</p> <p>If you include multiple <code><style></code> and <code><link></code> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.</p> <p>In the same manner as <code><link></code> elements, <code><style></code> elements can include <code>media</code> attributes that contain <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media queries</a>, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.</p>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="blocking">
<a href="#blocking"><code>blocking</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr>
</dt> <dd> <p>This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import"><code>@import</code></a>-ed stylesheets are generally considered as critical subresources, whereas <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image"><code>background-image</code></a> and fonts are not.</p> <ul> <li>
<code>render</code>: The rendering of content on the screen is blocked.</li> </ul> </dd> <dt id="media"><a href="#media"><code>media</code></a></dt> <dd> <p>This attribute defines which media the style should be applied to. Its value is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">media query</a>, which defaults to <code>all</code> if the attribute is missing.</p> </dd> <dt id="nonce"><a href="#nonce"><code>nonce</code></a></dt> <dd> <p>A cryptographic nonce (number used once) used to allow inline styles in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</p> </dd> <dt id="title"><a href="#title"><code>title</code></a></dt> <dd> <p>This attribute specifies <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheet</a> sets.</p> </dd> </dl>
</div>
<h3 id="deprecated_attributes">Deprecated attributes</h3>
<div class="section-content"><dl> <dt id="type">
<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p>This attribute should not be provided: if it is, the only permitted values are the empty string or a case-insensitive match for <code>text/css</code>.</p> </dd> </dl></div>
<h2 id="examples">Examples</h2>
<h3 id="a_simple_stylesheet">A simple stylesheet</h3>
<div class="section-content">
<p>In the following example, we apply a very simple stylesheet to a document:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="Xp1eBLnbRbAAjqyTCFNTrBNTWck3M+5AxtWVn52AbH8=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect1">
<iframe class="sample-code-frame" title="A simple stylesheet sample" id="frame_a_simple_stylesheet" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/style/runner.html?id=a_simple_stylesheet" loading="lazy"></iframe>
</div>
</div>
<h3 id="multiple_style_elements">Multiple style elements</h3>
<div class="section-content">
<p>In this example we've included two <code><style></code> elements — notice how the conflicting declarations in the later <code><style></code> element override those in the earlier one, if they have equal <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">specificity</a>.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="HUSNAFh8BZIdBF/hp4GoX4t+HEJOnqLW1Khlt/2VJ14=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Multiple style elements sample" id="frame_multiple_style_elements" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/style/runner.html?id=multiple_style_elements" loading="lazy"></iframe>
</div>
</div>
<h3 id="including_a_media_query">Including a media query</h3>
<div class="section-content">
<p>In this example we build on the previous one, including a <code>media</code> attribute on the second <code><style></code> element so it is only applied when the viewport is less than 500px in width.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="2vvFiULEGiSNCyiwFEbxjnlPzEVZXl/xwEfDs7YycdQ=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all and (max-width: 500px)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_3">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Including a media query sample" id="frame_including_a_media_query" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/style/runner.html?id=including_a_media_query" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>, and if the <code>scoped</code> attribute is present: <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th>Permitted content</th> <td> Text content matching the <code>type</code> attribute, that is <code>text/css</code>. </td> </tr> <tr> <th>Tag omission</th> <td>Neither tag is omissible.</td> </tr> <tr> <th>Permitted parents</th> <td> Any element that accepts <a href="../content_categories#metadata_content">metadata content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th>DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement"><code>HTMLStyleElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-style-element">HTML Standard <br><small># the-style-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>style</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">3.5</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10.1</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>blocking</code></th>
<td class="bc-supports-yes">105</td>
<td class="bc-supports-yes">105</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">91</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">105</td>
<td class="bc-supports-yes">105</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">72</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">20.0</td>
</tr>
<tr>
<th><code>media</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">3.5</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10.1</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>title</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">3.5</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10.1</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>type</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>1</summary>Before 75, Firefox accepted any CSS media (MIME) type, with optional parameters. Starting in 75, this has been restricted to the string 'text/css', per the spec.</details></td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">3.5</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">10.1</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>The <a href="link"><code><link></code></a> element, which allows us to apply external stylesheets to a document.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">Alternative Style Sheets</a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style</a>
</p>
</div>
|
