HTML Style
HTML Style
HTML Style is used to change or add the style on existing HTML elements. There is a default style for every HTML element e.g. background color is white, text color is black etc.
The style attribute can by used with any HTML tag. To apply style on HTML tag, you should have the basic knowledge of css properties e.g. color, background-color, text-align, font-family, font-size etc.
HTML Style Syntax
style= "property:value"
HTML Style color
The color property is used to define the text color.
Simple example of styling html tags by color property of css.
<h2 style="color:blue">This is Blue Color</h2>
<h3 style="color:red">This is Red Color</h3>
Output:
This is Blue Color
This is Red Color
HTML Style background-color
The background-color property is used to define background color for the HTML tag.
Example of styling html tag by of css background-color property
<h3 style="background-color:yellow;">This is yellow background</h3>
<h3 style="background-color:black;color:white">This is Black background</h3>
Output:
This is yellow background
This is Black background
HTML Style font-family
The font-family property specifies the font family of the HTML tag.
Example of styling html tag by css font-family property
<h3 style="font-family:cursive">This is cursive font family</h3>
<p style="font-family:arial">This is arial font family</p>
Output:
This is cursive font family
This is arial font family
HTML Style font-size
The font-size property is used to define the text size of the HTML tag.
Example of font-size property
<h3 style="font-size:100%">This is 100% h3 tag</h3>
<p style="font-size:100%">This is 100% p tag</p>
Output:
This is 100% h3 tag
This is 100% p tag
HTML Style text-align
The text-align property is used to define the horizontal text alignment for the HTML element.
Example of styling html tag by css text-align property
<h3 style="text-align:right;background-color:red;">This text is located at right side</h3>
<p style="text-align:center;background-color:yellow;">This text is located at center side</p>
If you want to put heading at center or left, use "text-align:center" or "text-align:left" respectively.
Output:
This text is located at right side
This text is located at center side
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
| style attribute | Yes | Yes | Yes | Yes | Yes |
