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 or 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:
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:
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:
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:
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:
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:
4. HTML Text Align: The text alignment tag is used to change the alignment of a text including centre, left or right alignment.
Example:
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:
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:
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:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<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
- Internet Explorer
- Firefox
- Opera
- Safari