CSS - Text Formatting

CSS provides us the option to format text in the most suitable way.

At first let us look at the text color.

Text Color in CSS

Example :

<html>
<head>
	<style>
		p {
  			color: red;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have used the color property and set its value to red.

<style>
	p {
		color: red;
	}
</style>

Let us look at text alignment next.

Text Alignment in CSS

Example :

<html>
<head>
	<style>
		p {
  			text-align: right;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have used the text-align property and set its value to right.

<style>
	p {
		text-align: right;
	}
</style>

So, if you see the above output, the text This is the first paragraph. is aligned all the way to the right side.

The other values the text-align property can have is left, center and justify.

Next, let us look at text decoration line in CSS.

Text decoration line in CSS

The text-decoration-line can be used to draw a line for text decoration. The line can be drawn over the text, drawn under the text or drawn striking the text.

Let us see them with the below example.

Example :

<html>
<head>
	<style>
		p.underline {
  			text-decoration-line: underline;
  		}
		p.overline {
  			text-decoration-line: overline;
  		} 
 		p.line_through {
  			text-decoration-line: line-through;
  		}
		p.overline_underline {
  			text-decoration-line: overline underline;
  		}  		 		 		
	</style>	
</head>
	
<body>
	<p class="underline"> 
		This is to demonstrate an underline.
	</p>
	
	<p class="overline"> 
		This is to demonstrate overline.
	</p>
	
	<p class="line_through"> 
		This is to demonstrate line through.
	</p>
	
	<p class="overline_underline"> 
		This is to demonstrate both overline and underline.
	</p>			
</body>
</html>

Output :

So, if you look at the above example, we have defined four values for the text-decoration property. i.e. underline, overline, line-through and overline underline.

The values are quite self explanatory. The lines are drawn according to the values provided in the CSS properties.

<style>
	p.underline {
		text-decoration-line: underline;
	}
	p.overline {
		text-decoration-line: overline;
	}

		text-decoration-line: line-through;
	}
	p.overline_underline {
		text-decoration-line: overline underline;
	}
</style>

We can further decorate the lines using the following properties :

text-decoration-color

Provides a color to the line.

text-decoration-style

It is used to apply styles to the line.

text-decoration-thickness

It is used to adjust the size of the line.

Let us understand the above properties with the below example.

Example :

<html>
<head>
	<style>
		p {
  			text-decoration-line: underline;
  			text-decoration-color: red;
  			text-decoration-style: wavy;
  			text-decoration-thickness: 5px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have drawn a wavy line that is red in color and has a thickness of 5px. And the line is drawn under the text.

Just note that all the above properties can be clubbed into a single property called text-decoration.

Let us rewrite the above example with text-decoration property.

Example :

<html>
<head>
	<style>
		p {
  			text-decoration: underline wavy red 5px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

Text-transform property in CSS

The text-transform property in CSS is used to convert all the letters in uppercase or lowercase or capitalise the first letter of a text.

Example :

<html>
<head>
	<style>
		p.uppercase {
  			text-transform: uppercase;
  		}
		p.lowercase {
  			text-transform: lowercase;
  		} 
 		p.capitalize {
  			text-transform: capitalize;
  		} 		 		 		
	</style>	
</head>
	
<body>
	<p class="uppercase"> 
		This is to convert all letters to uppercase.
	</p>
	
	<p class="lowercase"> 
		This is to convert all letters to lowercase.
	</p>
	
	<p class="capitalize"> 
		This is to convert the first letter of the word to uppercase.
	</p>			
</body>
</html>

Output :

Text-shadow property in CSS

The text-shadow property in CSS is used to add a shadow to the text.

Example :

<html>
<head>
	<style>
		p {
  			text-shadow: 2px 2px;
            font-size: 50px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above output, the text, This is the first paragraph has a shadow in it.

And that is because of the text-shadow property whose value is 2px and 2px.

text-shadow: 2px 2px;

We have increased the font size so that the shadow is better visible.

There are other values, we can provide to the text-shadow property. i.e. If we want to apply color and give a blur effect, you can provide two more values for text-shadow property.

Example :

<html>
<head>
	<style>
		p {
  			text-shadow: 2px 2px 4px red;
            font-size: 50px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example we have provided four values for the text-shadow property.

First two values(i.e. 2px and 2px) gives a shadow effect.

The next value(i.e. 4px) gives a blur effect.

The the last value(i.e. red) makes the text red in color.

❮❮ PREV NEXT ❯❯