HTML <style> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <style> tag in HTML is used to define internal CSS (Cascading Style Sheets) directly within an HTML document. This tag allows you to write CSS rules that control the appearance and layout of HTML elements on a web page without linking to an external stylesheet. It is typically placed within the <head> section of an HTML document, although it can technically appear in the <body> under certain conditions, such as when scoped styling is needed (though this usage is uncommon and not widely supported).

The CSS inside a <style> tag can include any valid CSS syntax, such as selectors, properties, and values. This enables designers and developers to style elements, define colors, fonts, spacing, animations, transitions, and more, all in one place within the HTML file.

One of the primary uses of the <style> tag is for quick testing or prototyping, where external CSS files are unnecessary or impractical. It is also sometimes used for styles that are unique to a specific page or dynamically generated content.

Because styles within a <style> tag are internal to the HTML document, they override external stylesheets in case of conflicting rules due to CSS specificity and cascade rules. However, inline styles (styles added directly to elements via the style attribute) take precedence over those defined in a <style> tag.

Example of usage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style Tag Example</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #336699;
            text-align: center;
        }
        p {
            color: #333333;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph styled with CSS inside a &lt;style&gt; tag.</p>
</body>
</html>

In this example, the <style> tag contains CSS that sets the background color for the page, defines font styling, and customizes the color and alignment of headings and paragraphs.

Properties

Permitted Parents: Any element that accepts metadata content
Content: Style information
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<html>

  <head>

    <style type="text/css">

      h1 { color:#800000 }

    </style>

  </head>

  <body>

    <h1>The style tag in action</h1>

  </body>

</html>

Result

Editor

Attributes

type

Specifies the style sheet language as a content-type (MIME type).

media

Specifies the device the document will be displayed on. Possible values:

all
braille
print
projection
screen
speech

Global Attributes

The <style> tag also supports the Global Attributes in HTML5

Event Attributes

The <style> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <style> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.