HTML Style Tag

Last Updated : 15 Apr, 2024

The HTML <style> tag in HTML defines CSS for document styling. Within it, HTML elements’ rendering in browsers is specified. The <style> element is placed in the <head> section of the document.

Syntax:

<style>
 /* CSS properties applied inside 
        this style tag */
</style>

Attributes:

Attributes	Description
media	It takes the media query as value and specifies for what media/device the media resource is optimized.
type	It specifies the media type of the <style> tag

Note:

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

Examples of HTML Style Tag

Example 1: In this example we sets styles using the <style> tag. Paragraphs are styled with red color and 18px font size, while h2 headings are styled with green color.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>HTML style Tag</title>

        <style>
            p {
                color: red;
                font-size: 18px;
            }
            h2{
                color: green;
            }
        </style>
    </head>
    <body>
        <h2>GeeksForGeeks</h2>
        <p>Computer Science Portal.</p>
    </body>
</html>

Output:

HTML Style Tag Example Output

Example 2: In this example we demonstrates CSS styling using inline and internal styles. Different elements are styled with varied font families, colors, and alignments for a visually appealing layout.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CSS</title>

        <!--CSS properties applied inside 
        this style tag-->

        <style>
            body {
                background-color: #616a6b;
            }

            h1 {
                font-family: commanders;
                background-color: yellow;
            }

            h2 {
                font-family: algerian;
                background-color: cyan;
            }

            #first {
                font-family: Castellar;
                background-color: green;
                color: blue;
            }

            .second {
                text-align: right;
                background-color: white;
                font-size: 30px;
                color: red;
            }
        </style>
    </head>

    <body>
        <h1>Hello GeeksforGeeks.</h1>
        <h2>Hello GeeksforGeeks.</h2>
        <p id="first">Hello GeeksforGeeks.</p>
        <p class="second">Welcome Geeks</p>
    </body>
</html>