<style>

Definition and Usage

The <style> tag is used to define internal CSS (Cascading Style Sheets) for an HTML document.

Place the <style> element in the document head. Browsers may render misplaced body styles, but that does not make the markup conforming.

Each HTML document can contain multiple <style> tags.

Attributes

The <style> tag also supports the Global Attributes in HTML.

Examples

Style in Head Section

The most common placement for <style> is in the <head> section:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #745af2;
      text-align: center;
    }

    p {
      color: var(--text-primary);
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses internal CSS styles.</p>
</body>
</html>

Multiple Style Blocks

You can use multiple <style> tags in the same document:

<head>
  <!-- Global styles -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>

  <!-- Typography styles -->
  <style>
    h1, h2, h3 {
      font-family: 'Georgia', serif;
    }
  </style>

  <!-- Component styles -->
  <style>
    .button {
      background-color: #745af2;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
    }
  </style>
</head>

Media Queries with Style Tag

Use the media attribute to apply styles for specific devices or screen sizes:

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

<!-- Styles for print -->
<style media="print">
  body {
    font-size: 12pt;
    color: var(--text-primary);
  }

  .no-print {
    display: none;
  }
</style>

<!-- Responsive styles -->
<style>
  @media (max-width: 768px) {
    .container {
      width: 100%;
      padding: 10px;
    }
  }

  @media (min-width: 769px) {
    .container {
      width: 960px;
      margin: 0 auto;
    }
  }
</style>

Style in Body Section

You can also place <style> in the <body> for component-specific styles:

<body>
  <section class="hero">
    <style>
      .hero {
        background: linear-gradient(135deg, #745af2 0%, #667eea 100%);
        color: white;
        padding: 60px 20px;
        text-align: center;
      }

      .hero h1 {
        font-size: 48px;
        margin: 0;
      }
    </style>

    <h1>Hero Section</h1>
    <p>Welcome to our website</p>
  </section>
</body>

CSS Variables and Advanced Styling

Define and use CSS custom properties (variables):

<style>
  :root {
    --primary-color: #745af2;
    --secondary-color: #667eea;
    --text-color: var(--text-primary);
    --spacing: 16px;
  }

  .card {
    background: var(--bg-primary);
    border: 2px solid var(--primary-color);
    padding: var(--spacing);
    margin: var(--spacing);
    border-radius: 8px;
  }

  .card h2 {
    color: var(--primary-color);
  }

  .card p {
    color: var(--text-color);
    line-height: 1.6;
  }

  .button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
</style>

Scoped Styles (Legacy - Not Recommended)

The scoped attribute is obsolete and not supported in modern browsers:

<!-- This is obsolete and will not work in modern browsers -->
<article>
  <style scoped>
    p {
      color: red;
    }
  </style>
  <p>This text would have been red (but scoped is obsolete).</p>
</article>

<!-- Instead, use classes or IDs for scoping -->
<article class="article-1">
  <style>
    .article-1 p {
      color: red;
    }
  </style>
  <p>This text is red using class-based scoping.</p>
</article>

Internal vs External vs Inline CSS

CSS Specificity and Cascade

When multiple style sources exist, CSS follows these priority rules (from highest to lowest):

1. Inline styles - Styles applied directly in the HTML element using the style attribute
2. IDs - Styles applied using ID selectors (#myId)
3. Classes, attributes, and pseudo-classes - .myClass, [type="text"], :hover
4. Elements and pseudo-elements - h1, p, ::before

When specificity is equal, the last rule defined wins (cascade order).

<style>
  /* Specificity: 1 (element) */
  p {
    color: blue;
  }

  /* Specificity: 10 (class) - This wins over element */
  .text {
    color: green;
  }

  /* Specificity: 100 (ID) - This wins over class */
  #main-text {
    color: red;
  }

  /* Inline style (Specificity: 1000) - This wins over all */
</style>

<p>Blue text</p>
<p class="text">Green text</p>
<p id="main-text" class="text">Red text</p>
<p style="color: purple;">Purple text</p>

Best Practices

• Prefer external stylesheets for multi-page websites for better caching and maintainability
• Use <style> for page-specific styles that won't be reused elsewhere
• Place <style> in the <head> to prevent Flash of Unstyled Content (FOUC)
• Avoid inline styles when possible - they're harder to maintain and override
• Use the media attribute to optimize styles for specific devices
• Consider critical CSS: inline critical above-the-fold styles, load the rest asynchronously
• Organize styles logically: reset/normalize, global, layout, components, utilities
• Use CSS comments to document complex styles
• Combine multiple styles into one <style> block when possible
• Don't use the deprecated type="text/css" attribute in HTML5

Performance Considerations

• Internal styles don't require additional HTTP requests (faster first load)
• External stylesheets can be cached by browsers (faster subsequent loads)
• Large internal styles increase HTML file size and parsing time
• For critical rendering path optimization, inline critical CSS and defer non-critical styles
• Use media queries to load device-specific styles
• Minimize and compress CSS in production

Try it Yourself

Related Tags

• <link>

  Links external CSS files

• <meta>

  Defines metadata

• <script>

  Defines client-side JavaScript

• <head>

  Contains document metadata