English
Amharic
Arabic
Armenian
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Czech
Danish
Dutch
Esperanto
Estonian
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hausa
Hawaiian
Hebrew
Hindi
Hmong
Hungarian
Icelandic
Igbo
Indonesian
Irish
Italian
Japanese
Javanese
Malagasy
Malay
Malayalam
Maltese
Maori
Marathi
Mongolian
Myanmar (Burmese)
Nepali
Pashto
Persian
Polish
Portuguese
Punjabi
Romanian
Russian
Slovenian
Somali
Spanish
Sudanese
Swedish
Tajik
Tamil
Telugu
Thai
Turkish
Ukrainian
Urdu
What is Style Tag in HTML | Tag Style HTML
HTML Style Tag
Style means to decorate. That is, styling an HTML document. Actually CSS is used for style. But, you can also style an HTML document to some extent with the help of HTML only. The style of HTML document includes changing the font, changing the font family, changing the background, changing the text color, etc. Is.
Two methods are adopted to style the document through HTML:
- Styling by HTML Style Tag
- Styling by Style Attribute
In this lesson we will give you complete information about Style Tag and Style Attribute. We have divided this lesson into the following parts:
Topics
Introduction to Style Tag –
Syntax of Style Tag
Commonly Used Attributes with Style Tag
Introduction to Style Attribute – Introduction to Style Attribute
Syntax of Style Attribute
Changing the background of HTML document
Changing text color of HTML document
Changing Font Size in HTML Document
Changing Font Family in HTML Document
Changing Text Alignment in HTML Document
what have you learned?
1- Introduction to Style Tag: –
HTML <style> tag is used to define the style information of an element.
We also call Style Element as Mini CSS of HTML Document. Because through this element you can define Inline CSS of a webpage.
Syntax of Style Tag
Style element is defined in the head section of the HTML document. And style rules are defined for a specific element.
<!DOCTYPE html>
<html>
<head>
<title>Style Tag Example</title> <style attributes…>
Style Rule Here…
</style>
</head>
<body>
</body>
</html>
From the HTML code given above, we have explained the syntax of Style Tag. You are well aware of the remaining elements (!DOCTYPE, html, head, body etc.). In this we have defined the style element in the head element.
Style Element is also defined like other HTML Elements. First Opening Tag – <style> If any attribute is to be used in it, then define it here also. Then Content (here Style Rules) and after that Closing Tag – </style>.
Commonly Used Attributes with Style Tag
With Style Tag you can define both Global Attributes and Event Attributes. Apart from these, there are some other important attributes, which are defined with Style Tag:
type: This attribute defines the media type.
media: This attribute defines the media resource. Meaning, for what type of media (All, Print, Screen, TV etc.) you are defining style information.
2- Introduction to Style Attribute: –
Like Style Element, Style Attribute also defines Style Information in HTML. Style Element is defined in the Head Section of the document, and Style Attribute is used as an attribute in any element. Because this is also a standard attribute.
Through Style Element you can define the style information of all the document elements at once. But, style information has to be defined separately in each element through Style Attribute. Style Attribute is defined like this.
Syntax of Style Attribute
Tagname: Here you can write any tag. For which you want to write style information. But, that element should be defined within the Body Element only.
Property: This is a CSS property. Meaning, the style you want to use for the element. You can also call it “What”.
Value: This is CSS Value. Meaning, what style do you want to apply to the element. You can also call this “How”.
Note: CSS Property and CSS Value are pre-defined. Meaning they have already been made. You can use only these. You cannot create CSS rules yourself.
Now we are defining some style rules for HTML documents. In which Style Attribute has been used. But, after this we will tell you how to define all the style rules together through style tag.
3- Method to change the background of HTML document
To change the background color of an HTML document, the Style Attribute is used in the Opening Body Tag. You can copy the HTML code given below and paste it in your notepad or type this code with your own hands and save the file with the name htmlbackground.html. And open it.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Example </title></head>
<body style=”background-color:gray;”>
<p>This is Gray Background.</p>
</body>
</html>
When you see the above code in the browser, you will get the following result:
This is Gray Background.
Consider the example:
In the HTML code given above, we have used the Style Attribute in the Opening Body Tag to change the background of the HTML document. In which background-color property has been used. We have set the background color to gray here. You can write any color of your choice here.
4- Method to change text color of HTML document
To change the text color of an HTML document, the Style Attribute is used in the Opening Body Tag. You copy the HTML code given below and paste it in your notepad or type this code with your hands and save the file with the name htmltextcolor.html. And open it.
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Color Example </title></head>
<body style=”color:green;”>
<p>This is Green Color Text.</p>
<p style=”color:red;”>This is Red Color Text.</p>
<p>This is Green Color Text.</p>
</body>
</html>
When you see the above code in the browser, you will get the following result:
This is Green Color Text.
This is Red Color Text.
This is Green Color Text.
Consider the example:
In the HTML code given above, we have used the Style Attribute in the Opening Body Tag to change the text color of the HTML document. In which color property has been used. We have set the background color green here. You can write any color of your choice here.
5- Method to change font size in HTML document
To change the font size of an HTML document, the Style Attribute is used in the Opening Body Tag. You copy the HTML code given below and paste it in your notepad or type this code with your hands and save the file with the name htmlfontsize.html. And open it.
<!DOCTYPE html>
<html>
<head>
<title>HTML Font Size Example</title></head>
<body style=”font-size:25px;”>
<p>This is 25 Pixel Font Size Text.</p>
<p style=”font-size:15px;”>This is 15 Pixel Font Size Text.</p>
<p>This is 25 Pixel Font Size Text.</p>
</body>
</html>
When you see the above code in the browser, you will get the following result:
This is 25 Pixel Font Size Text.
This is 15 Pixel Font Size Text.
This is 25 Pixel Font Size Text.
Consider the example:
In the HTML code given above, we have used the Style Attribute in the Opening Body Tag to change the font size of the HTML document. In which font-size property has been used. We have set the Font Size here to 25px. You can write any font size of your choice here.
6- Method to change font family in HTML document
To change the font family of an HTML document, the Style Attribute is used in the Opening Body Tag. You can copy the HTML code given below and paste it in your notepad or type this code with your own hands and save the file with the name htmlfontfamily.html. And open it.
<!DOCTYPE html>
<html>
<head>
<title>HTML Font Family Example</title></head>
<body style=”font-family: Verdana;”>
<p>This is Verdana Font Text.</p>
<p style=”font-family: Arial;”>This is Arial Font Text.</p>
<p>This is Verdana Font Text.</p>
</body>
</html>
When you see the above code in the browser, you will get the following result:
This is Verdana Font Text.
This is Arial Font Text.
This is Verdana Font Text.
Consider the example:
In the HTML code given above, we have used the Style Attribute in the Opening Body Tag to change the font family of the HTML document. In which font-family property has been used. We have set the Font Family Verdana here. You can use any font of your choice here.
7- Method to change text alignment in HTML document
To change the text alignment of an HTML document, the Style Attribute is used in the Opening Body Tag. You can copy the HTML code given below and paste it in your notepad or type this code with your hands and save the file with the name htmltextalign.html. And open it.
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Alignment Example</title></head>
<body style=”text-align:left;”>
<p>This is Left Aligned Text.</p>
<p style=”text-align:center;”>This is Center Aligned Text.</p>
<p>This is Left Aligned Text.</p>
</body>
</html>
When you see the above code in the browser, you will get the following result:
This is Left Aligned Text.
This is Center Aligned Text.
This is Left Aligned Text.
Consider the example:
In the HTML code given above, we have used the Style Attribute in the Opening Body Tag to change the Text Alignment of the HTML Document. In which text-align property has been used. We have set Text Alignment Left here. You can set any alignment of your choice here.
Note: Keep one more thing in mind. If you want to use the same style in the entire document, then define the Style Attribute in the Body Tag. And if you want different styles in the entire document, then define the Style Attribute in the same Particular Paragraph. For which you want to write style information.
Till now you have defined all the style rules through Style Attribute. Let us now define all these style rules through Style Tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>HTML Style Example</title><style type=”text/css”>
body {background: gray;}
p {
color: green;
font-size: 25px;
font-family: Verdana;
text-align: center;
}
<style/>
</head>
body>
<h1>This is Heading.</h1>
<p>This is a Paragraph.</p>
</body>
</html>
When you see the above code in the browser, you will get the following result:
what have you learned ?
In this lesson, we have given you complete information about styling HTML document. Have you learned how to change the background of an HTML document? How to change Text Color, Font Size, Font Family etc.? We hope that this lesson will prove useful for you.