HTML Tags
HTML <style> Tag
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
html
<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
html
<!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>Browser Support
Chrome | Edge | Firefox | 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.