How to Use the Style Tag of HTML?
There are multiple ways in which you can use the style tag of HTML. Some of them are explained in the following five examples:
Example 1: Changing the Font Family of the Text
With the help of this example, we will learn to use different font styles for our text by using the HTML style tag. The HTML script for doing this is shown below:
By using the HTML script shown above, we wanted to print the statement “Welcome to Linux Hint!” in four different font styles. For doing so, we have used the HTML style tag followed by the font-family attribute and the name of the respective font. After that, we mentioned the statement that we wanted to appear in different font styles.
The four different font styles that we have used in our script can be seen on the following web page:
Example 2: Changing the Font Size of the Text
In this example, we will learn to change the font size of our text by using the style tag of HTML for which we have written the script shown below:
In this script, we have used the font-size attribute with the HTML style tag and have used different font sizes in percentages as well as in pixels for our desired text.
You can see on the following web page that our specified text has appeared in different font sizes:
Example 3: Changing the Font Color of the Text
With this example, we will tell you how you can change the font color of your text by using the HTML style tag, for which you will have to refer to the script shown below:
Just like our first two example scripts, we have used the same style tag in this example as well. However, this time, we have used the color attribute for displaying our desired text in different colors.
Our specified text in different colors is shown on the web page in the following image:
Example 4: Changing the Alignment of the Text
Now, we will talk about changing the alignment of the text by using the style tag of HTML. For that, we have created the HTML script shown below:
In this script, we have used the same text that we wanted to appear in three different alignments, i.e., center, right, and left. We have used the style tag of HTML for this purpose, followed by the text-align attribute.
Our sample text in three different alignments is shown on the following web page:
Example 5: Changing the Background Color of the Text
Finally, we will learn to change the background color of our text by using the HTML style tag, for which we will use the script shown below:
In this script, we have simply used the HTML style tag followed by the background-color attribute for using different backgrounds for our text.
Our sample text with different background colors is displayed on the following web page:
Conclusion
This article was centered on the style tag of HTML. To highlight the importance of this HTML tag, we demonstrated five different examples to you that made use of this tag in multiple ways. By following these examples, you can easily modify the font style, font size, font color, text alignment, and text background color of your web page, and hence you can give it an all-new appealing look and that too within a few seconds.
