HTML | Style Tag

The <style> tag in HTML helps us to modify our text, viewed in the page. This modification includes changing font size, font family, font color etc. Not only the texts but also we can change the style of a body ar part of a page. Now let’s look at various attributes of style and what else the tag supports.
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.
  1. 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. These font families include all the names that you find in Microsoft Office or any other writing-based software.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>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>

    chevron_right

    
    

    Output:

  2. 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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>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>

    chevron_right

    
    

    Output:

  3. 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. We can use both name of the colors or also the color codes that is mainly used in Photoshop. For various color codes or to pick from various color ranges refer HTML Color Codes.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>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>

    chevron_right

    
    

    Output:

  4. HTML Text Align: The text alignment tag is used to change the alignment of a text including centre, left or right alignment.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>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>

    chevron_right

    
    

    Output:

  5. HTML Background Color: Using this 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. It can also be used along with the text tags to change the text block’s color.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <title>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>

    chevron_right

    
    

    Output:

  6. 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 CSS

    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 is more than one element, we can assign each element with a unique id or class, to differentiate them from rest.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

    Supported Browsers: Supported browsers are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Improved By : nidhi_biet