Today we learn about how to use style attributes in our HTML. HTML is a hypertext markup language. but style attributes us attributes of CSS. CSS is mainly used for the design of HTML overviews. HTML makes the skeleton and CSS give the body structure of any website or web application. CSS needs style attributes all the time when using CSS. So must know about style attributes for our HTML coding.
How to Using Style Attributes
<html>
<body style="background-color:#FF5733;">
<h1>This is a heading Name</h1>
<p>This is a paragraph of our website.</p>
</body>
</html>
Here we use the body Part in this code as style attributes. Here style attributes are the CSS extension and follow the CSS rules in the HTML. Here the style attribute equals the background color of our website or web application. Our Content is like one heading and one Paragraph. But their body background color shows like orange.
HTML inline style
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
In the previous, we showed the style attribute in the body tag. Now we show it in the paragraph tag. here paragraph color will change by using its paragraph style color. You must try it in your coding editors like Notepad++. In the first paragraph, we see the normal text. But secondly, we use the red color text in our paragraph. Thirdly, we see the blue color. Lastly, we show the font size of our specific paragraph.
Style attribute in CSS
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:orange;">This is a paragraph.</p>
<h1 style="color:red;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<h1 style="font-family:Tahoma;">This is a heading</h1>
<p style="font-family:Arial;">This is a paragraph.</p>
<h1 style="text-align:center;">Cente Heading</h1>
<p style="text-align:center;">Cente paragraph.</p>
</body>
Here you learn about four types of style attribute names. We are always using this attribute in our regular HTML writing. Firstly we use our heading and paragraph Background. It's very important to learn. But Here we using normally powder-blue and orange colors. but you will also be using the gradient color also. If you use gradient color it shows a very gorgeous color.
Secondly, we write the Text color change like red or others in our heading and paragraph. The style attribute is just like a name which your design is better. Thirdly, we are making our Heading and paragraph Font family maintain. You just customize your Fort like our coding.
But here is a note, You have knowledge of where you use font-family because must that font have to your site for your use. Lastly, we are using the heading and paragraph alignment. We are showing the center of the heading and paragraph. You can also show left or right. By default show it left. But it is also customizable using the Style attribute.
