HTML Tags
HTML <style> Tag
The <style> tag is used to embed CSS rules directly inside an HTML document. It is usually placed in the <head> so styles are ready before the page renders.
The <style> Tag
The <style> element contains style information (CSS) for a document. The rules inside it apply to matching elements in the page. This is called internal or embedded CSS, as opposed to an external stylesheet linked with <link> or inline style attributes.
A page can contain multiple <style> elements. They are typically placed inside <head>, though HTML also allows them in the body.
Syntax
Example
<style>
selector { property: value; }
</style>Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #f0f4ff; font-family: sans-serif; }
h1 { color: #d6336c; }
p { color: #333; line-height: 1.6; }
</style>
</head>
<body>
<h1>Styled Heading</h1>
<p>This paragraph is styled by the embedded CSS above.</p>
</body>
</html>More Examples
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background: #1a73e8;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">A styled box using a CSS class.</div>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| type | The MIME type of the styles; defaults to text/css and is optional in HTML5. |
| media | A media query that limits when the styles apply, for example media="screen and (max-width: 600px)". |
| nonce | A cryptographic nonce used to allow the style block under a Content Security Policy. |
💡
For large sites, prefer an external stylesheet linked with <link> so styles can be cached and reused across pages. Use <style> for small, page-specific rules.
Key Takeaways
- <style> embeds CSS directly in the HTML.
- It usually lives inside <head>.
- type defaults to text/css and can be omitted.
- The media attribute scopes styles to specific devices.
- External stylesheets are better for multi-page sites.