files/en-us/web/html/reference/elements/style/index.md
The <style> HTML 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 <style> element.
{{InteractiveExample("HTML Demo: <style>", "tabbed-standard")}}
<style>
p {
color: #26b72b;
}
code {
font-weight: bold;
}
</style>
<p>
This text will be green. Inline styles take precedence over CSS included
externally.
</p>
<p style="color: blue">
The <code>style</code> attribute can override it, though.
</p>
p {
color: red;
}
The <style> element must be included inside the {{htmlelement("head")}} of the document. In general, it is better to put your styles in external stylesheets and apply them using {{htmlelement("link")}} elements.
If you include multiple <style> and <link> 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.
In the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
This element includes the global attributes.
blocking
: This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources and the application of the stylesheet to the document. {{cssxref("@import")}}-ed stylesheets are generally considered as critical subresources, whereas {{cssxref("background-image")}} and fonts are not. The operations that are to be blocked must be a space-separated list of blocking tokens listed below. Currently there is only one token:
render: The rendering of content on the screen is blocked.[!NOTE] Only
styleelements in the document's<head>can possibly block rendering. By default, astyleelement in the<head>blocks rendering when the browser discovers it during parsing. If such astyleelement is added dynamically via script, you must additionally setblocking = "render"for it to block rendering.
media
all if the attribute is missing.nonce
title
type {{deprecated_inline}}
text/css.In the following example, we apply a short stylesheet to a document:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
{{EmbedLiveSample('A_basic_stylesheet', '100%', '100')}}
In this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
{{EmbedLiveSample('Multiple_style_elements', '100%', '100')}}
In this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="(width < 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
{{EmbedLiveSample('Including_a_media_query', '100%', '100')}}
{{Specifications}}
{{Compat}}