HTML | Style Tag

17 Mar, 2022
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.
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:<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>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:<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>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. 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:<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>Output:HTML Text Align: The text alignment tag is used to change the alignment of a text including centre, left or right alignment.Example:<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>Output: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:<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>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 CSSSince 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:<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: Supported browsers are listed below:Google ChromeInternet ExplorerFirefoxOperaSafariMy Personal Notes
arrow_drop_upSave
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:<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>Output:
<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>
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:<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>Output:
<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>
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. 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:<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>Output:
<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>
Output:
HTML Text Align: The text alignment tag is used to change the alignment of a text including centre, left or right alignment.Example:<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>Output:
<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>
Output:
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:<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>Output:
<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>
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 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:
<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: Supported browsers are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
nidhi_biet
HTML and XML
HTML-Tags
Web technologies-HTML and XML
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
HTTP headers | Content-Type