Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <style> Tag

Written by Updated

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

AttributeDescription
typeSpecifies the MIME type of the style sheet. Default is text/css.
mediaSpecifies 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+
YesYesYesYesYesYes

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 scoped attribute 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.

PreviousHTML <meta> TagNextHTML <script> Tag