The
<style>tag is used to embed CSS styles directly into an HTML document.
It allows you to define the look and formatting of elements on the page without using an external stylesheet.
The<style>tag must be placed inside the<head>section (though it can also appear in the<body>in some cases, but that’s not recommended).
Syntax
<style>
selector {
property: value;
}
</style>Attributes
| Attribute | Description |
|---|---|
type | Specifies the MIME type of the style sheet. Default is text/css. |
media | Specifies the media type (e.g., screen, print) the styles apply to. |
scoped | (Obsolete) Limits the styles to the parent element and its children. |
Example
<!DOCTYPE html>
<html>
<head>
<title>Style Tag Example</title>
<style>
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This paragraph is styled using the <style> tag.</p>
</body>
</html>Output
Browser Output
There is no direct output of the <style> tag itself, but it applies CSS styling to elements on the page. Please use our TryIt Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <style> tag itself is invisible but styles the page elements, changing colors, fonts, alignment, and other visual properties.
Notes
- The
<style>tag is used for internal CSS; external stylesheets are linked using<link>. - It should be placed inside the
<head>for proper HTML structure. - The
scopedattribute is obsolete and no longer recommended. - Using
<style>helps quickly test styles without creating separate CSS files, but for larger projects, external CSS is preferred for maintainability.
Conclusion
The <style> tag allows you to define CSS rules within your HTML document, directly affecting the appearance of elements.
Although it does not produce visible content by itself, it is crucial for custom styling and page design.
