HTML <style> tag inside div | The Style Information element | HTML style tag | HTML style Attribute
Style means to decorate. That is, Styling an HTML Document. By the way, CSS is used for style. But, with the help of only HTML, you can style an HTML document according to your own limits to some extent.
Changing font, changing font family, changing background, changing text color, etc., are included in the style of an HTML document.
Two methods are adopted to style the document in HTML:
- styling by HTML Style Tag
- styling by Style Attribute
In this lesson, we will give you complete information about Style Tag and Style Attributes. We have divided this lesson into the following parts:
{tocify} $title={Table of Contents}
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 the inline CSS of a webpage.
Syntax of Style Tag
Style Element is defined in the Head Section of the HTML Document. And their Style Rule is defined for a specific element.
Check it out:
<!DOCTYPE html><html><head><title>Style Tag Example</title><style attributes…>.body {position: relative;background: var(--bodyB);color: var(--textC);font: var(--bodyF);overflow-x: hidden;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}.h1, h2, h3, a {color: var(--main-color);}</style></head><body></body></html>{codeBox}
Understand this:
From the HTML Code given above, we have explained the Syntax of the Style Tag.
You are well familiar with the rest of the Elements (!DOCTYPE, HTML, head, body, etc.)
In this, we have defined Style Element in 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 too.
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 defines the Attribute Media Resource. This means 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. The Style Element is defined in the Head Section of the Document, and the Style Attribute is used as an Attribute in any Element because it is also a Standard Attribute.
By Style Element, you can define the Style Information of all Document Elements at once.
But, different Style Information has to be defined in each Element by Style Attribute.
Style Attribute is defined in this way.
Syntax of Style Attribute
<tagname style=”property: value;”>
- Tagname: Here, you can write any Tag. For which you want to write Style Information. But that Element should be defined within 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 the CSS Value. This means, what style do you want to apply for Element? You can also call it "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 Rule 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 to define all the Style Rules together through Style Tag as well.
3. Method to change background of HTML document
Style Attribute is used in Opening Body Tag to change the Background Color of the HTML Document.
Copy the HTML code given below and paste it into your notepad or type this code manually and save the file as htmlbackground.html. And open it.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML Background Example</title></head><body style=”background-color:gray;”><p>This is Gray Background.</p></body></html>{codeBox}
When you will see the above code in the browser, you will get this type of result:
Output:
This is Gray Background.
Consider the example:
In the above HTML code, we have used the Style Attribute in the Opening Body Tag to change the background of the HTML document. In which the background-color property has been used. We have set Background Color Gray here. You can write any color of your choice here.
4. Method to Change Text Color of HTML Document
Style Attribute is used in Opening Body Tag to change the Text Color of the HTML Document. Copy the HTML code given below and paste it into your notepad or type this code manually and save the file as 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>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output:
This is Green Color Text.
This is Red Color Text.
This is Green Color Text.
Consider the example:
In the above HTML code, 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
<!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>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output:
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 above HTML code, we have used the Style Attribute in the Opening Body Tag to change the Font Size of the HTML Document. In which the font-size property has been used. We have set the Font Size to 25px here. You can write any font size of your choice here.
6. Method to Change Font Family in HTML Document
Style Attribute is used in Opening Body Tag to change the Font Family of the HTML Document. Copy the HTML code given below and paste it into your notepad or type this code manually and save the file as 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>This is Verdana Font Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output:
This is Verdana Font Text.
This is Arial Font Text.
This is Verdana Font Text.
Consider the example:
In the above HTML code, we have used the Style Attribute in the Opening Body Tag to change the Font Family of the HTML Document. In which the font-family property has been used. We have set Font Family Verdana here. You can use any font of your choice here.
7. Method to Change Text Alignment in HTML Document
Style Attribute is used in Opening Body Tag to change the Text Alignment of the HTML Document. Copy the HTML code given below and paste it into your notepad or type this code manually and save the file as 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>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output:
This is Left Aligned Text.
This is Center Aligned Text.
This is Left Aligned Text.
Consider the example:
In the above HTML code, we have used the Style Attribute in the Opening Body Tag to change the Text Alignment of the HTML Document. In which the text-align property has been used.
We have set Text Alignment Left here. You can select any Alignment of your choice here.
Note: Keep one more thing in mind. If you want to use the same style throughout the document, then you define the Style Attribute in the Body Tag.
And if you want the style to be different in the entire document, then you 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.
Come now, let's define all these Style Rules by Style Tag.
Try this also:
<!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>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output:
This is 25px Green Center Aligned Text .
What have you learned?
In this Lesson, we have given you complete information about styling HTML Documents. 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.
Conclusion:
Friends, according to my expertise, I have written complete information to help you on “HTML <style> tag | HTML style Attribute.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
