Introduction:

In this article we will learn what is style attribute in html tag or how to use style attribute in html tag or how to change html display style e.g. color, background-color, text-align, font-family, font-size etc  with example.

Description:

HTML Style attribute is used to change or add the style of 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 use 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.

Syntax:

style="property:value"

HTML Style color:

The color property is used to define the text color for an HTML element.

Let's see a simple example of color property of css:

<!DOCTYPE>
<html>
<head>
    <title>Example of style</title>
</head>
<body>
    <h1 style="color:blue;">This is Blue Color.</h1>
    <h3 style="color:red;">This is Red Color.</h3>
</body>

OutPut:

This is Blue Color.

This is Red Color.

 

HTML Style background-color:

The background-color property is used to define background color for an HTML tag.

Let's see an example of background-color property of css:

<!DOCTYPE>
<html>
<head>
    <title>Example of style</title>
</head>
<body>
    <h1 style="background-color:blue;">
        This is Blue background
   </h1>
    <h2 style="background-color:red;color:white">
        This is red background
    </h2>
</body>
 
</html> 

 

Output:

This is Blue background

 

This is red background

 

 

HTML Style font-family:

The font-family property specifies the font family of an HTML tag.

Let's see an example of css font-family property:

<!DOCTYPE>
<html>
<head>
    <title>Example of style</title>
</head>
<body>
    <h1 style="font-family:times new roman">
This is times new roman font family
    </h1>
    <h2 style="font-family:arial">
    This is arial font family
    </h2> 
</body>
</html>

OutPut:

This is times new roman font family

This is arial font family



HTML Style font-size:

The font-size property is used to define the text size of an HTML tag.

Let's see an example of font-size property:

<!DOCTYPE>
<html>
<head>
    <title>Example of style</title>
</head>
<body>
    <h1 style="font-size:200%">This is 200% h1 tag</h1>
    <h3 style="font-size:150%">This is 150% h3 tag</h3>
</body>
</html> 

Output:

This is 200% h1 tag

This is 150% h3 tag


 

HTML Style text-align:

The text-align property is used to define the horizontal text alignment for an HTML element.

Let's see an example of css text-align property:

<!DOCTYPE>
<html>
<head>
    <title>Example of style</title>
</head>
<body>
    <div style="width:50%;">
        <h3 style="text-align:right;background-color:red;">
           this text is align right side html    
        </h3>
        <p style="text-align:center;background-color:red;">
       this text is align center side html
   </p>
    </div>
</body>
</html>

Output:



I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like