HTML <style> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 3 Examples
Document & Metadata
HTML style tag tutorial — embedding CSS inside the document head
Overview

What You’ll Learn

The <style> tag lets you write CSS directly inside an HTML document. This guide covers head placement, syntax, attributes, global and element-specific rules, and when to use external stylesheets instead.

01

Embed CSS

Write rules inside style in the head.

02

Head Placement

Load styles before body content renders.

03

Global Styles

Fonts, colors, and page backgrounds.

04

Element Rules

Target h1, p, and more.

05

vs link & inline

Know internal, external, and inline CSS.

06

Best Practices

Organize CSS and prefer external files.

Fundamentals

What Is the <style> Tag?

The <style> tag is an HTML element that lets you embed CSS (Cascading Style Sheets) directly within an HTML document. It empowers developers to apply colors, fonts, spacing, and layout rules to HTML elements without a separate stylesheet file.

💡
Internal CSS — not the inline style attribute

The style tag holds CSS rules in the head. The style attribute on an element applies CSS to one tag only. They are different techniques.

Use embedded CSS for page-specific styles, quick prototypes, or critical above-the-fold styling. For shared styles across many pages, prefer external CSS via <link>.

Foundation

📝 Syntax

Place style inside the document’s head and wrap your CSS rules between opening and closing tags:

syntax.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Your CSS rules go here */
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <!-- Your HTML content here -->
  </body>
</html>

Syntax Rules

  • Place style inside head for best practice (body placement is allowed but discouraged).
  • CSS between the tags uses normal selector and declaration syntax.
  • Self-closing syntax (<style />) is not valid in HTML.
  • Use CSS comments (/* ... */) to document your rules.
Cheat Sheet

⚡ Quick Reference

TopicCode SnippetNotes
Basic style block<style>...</style>In head
Element ruleh1 { color: blue; }Selector + declarations
Legacy typetype="text/css"Optional in HTML5
Media querymedia="screen"Conditional styles
vs external CSS<link rel="stylesheet">Shared across pages
Browser supportUniversalAll browsers
Reference

🧰 Attributes

The <style> tag has few attributes. In HTML5, CSS is the default style language and type is optional.

attributes.html
<style type="text/css">
  h1 {
    color: #3498db;
  }
</style>
type Optional

Declares the style language. text/css is default in HTML5 — attribute can be omitted.

type="text/css"
media Optional

Limits styles to a media type or query, e.g. screen or (max-width: 768px).

media="screen"
title Optional

Names an alternate stylesheet when multiple style blocks exist.

title="Alternate"
blocked Advanced

Prevents the stylesheet from applying until removed via script (rare use).

blocked
Try element-specific styles
Hands-On

Examples Gallery

Element-specific rules, global document styles, and complete head placement with copy-ready code and live previews.

👀 Live Preview

Heading styled with embedded CSS rules:

Hello, World!

📚 Common Use Cases

Use <style> for global document styles, element-specific rules, and page-unique CSS that does not belong in a shared external file.

Element-Specific Styles

Apply styles to specific HTML elements such as headings to create a tailored look:

element-specific-styles.html
<style>
  h1 {
    color: #2ecc71;
    text-align: center;
  }
</style>
Try It Yourself

Global Styles

The style tag is ideal for defining global styles that apply to the entire document, including fonts and backgrounds:

global-styles.html
<style>
  body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f8f8;
  }
</style>
Try It Yourself

Complete Head Placement

Full document structure with style in the head section:

syntax.html
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }
  </style>
</head>
Try It Yourself
A11y

♿ Accessibility

  • Maintain color contrast — Embedded CSS must meet readable contrast ratios for text and backgrounds.
  • Do not hide content with CSS — Avoid display: none on important information users need.
  • Respect user preferences — Support prefers-reduced-motion and scalable font sizes.
  • Focus styles matter — Include visible :focus-visible styles for keyboard users.

🧠 How <style> Works

1

Author writes CSS in head

Rules are placed inside a style element.

Markup
2

Browser parses CSS

The engine reads selectors and declarations before rendering body content.

Parse
3

Styles apply to elements

Matching HTML elements receive the declared colors, fonts, and layout.

Render
=

Styled web page

Visual presentation is controlled without changing HTML structure.

Compatibility

Browser Support

The <style> tag is supported in all major browsers, including Internet Explorer.

✓ Baseline · HTML4 / HTML5

Embedded CSS everywhere

All browsers parse and apply <style> blocks in the document head.

100% Core tag support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer Fully supported · EOL
Full support
Opera Fully supported
Full support
<style> tag 100% supported

Bottom line: Use <style> confidently to embed CSS in any browser.

Wrap Up

Conclusion

The <style> tag transforms the visual aesthetics of HTML documents. Whether applying global styles or fine-tuning specific elements, understanding embedded CSS is key to creating stylish, user-friendly web pages.

View Examples Gallery Try global styles example
Pro Tips

💡 Best Practices

✅ Do

  • Keep CSS organized and readable inside style blocks
  • Combine with external CSS files for maintainable production sites
  • Use comments to document non-obvious rules
  • Place style in the head for early style application

❌ Don’t

  • Put large stylesheets entirely inline on every page
  • Confuse the style tag with the inline style attribute
  • Duplicate the same rules across many pages instead of using link
  • Hide essential content with CSS alone
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <style>

Bookmark these before you embed CSS in your pages.

6
Core concepts
🎨 01

Embed CSS

Internal styles.

Purpose
🗃 02

In head

Best placement.

Location
🌐 03

Global rules

Page-wide CSS.

Use case
⚖️ 04

vs link

External CSS.

Comparison
🔑 05

type / media

Attributes.

Reference
🌐 06

100% Support

All browsers.

Compatibility
🎯 You’re ready to embed CSS with the style tag
Review Quick Reference →

❓ Frequently Asked Questions

It embeds CSS rules inside an HTML document, typically in the head, to style page elements.
Inside the head element. CSS rules between the tags apply to the document.
The style tag holds CSS for many selectors. The style attribute styles one element only.
No in HTML5. CSS is the default. type="text/css" is optional legacy syntax.
Yes. Full support in every major browser including Internet Explorer.

Embed CSS in HTML

Practice <style> for global and element-specific rules in the Try It editor.

Try global styles example →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML strong Tag HTML sub Tag