Open In App
Related Articles

HTML Style Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The <style> tag is used to declare style information (CSS) for a document. It is where the developer can define the appearance and layout of the website or page, including font styles, colors, and spacing.

Note: To link to an external style sheet, use the <link> tag.

Syntax:

<tagname style="property:value;">
  • The tagname includes <p>, <body>, from <h1> to <h6> etc.
  • The property is borrowed from CSS like color, font size, font family, etc.
  • The value is also borrowed from CSS.

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

HTML Font Family:

The font family changes the font style of a text and can be used in any text writing tag like <p> or heading tag.

Example: In this example, we will see the implementation of a font family in an HTML document.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Style Tag | Set Font Family</title>
</head>
 
<body>
    <h1 style="font-family:commanders;">
        Hello GeeksforGeeks.
    </h1>
    <h2 style="font-family:Chaparral Pro Light;">
        Hello GeeksforGeeks.
    </h2>
    <h3 style="font-family:algerian;">
        Hello GeeksforGeeks.
    </h3>
    <p style="font-family:Castellar;">
        Hello GeeksforGeeks.
    </p>
</body>
 
</html>

                    

Output:

HTML Font Size:

The font size changes the size of a text and this can also be used in any text writing tag like <p> or heading tag. The units can be given in “%” or pixels or other units can also be included. 

Example 2: In this example, we will see the implementation of a font size in an HTML document.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML Style Tag | Set Font Size
    </title>
</head>
 
<body>
    <h1 style="font-size:80%;">
        Hello GeeksforGeeks.
    </h1>
    <h2 style="font-size:150%;">
        Hello GeeksforGeeks.
    </h2>
    <h3 style="font-size:20px;">
        Hello GeeksforGeeks.
    </h3>
    <p style="font-size:30px;">
        Hello GeeksforGeeks.
    </p>
</body>
 
</html>

                    

Output:

HTML Font Color:

The font color tag changes the color of a text and can be used in any text writing tag like <p> or heading tag. For various color codes or to pick from various color ranges refer HTML Color Codes

Example: In this example, we will see the implementation of a font color in an HTML document.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML Style Tag | Set Font Color
    </title>
</head>
 
<body>
    <h1 style="color:red;">
        Hello GeeksforGeeks.
    </h1>
    <h2 style="color:#8CCEF9;">
        Hello GeeksforGeeks.
    </h2>
    <h3 style="color:green;">
        Hello GeeksforGeeks.
    </h3>
    <p style="color:#810CA6;">
        Hello GeeksforGeeks.
    </p>
</body>
 
</html>

                    

Output:

HTML Text Align:

The text alignment tag is used to change the alignment of a text including centre, left or right alignment. 

Example: In this example, we will see the implementation of a text align attribute in an HTML document.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML Style Tag | Set Text Align
    </title>
</head>
 
<body>
    <h1 style="text-align:left;">
        Hello GeeksforGeeks.
    </h1>
    <h2 style="text-align:center;">
        Hello GeeksforGeeks.
    </h2>
    <p style="text-align:right;">
        Hello GeeksforGeeks.
    </h2>
</body>
 
</html>

                    

Output:

HTML Background Color

Using HTML Background color attribute we can change the color of the background page or web page. This attribute is used along with the body tag to change the whole color of the body.

Example: In this example, we will see the implementation of a html background color in an HTML document.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML Style Tag | Set background color
    </title>
</head>
 
<body style="background-color:#616A6B;">
    <h1 style="font-family:commanders;
        background-color:yellow;">
        Hello GeeksforGeeks.
    </h1>
    <h2 style="font-family:algerian;
        background-color:cyan;">
        Hello GeeksforGeeks.
    </h2>
    <p style="font-family:Castellar;
        background-color:green;">
        Hello GeeksforGeeks.
    </p>
</body>
 
</html>

                    

Output:

Now we also learn a new thing that within a single <style> tag we can add various attributes by using a semicolon as shown in the previous example.

Application of Style Tag:

Since we have learned how to use the style attribute in providing the CSS properties to HTML elements, let’s see how to use them in CSS. CSS properties can be mentioned inside style tags which are inside the head tag. Each element can be provided unique properties by mentioning there unique tags like h1 or p and if there are more than one elements, we can assign each element with an unique id or class, to differentiate them from the rest.

Example: In this example, we will see the implementation of above in an HTML document.

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:

  • Google Chrome 15
  • Edge 12 and above
  • Firefox 1 and above
  • Opera 14 and above
  • Safari 6 and above


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads