HTML Text Style - Font Color, Size, Alignment, Family and Background Color

The HTML style attributes helps you in the following ways:

* With Style Attribute, you can change the background color.
* With Style Attribute, you can change the color of texts.
* With Style Attribute, you can change the alignment of texts.
* With Style Attribute, you can change the font-family of texts.
* With Style Attribute, you can change the font-size of texts.

The HTML style attribute has the following syntax:

<tagname style="property:value"> <!-- Remember this syntax -->

Now lets see one by one:

1. HTML Background Color

The background-color property defines the background color for an HTML element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
</head>
<body style="background-color:red">
<p> We come across many incidents in day-today life.But some incidents linger indeliable in our mind such that we couldn't forget in our whole life. This is the turning point of being a serious patient in one's life. This whole page will be seen in red color on your web browser. </p>
</body>
</html>

Output

We come across many incidents in day-today life. But some incidents linger indeliable in our mind such that we couldn't forget in our whole life. This is the turning point of being a serious patient in one's life. This whole page will be seen in red color on your web browser.

In the above result, we use style attribute by giving background-color as red to the of <body> tag (start tag) so that the entire tag is red in background.

Points to be noted

By default, the background color is set as white.

You can also insert background-color for a single HTML element only like a paragraph such that:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
</head>
<body>
<p style="background-color:red"> This paragraph has background color of red. </p>
<p style="background-color:grey"> This paragraph has background color of grey. </p>
</body>
</html>

Output

This paragraph has background color of red.

This paragraph has background color of grey.

2. HTML Text Color

The color property defines the color of the texts for an HTML element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
</head>
<body>
<p style = "color:red"> This paragraph has red text color. </p>
<p style = "color:blue"> This paragraph has blue text color. </p>
<p style = "color:green"> This paragraph has green text color. </p>
<p> <span style="color:red"> Mixture </span> <span style="color:blue"> text </span> <span style="color:green"> color </span>. </p>
</body>
</html>

Output

This paragraph has red text color.

This paragraph has blue text color.

This paragraph has green text color.

Mixture text color .

Points to be noted

By default, the color of texts in the output of an HTML document is black.

3. HTML Text Alignment

The text-align property defines the alignment of the texts for an HTML element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
</head>
<body>
<p style= "text-align:left"> This paragraph has left alignment. This paragraph has left alignment. This paragraph has left alignment. </p>
<p style= "text-align:center"> This paragraph has center alignment. This paragraph has center alignment. This paragraph has center alignment. </p>
<p style= "text-align:right"> This paragraph has right alignment. This paragraph has right alignment. This paragraph has right alignment. </p>
<p style= "text-align:justify"> This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment.</p>
</body>
</html>

Output

This paragraph has left alignment. This paragraph has left alignment. This paragraph has left alignment.

This paragraph has center alignment. This paragraph has center alignment. This paragraph has center alignment.

This paragraph has right alignment. This paragraph has right alignment. This paragraph has right alignment.

This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment. This paragraph has justify alignment.

Points to be noted

By default, the alignment of the texts is left.
Justify-alignment means all the sentences are in equal length.

4. HTML Font Family

The font-family property defines the family of the texts for an HTML element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
</head>
<body>
<p style= "font-family:Arial"> This paragraph has Arial font-face. </p>
<p style= "font-family:Comic Sans MS"> This paragraph has Comic Sans MS font-face. </p>
<p style= "font-family:Verdana"> This paragraph has Verdana font-face. </p>
</body>
</html>

Output

This paragraph has Arial font-face.

This paragraph has Comic Sans MS font-face.

This paragraph has Verdana font-face.

5. HTML Font Size

The font-size property defines the size of the texts for an HTML element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
</head>
<body>
<p style= "font-size:25px"> This paragraph has 25px font-size. </p>
<p style= "font-size:20px"> This paragraph has 20px font-size. </p>
<p style= "font-size:15px"> This paragraph has 15px font-size. </p>
</body>
</html>

Output

This paragraph has 25px font-size.

This paragraph has 20px font-size.

This paragraph has 15px font-size.

Points to be noted

Commonly, font-size is measured either in "px" or "em".



Some important questions of this page

1. List the five major functions of HTML style attribute.

See Answer

Please refer to the above explanation.

2. Which HTML property can give the background color of the whole page or a some part?

See Answer

Please refer to the above explanation.

3. Which HTML property can change the color of texts for an HTML document?

See Answer

Please refer to the above explanation.

4. Which HTML property can make the alignment of texts for an HTML document?

See Answer

Please refer to the above explanation.

5. Which HTML property can make the font of texts for an HTML document?

See Answer

Please refer to the above explanation.

6. Which HTML property can adjust the size of texts for an HTML document?

See Answer

Please refer to the above explanation.