HTML style Tag

HTML Style is implemented to modify or include style to current HTML elements. Each HTML element comes with a preset style, such as a white background color and black text color.

The style attribute is compatible with all HTML elements. To implement styling on an HTML element, a fundamental understanding of CSS properties is necessary, such as color, background-color, text-align, font-family, font-size, and more.

The syntax of style attribute is given below:

style= "property:value"

HTML Style color

The color attribute is employed to specify the color of the text.

Let's explore a basic illustration of applying CSS's color property to style HTML elements.

<h3 style="color:green">This is Green Color</h3>

<h3 style="color:red">This is Red Color</h3>

Output:

This is Green Color

This is Red Color

HTML Style background-color

The background-color attribute is utilized to specify the background color for the HTML element.

Let's explore an illustration of formatting an HTML element using the CSS background-color attribute.

<h3 style="background-color:yellow;">This is yellow background</h3>

<h3 style="background-color:red;color:white">This is red background</h3>

Output:

This is yellow background

This is red background

HTML Style font-family

The font-family property defines the font family for the HTML element.

Let's examine a demonstration of styling an HTML element using the CSS font-family attribute.

<h3 style="font-family:times new roman">This is times new roman font family</h3>

<p style="font-family:arial">This is arial font family</p>

Output:

This is times new roman font family

This is arial font family

HTML Style font-size

The font-size attribute is utilized to specify the text dimensions of the HTML element.

Let's see an example of font-size property

<h3 style="font-size:200%">This is 200% h3 tag</h3>

<p style="font-size:200%">This is 200% p tag</p>

Output:

This is 200% h3 tag

This is 200% p tag

HTML Style text-align

The text-align attribute is employed to specify the horizontal alignment of text within an HTML element.

Let's explore an illustration of formatting an HTML element using the CSS text-align attribute.

<h3 style="text-align:right;background-color:pink;">This text is located at right side</h3>

<p style="text-align:center;background-color:pink;">This text is located at center side</p>

If you wish to align a heading in the center or to the left, apply "text-align:center" or "text-align:left" correspondingly.

Output:

This text is located at right side

This text is located at center side

HTML5 doesn't support <center> tag which is supported in older version of HTML.

Supporting Browsers

If you're interested in learning further about HTML styling, you can explore it in a CSS tutorial.