In this tutorial you will learn about HTML Style. The HTML style attribute is used to make element in modern way. There is a default HTML style attribute for every element such as, style=”background:green” or style=”color:white” etc.
The style attribute can be defined with HTML elements. If you want to style HTML elements, you need a basic knowledge of CSS properties to make your elements stylish.
HTML Style Attribute
Given Example will help you to create your elements in style.
<!DOCTYPE html> <html> <body> <p>I am paragraph</p> <p style="color:green;">I am green</p> <p style="color:purple;">I am purple</p> <p style="font-size:50px;">I am large</p> </body> </html>
CSS background Color Property:
The CSS background-color property defines creating a background color of a tag. The background property saves the size of the element with their border and padding but except margin. The Style Attribute property will help the users to read web page text in an easy way. You can highlight your text by using this property. This will also be helpful for website users. And color Property is used to change text color.
Example:
<!DOCTYPE html> <html> <body style="background-color:black;"> <h1 style="background:white">This is a heading</h1> <p style="color:yellow">This is a paragraph.</p> </body> </html>
CSS Font Size Property:
The font-size property helps you to change the font size of a text by using the style attributes. The style attribute states on inline elements. HTML5 could not support the element. So, you can use style attributes to resize your text in the highest and lowest form.
Example:
<!DOCTYPE html> <html> <body> <h1 style="font-size:50px;">This is a Highest</h1> <p style="font-size:20px;">This is a Lowest.</p> </body> </html>
HTML Style Attribute Font Align Property:
The CSS font align property defines the alignment of a text. You can use this property to show your text in left, right, and center, etc.
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center Heading</h1> <p style="text-align:left;">Left paragraph.</p> <p style="text-align:right;">Right paragraph.</p> <p style="text-align:justify;">Justify.</p> </body> </html>