RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-style-tag/ below:

HTML Style Tag - GeeksforGeeks

HTML Style Tag

Last Updated : 27 Aug, 2024

The HTML <style> tag in HTML defines CSS for document styling. The <style> element is placed in the <head> section of the document.

Syntax:

<style>
     /* CSS properties applied inside this style tag */
    .divtag{
        color: blue
    }
</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: The <style> tag supports both Global Attributes and Event Attributes in HTML.

Example 1: In this example we sets styles using the <style> tag. Paragraphs and h2 headings are styled with red and green color respectively.

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>

Output:

Supported Browsers

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4