HTML - <style> Tag

The <style> tag in HTML is used to define internal CSS (Cascading Style Sheets) that apply styling rules to HTML elements. It is placed inside the <head> section of an HTML document and affects the appearance of elements on the page.

 Basic Syntax:

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

 Purpose of <style> Tag:

  • Embeds CSS directly into an HTML document.

  • Styles can be applied globally (to all matching elements) or locally using classes and IDs.

 Element-Specific Attributes of <style>:

Attribute Description
type Specifies the MIME type of the style sheet. Commonly set to text/css. (Optional in HTML5)
media Specifies what media/device the styles are designed for (e.g., screen, print).
scoped (Deprecated) Limits the scope of the styles to the parent element. Not widely supported.

Attribute Details:

1. type (optional in HTML5)

<style type="text/css">
  body {
    background-color: lightgray;
  }
</style>

  • text/css is the default and only valid value in most cases.

  • HTML5 allows omitting it entirely.

2. media

<style media="screen">
  body {
    font-size: 16px;
  }
</style>

<style media="print">
  body {
    font-size: 12px;
  }
</style>

  • Useful for applying different styles based on device type (e.g., print vs screen).

<section>
  <style scoped>
    p { color: red; }
  </style>
  <p>This text would be red if `scoped` were supported.</p>
</section>

  • Intended to restrict styles to the parent element.

  • Deprecated and not supported in most browsers.

  • Use the <style> tag for quick prototypes or when external stylesheets are not practical.

  • For large projects, prefer external CSS files using the <link> tag.