<style>

Defines style information (CSS) for an HTML document

Definition and Usage

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

The <style> element is typically placed in the <head> section of an HTML document, but it can also appear in the <body> section for page-specific styles.

Each HTML document can contain multiple <style> tags.

Tip: When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector in different style sheets, the value from the last read style sheet will be used (see example below)!

Best Practice: For better performance and maintainability, external stylesheets (using <link>) are recommended over internal styles. Use <style> for page-specific styles that won't be reused.

Browser Support

The <style> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

Attribute	Value	Description
type	text/css	Specifies the media type of the style tag. Deprecated in HTML5 - not needed as CSS is the default and only style sheet language
media	media_query	Specifies what media/device the CSS is optimized for (e.g., screen, print, all)
scoped	scoped	Obsolete - Specified that the styles only apply to this element's parent and its children. Not supported in modern browsers

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:

Example
<!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:

Example
<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:

Example
<!-- 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:

Example
<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):

Example
<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:

Example (Obsolete - Do Not Use)
<!-- 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

Type	Syntax	Advantages	Disadvantages
Internal CSS (<style>)	`<style> h1 { color: red; } </style>`	- No extra HTTP requests - Good for single-page apps - Page-specific styles	- Not reusable across pages - Increases HTML file size - Harder to maintain
External CSS (<link>)	`<link rel="stylesheet" href="styles.css">`	- Reusable across pages - Browser caching - Separation of concerns - Best for large sites	- Extra HTTP request - Render blocking
Inline CSS (style attribute)	`<p style="color: red;">`	- Highest specificity - Quick testing - Dynamic styling	- Not reusable - Harder to maintain - Mixes content & style - Poor practice

CSS Specificity and Cascade

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

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

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

Specificity Example
<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

Interactive Example

Here's a live example showing internal CSS in action:

Styled with Internal CSS

This box is styled using the <style> tag with a gradient background and custom styling.

🚀 Try in Code Playground

Related Tags

<link>
Links external CSS files
<meta>
Defines metadata
<script>
Defines client-side JavaScript
<head>
Contains document metadata