❮ Previous Next ❯

HTML Text Style

HTML style attribute allows to change the background color, text color, text alignment, font-family and font-size.

Syntax of HTML style attribute

<tagname style="property:value;">
1. Changing background color

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

Example for changing background color of the whole page

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Changing background color </title>
</head>

<body style="background-color:#edfaff;">

<p>
We come across many incidents in day-to-day life. But some incidents linger indelibly in our minds such that we could not forget them in our whole life. This is the turning point of being a serious patient in one's life.
</p>

</body>
</html>
Run The code »

Output

We come across many incidents in day-to-day life. But some incidents linger indelibly in our minds such that we could not forget them in our whole life. This is the turning point of being a serious patient in one's life.

In the above example, we set style attribute to the <body> start tag, giving another background color so that the entire page is light blue in the background.

By default, the background color of a webpage is display in white color.

You can also set background-color for a single HTML element.

Example for changing background color of a single HTML element

<p style="background-color:#edfaff;">
 --- Content ---
</p>

<div style="background-color:grey;">
 --- Content ---
</div>
2. Changing text color

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

Example of using color property

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Changing text color </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>
<span style="color:blue;"> Mixture </span> color <span style="color:red;"> paragraph </span>
</p>

</body>
</html>
Run The code »

Output

This paragraph has red text-color.

This paragraph has blue text-color.

Mixture color paragraph

By default, the text is displayed in black color.
3. Changing text alignment

The text-align property defines the alignment of the texts for an HTML element. Four possible values are left, right, center and justify.

Values of text-align property

Value Define
left Left alignment of the content.
right Right alignment of the content.
center Center alignment of the content.
justify Equal lines in length.

Example of using text-align property

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Changing text alignment </title>
</head>
<body>

<p style="text-align:left;">
Left-aligned paragraph.
</p>

<p style="text-align:right;">
Right-aligned paragraph.
</p>

<p style="text-align:center;">
Center-aligned paragraph.
</p>

<p style="text-align:justify;">
It preserves equal line in length.
</p>

</body>
</html>
Run The code »

Output

Left-aligned paragraph.

Right-aligned paragraph.

Center-aligned paragraph.

It preserves equal line in length.

By default, the text-alignment is left.
4. Changing Font family

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

Example of using font-family property

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Changing font family </title>
</head>
<body>

<p style="font-family:Arial;">
This paragraph has Arial font-face.
</p>

<p style="font-family:Verdana;">
This paragraph has Verdana font-face.
</p>

</body>
</html>
Run The code »

Output

This paragraph has Arial font-face.

This paragraph has Verdana font-face.

Globally, there is no default font-family for an HTML webpage since different browser shows different font-face if not specify.
5. Changing Font size

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

Example of using font-size property

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Changing font size </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>

</body>
</html>
Run The code »

Output

This paragraph has 25px font-size.

This paragraph has 20px font-size.

Generally, the value of the font-size is defined in 'px' and 'em'.

Can you answer it?

  1. Which CSS property can change the background color of the whole page or some part?
    background-color property
  2. Which CSS property can change the color of the text?
    color property
  3. Which CSS property can change the alignment of the text for an HTML document?
    text-align property
  4. Which CSS property can change the fonts of the text for an HTML document?
    font-family property
  5. Which CSS property can adjust the size of the text for an HTML document?
    font-size property
❮ Previous Next ❯