Glossary
HTMLCSSJavaScriptPythonSwiftTypeScriptSQLReact

HTML

HTML style Tag: Syntax, Usage, and Examples

The HTML <style> tag contains style information like color and font size for the elements of a web page. The style element can control the styling of a web page's content within through CSS (Cascading Style Sheets).

How to Use the HTML style Tag

The <style> tag usually goes within the <head> section of an HTML file. It contains CSS properties and rules that apply styles to elements on the page. 

<head>
    <style>
        body { background-color: lightblue; }
        h1 { color: navy; }
        p { margin-left: 20px; }
    </style>
</head>
  • <style>: The HTML tag to create a style element and define internal CSS.
  • CSS rules inside <style> affect elements on the page based on the specified selectors.

When to Use the HTML style Tag

The <style> tag is useful when you want to use HTML and CSS in a single document instead of linking an external CSS file.

Customizing Web Pages

The <style> tag allows for quick and direct styling of elements on a single web page without the need for an external stylesheet. 

<style>
    p { color: red; }
</style>

Prototyping Designs

You can use the <style> tag to prototype or debug CSS styling directly within the HTML document. Later on, you can move the styling into an external style sheet. 

<style>
    .debug { border: 1px solid red; }
</style>

Overriding External Styles

In combination with external stylesheets, you can use the <style> tag to override external style settings for specific pages. 

<style>
    body { background-color: #fff; }
</style>

Examples of the HTML style Tag

The <style> tag can be useful in many different contexts. Here are some practical examples:

Setting Font Styles

A blog page might use the <style> tag to customize the appearance of text content directly within the HTML document. This way, authors can easily change font styles without an external stylesheet. 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body { font-family: 'Arial', sans-serif; }
        h1 { font-size: 24px; }
        p { font-style: italic; }
    </style>
</head>
<body>
    <h1>Welcome to My Blog</h1>
    <p>This is a sample paragraph with italic text styling.</p>
</body>
</html>

Responsive Web Design

A portfolio web page might use the <style> tag to support responsive layouts using media queries. This makes the page adaptable to different screen sizes. 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        @media (max-width: 600px) {
            body { background-color: lightgreen; }
        }
        @media (min-width: 601px) {
            body { background-color: lightblue; }
        }
    </style>
</head>
<body>
    <p>Resize your browser window to see the background color change!</p>
</body>
</html>

Layout Design

An ecommerce webpage might use the <style> tag to design a product grid layout using flexbox. 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container { display: flex; justify-content: space-between; }
        .item { flex: 1; padding: 10px; margin: 5px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Product 1</div>
        <div class="item">Product 2</div>
        <div class="item">Product 3</div>
    </div>
</body>
</html>

Learn More About the HTML style Tag

Inline Styles in HTML

In HTML, inline styles apply styles to individual elements using the style attribute. This method is useful for quick styling changes, testing, or when specific styles apply only to a single element. However, embedding styles within HTML can make your code less readable and harder to maintain. 

<p style="color: blue; font-size: 16px;">This paragraph is styled using inline CSS.</p>

External Stylesheets

External stylesheets are CSS files you link to an HTML document using a <link> element in the <head> section. This method is ideal for projects with multiple web pages, enabling better organization and reuse of styles. 

<!-- Link to an external CSS file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="external-style">This paragraph is styled using an external stylesheet.</p>
</body>

CSS Rules

CSS rules consist of selectors and declarations that define how to style HTML elements. A rule begins with a selector, which identifies the HTML element(s) to style. The declarations follow, enclosed in curly braces, where each declaration includes a property and its value.

The selector specifies which HTML elements the rule will apply to. Selectors can target elements by their tag name (h1), class (.class-name), or ID (#id-name). More complex selectors allow targeting elements based on their attributes, positions, or relationships.

A declaration contains a property and a value separated by a colon (:), specifying how to style the selected elements. To create multiple declarations within a rule, add a semicolon (;) at the end of each declaration. 

/* CSS Rule Structure */
p {
    color: blue;       /* Sets the text color to blue */
    font-size: 16px;   /* Sets the font size to 16 pixels */
}

Advanced CSS Features

The <style> tag supports advanced CSS features like animations, transformations, and transitions, enabling dynamic, interactive user interfaces. 

<head>
    <style>
        .animated {
            animation: slidein 3s ease;
        }
        @keyframes slidein {
            from {
                transform: translateX(0%);
            }
            to {
                transform: translateX(100%);
            }
        }
    </style>
</head>
<body>
    <div class="animated">Sliding text animation</div>
</body>

Cross-Browser Compatibility

Cross-browser compatibility ensures that web pages render consistently across different browsers, despite variations in their rendering engines. When using the <style> tag, consider these tips to improve cross-browser compatibility:

  1. Vendor Prefixes: Some CSS properties need vendor-specific prefixes for proper rendering in certain browsers. 

    <style>
    .box {
        -webkit-box-shadow: 10px 10px 5px #888;  /* Safari and Chrome */
        -moz-box-shadow: 10px 10px 5px #888;     /* Firefox */
        box-shadow: 10px 10px 5px #888;          /* Standard */
    }
</style>

  2. Feature Detection: Check if a browser supports a CSS feature before applying it. For example, you can use JavaScript libraries like Modernizr or CSS-only techniques like @supports: 

    <style>
    @supports (display: grid) {
        .container {
            display: grid;
        }
    }
</style>

  3. Fallback Styles: Provide fallback styles to ensure functionality in older browsers that may not support modern CSS features: 

    <style>
    .background {
        background-color: #333;  /* Fallback */
        background-image: linear-gradient(to right, #333, #777); /* Modern */
    }
</style>

  4. CSS Reset or Normalize: Apply a CSS reset or normalization stylesheet to reduce inconsistencies between browsers' default styles: 

    <head>
    <style>
        /* Example of CSS Reset */
        body, h1, h2, h3, p, ul, li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>

  5. Testing in Different Browsers: Test your web pages using different browsers (e.g., Chrome, Firefox, and Safari) and devices. This way, you can identify issues early in the development process.

Best Practices for Using the HTML style Tag

  • Limit the use of the <style> tag to small or specific style changes. For larger projects, external stylesheets are generally more maintainable.
  • Group related styles together to improve readability and maintainability.
  • Comment your code within the <style> tag to explain why you're applying certain styles. Commenting can help you during future revisions or other web developers who might work on your web page.

Looking to dive deeper into HTML style tags and other essential HTML concepts? Check out our HTML course.

Learn HTML for Free
Start learning now
button icon
To advance beyond this tutorial and learn HTML by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Code Compilers

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2025 Mimo GmbH