HTML Tags
HTML <style> Tag
The <style> tag lets you embed CSS rules directly inside an HTML document, usually within the <head>.
What is the <style> tag?
The <style> element contains style information (CSS) for a document or part of a document. It is typically placed inside the <head>, and its rules apply to the whole page. This is known as internal or embedded CSS, as opposed to external stylesheets loaded with <link>.
Syntax
<style>
selector { property: value; }
</style>Complete example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #2563eb; }
.badge { background: #f59e0b; padding: 4px 8px; border-radius: 4px; }
</style>
</head>
<body>
<h1>Styled Heading</h1>
<span class="badge">Featured</span>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| type | The MIME type of the style language. Defaults to text/css and can be omitted in HTML5. |
| media | A media query that restricts when the styles apply, e.g. media="screen and (max-width: 600px)". |
| nonce | A cryptographic nonce used to allow the styles under a Content Security Policy. |
| title | Defines an alternative style sheet set. |
⚠️
The old scoped attribute was removed from the spec and is not supported. Use external stylesheets or component-scoped CSS instead for large projects.
The <style> tag is supported in all browsers. For maintainable sites, prefer external CSS files linked with <link> so styles can be cached and reused across pages.