HTML Styles

HTML Styles: In this tutorial, we are going to learn about the style attribute of the tags in HTML, how to add some more styles/properties on a tag using it in HTML?
Submitted by Shivang Yadav, on December 21, 2019

HTML style Attribute

The HTML style attribute is used to add some style or add some changes to the text in HTML. Style is adding some additional settings to make it look different from ordinary text.

In HTML the style attribute takes care of styling elements.

Syntax:

<tag style= "property1:value; property2:value; property3:value;.. "/>

This will add CSS you will learn to your tag for styling it.

You will learn about styles and CSS tags in CSS Tutorials. Here, we will cover only some of these styles by changing some text and web pages.

Changing font of text in HTML

The font-family property is used to change the font of text specified by the tag.

Example:

<!DOCTYPE html>

<html>

<body>
    <p style="font-family:courier;">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

Changing text size in HTML

The font-size property is used to change the size of text specified by the tag.

Example:

<!DOCTYPE html>

<html>

<body>
    <p style="font-family:courier;font-size:50px">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

Changing text color in HTML

The color property is used to change the color of text specified by the tag.

Example:

<!DOCTYPE html>

<html>

<body>
    <p style="font-family:'Monotype Corsiva';font-size:50px;color:#006969">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

Changing background color in HTML

The background-color property is used to specify background color of the tag.

Example:

<!DOCTYPE html>

<html>

<body>
    <p style="font-size:50px;color:#006969;background-color:#00f400">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

Changing alignment of text in HTML

The text-align property is used to change the size of text specified by the tag.

Example:

<!DOCTYPE html>

<html>

<body>
    <p style="font-size:50px;color:#006969;background-color:#00f400;text-align:center;">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples