HTML Style Attribute

The style attribute in HTML is used to apply styles to an element, allowing you to customize aspects like color, font, size, and more.

The syntax for the style attribute is:

<tag style="property:value;">

The property and value is a CSS property and value respectively.

For example, in case of colors:

<p style="color:green">This is Green</p>
<p style="color:red">This is Red</p>
<p style="color:black">This is Black</p>

To specify the background color of an HTML element, use the background-color property, like:

<h1 style="background-color:green;">This is a heading</h1>
<p style="background-color:orange;">This is a paragraph.</p>

To specify the text color of an HTML element, use the color property, like:

<h1 style="color:green;">This is a Green heading</h1>
<p style="color:red;">This is a red paragraph.</p> 

To specify the font to be used for an HTML element, use the font-family property, like:

<h1 style="font-family:Arial;">This is an Arial heading</h1>
<p style="font-family:courier;">This is a Courier paragraph.</p> 

To specify the text size for an HTML element, use the font-size property, like:

<h1 style="font-size:30px;">This is a heading</h1>
<p style="font-size:120%;">This is a paragraph.</p>

To specify the horizontal alignment of text within an HTML element, use the text-align property, like:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:left;">Left paragraph.</p>
<p style="text-align:right;">Rightparagraph.</p>

All CSS properties will be covered in a separate reference guide. For live examples, please watch the video above.

Please check below options for the links to our previous or next tutorial.