There are many tags present in HTML which can represent textual data on the web page, and <p>, <h1>, <h2>, etc are the common ones. By the end of this tutorial, you will know about all the important CSS properties which are used to manipulate or style the text content of a web-page.
Common Text Properties
| Properties | Description |
| color | It is used to change the color of the element text content. |
| direction | This property can set the direction of the text content. |
| letter-spacing | It can manipulate the spacing between the letters. |
| word-spacing | It can manipulate the spacing between the words. |
| text-indent | It defines how much a text should be indented. |
| text-decoration | It can underline, overline and strikethrough a text. |
| text-transform | It can change the casing of the text. |
| white-space | It can style the white spacing. |
| text-shadow | This property defines the text shadow. |
Text Color
color is the most common property in CSS, and generally, it is used to color the text content of an element. There are other properties in CSS associated color, such as border-color which is used to color the border of an element. color property can accept different types of value. For example, we can use hex code, rgb() function or direct color name to provide value to our color property.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p> It's a paragraph</p>
</body>
</html>
Preview
It's a paragraph
Text Direction
By default, the browser shows the textual content from left to right but this property can be changed using the direction property. With the help of direction property, we can specify the writing direction of the text content.
direction values
- ltr: It set the direction from left to right
- rtl: It set the direction of text from right to left
- initial: It set the direction value to its default value.
- inherit: It set the direction value according to its parent element.
Example
<html>
<head>
</head>
<body>
<p style = "direction:rtl; border: 2px solid red;">It's a Paragraph
</p>
</body>
</html
Preview
It's a Paragraph
Space between the letter
The letter-spacing property defines the spacing between the letters. And its values can be defined using length units such as cm, em, px etc.
Example
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px ; border: 2px solid red;">
It's a Paragraph
</p>
</body>
</html>
Preview
It's a Paragraph
Space between the words
The word-spacing property is similar to letter-spacing, but it defines the spacing between two words.
Example
<html>
<head>
</head>
<body>
<p style = "word-spacing:10px ; border: 2px solid red;">
It's a Paragraph
</p>
</body>
</html>
Preview
It's a Paragraph
Text indentation property
The CSS text-indent property defines the indentation of the text first line. It accepts values in length and % unit.
Example
<html>
<head>
</head>
<body>
<p style = "text-indent: 20% ; border: 2px solid red;">
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and
then choose the elements you want from the different galleries.
</p>
</body>
</html>
Preview
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Align the Text
Using the text-align property we can align a text either left, right, center or justify.
align values
- right
- left
- center
- justify
Example
<html>
<head>
</head>
<body>
<p style = "text-align: center; border: 2px solid red;">
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in
the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs
that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and
then choose the elements you want from the different galleries.
</p>
</body>
</html>
Preview
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Decorate a text
Using the CSS text-decoration property, we can provide various styling to a text. For example, we can underline a text or stick throw it.
Example
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
underline text
</p>
<p style = "text-decoration:line-through;">
Stricked Text
</p>
<p style = "text-decoration:overline;">
Overlined Texxt
</p>
</body>
</html>
Change the Text case
The casing of a text can be manipulated using text-transform property. It accepts values like capitalize which capitalize the first letter of every word, uppercase which uppercase every letter and lowercase which lowercase every letter.
Example
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
Its a paragraph
</p>
<p style = "text-transform:uppercase;">
Its a paragraph
</p>
<p style = "text-transform:lowercase;">
Its a paragraph
</p>
</body>
</html>
Preview
Its a paragraph
Its a paragraph
Its a paragraph
CSS White Space
By default, the browser removes the extra white space with single white-space, but this property of browser can be manipulated using the white-space property.
Example
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
The browser will show this paragraph
as is has written with all white
spaces and line brakes
</p>
</body>
</html>
Preview
The browser will show this paragraph as is has written with all white spaces and line brakes
Text Shadow
The text-shadow property generally provides a 3D look to a text. With this property, we can add shadow to a text. It accepts four values at once horizontal length, vertical length, blur radius and color.
Syntax
text-shadow : h-shadow v-shadow blur-radius color.
Example
<html>
<head>
</head>
<body>
<p style = "text-shadow: 4px 5px 3px red">
This is a paragraph
</p>
</body>
</html>
Preview
This is a paragraph
Summary
- The text content can be represented using various HTML tags.
- The colour property defines the colour of the text.
- The direction property defines the writing direction of a text.
- The letter-spacing and word-spacing property define the spacing between text’s words and letters.
- The text-indent property defines the indentation for the first line.
- The text-align property aligns the text centre, left, right or justify.
- The text-decoration property provides various styling to the text.
- The text-transform property can manipulate the text casing.
- The white-space property deals with the default behaviour of removing extra space.
- The text-shadow property provides the text-shadow.