Table of Contents

HTML Style Attribute

The style attribute in HTML is used to add styles on HTML element. As we all know, there is a default style for every HTML element i.e background color is white and text color is black.

But with the help of HTML Styles, we can change the text-color, background-color, font-size, text-size & more.

To apply style on HTML tag, you should have basic knowledge of CSS. If you don’t know anything about CSS, don’t worry let me try to quickly explain to you CSS Properties and CSS Values with the simple example.

The HTML Style Attribute

We can set the style of an HTML element, with the help of style attribute. The syntax of the HTML style attribute is shown below:

Syntax:

<tagname
style="property:value;">

Here the property is a CSS property and the value is a CSS value.

NOTE:- You will learn more about CSS in the upcoming posts.

HTML Style color

The color property defines the text color of an Html element.

Let’s try to style an html element with the CSS color property:

<p style="color:blue"> This is blue text </p> 
<h5 style="color:green "> This is green text</h5>

Output

This is blue text

This is green text

HTML Style background-color

The CSS background-color property is used to define background color of an HTML element.

Let’s try to style the background of an html element with the CSS background-color property:

<p style="background-color:green;"> This is a simple text with green background </p> 
<h5 style=" background-color:red;"> This is a text with red background </h5>

Output

This is a simple text with green background

This is a text with red background

HTML Style font-family

The CSS font-family property is used to define the font of an HTML tag.

Let’s style an HTML element with the CSS font-family property:

<p style="font-family:courier;"> This is courier font family </p> 
</br>
<h3 style ="font-family:fantasy;"> This is fantasy font family </h3>

Output

This is courier font family

This is fantasy font family

HTML Style font-size

The CSS font-size property is used to specify the text size of an HTML element.

Let’s style an HTML element with the CSS font-size property:

<p style="font-size:30px"> This is 30px p tag </p> 
<h3 style="font-size:20px"> This is 20px h3 tag </h3>

Output

This is 30px p tag

This is 20px h3 tag

HTML Style Text Alignment

The CSS text-align property is used to specify the text alignment of an HTML element.

Let’s style an HTML element with the CSS text align property:

<p style ="text-align:center;"> This text is aligned to center </p>
<h5 style="text-align:left;"> This text is located at left side </h5>

Output

This text is aligned to center

This text is located at left side

Summary

The style attribute is used for styling HTML elements.
With the help of style attribute, we can change the text-color, background-color, font-size & text size.
The color property defines the text color of an HTML element.
The background-color property defines the background color of an HTML element.
The font-family property defines the text fonts.
The font-size property defines the text size.
The text-align property is used to define the text alignment.