CSS Text Formatting
CSS Text Formatting refers to applying styles to text elements to control appearance and layout. This includes properties for color, alignment, decoration, indentation, justification, shadows, spacing, and direction. These properties enhance readability and aesthetics, improving the presentation of textual content on web pages.
Syntax:
The Syntax to write this property:
Selector {
property-name : /*value*/
}
CSS Text Formatting Properties:
These are the following text formatting properties.
| Property | Description |
|---|---|
| text-color | Sets the color of the text using color name, hex value, or RGB value. |
| text-align | Specifies horizontal alignment of text in a block or table-cell element. |
| text-align-last | Sets alignment of last lines occurring in an element. |
| text-decoration | Decorates text content. |
| text-decoration-color | Sets color of text decorations like overlines, underlines, and line-throughs. |
| text-decoration-line | Sets various text decorations like underline, overline, line-through. |
| text-decoration-style | Combines text-decoration-line and text-decoration-color properties. |
| text-indent | Indents first line of paragraph. |
| text-justify | Justifies text by spreading words into complete lines. |
| text-overflow | Specifies hidden overflow text. |
| text-transform | Controls capitalization of text. |
| text-shadow | Adds shadow to text. |
| letter-spacing | Specifies space between characters of text. |
| line-height | Sets space between lines. |
| direction | Sets text direction. |
| word-spacing | Specifies space between words of line. |
Examples of CSS Text Formatting
Example: In this example we demonstrates basic text formatting using CSS. It includes paragraphs with different styles: changing color, aligning center, adding underline, setting indentation, and adjusting letter spacing for improved readability and aesthetics.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Basic Text Formatting</title>
<style>
.text-color {
color: blue;
}
.text-align-center {
text-align: center;
}
.text-decoration {
text-decoration: underline;
}
.text-indent {
text-indent: 20px;
}
.letter-spacing {
letter-spacing: 2px;
}
</style>
</head>
<body>
<p class="text-color">Changing Text Color</p>
<p class="text-align-center">Aligning Text</p>
<p class="text-decoration">Adding Text Decoration</p>
<p class="text-indent">Setting Text Indentation</p>
<p class="letter-spacing">Adjusting Letter Spacing</p>
</body>
</html>
Output:
CSS Text Formatting Example Output
Example: In this example we are showing advanced text formatting using CSS. It applies styles such as adjusting line height, adding text shadow, transforming text to uppercase, setting word spacing, and specifying text direction for diverse visual effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Advanced Text Formatting</title>
<style>
.line-height {
line-height: 1.5;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.text-transform {
text-transform: uppercase;
}
.word-spacing {
word-spacing: 5px;
}
.text-direction {
direction: rtl;
}
</style>
</head>
<body>
<p class="line-height">Changing Line Height</p>
<p class="text-shadow">Applying Text Shadow</p>
<p class="text-transform">Controlling Text Transformation</p>
<p class="word-spacing">Setting Word Spacing</p>
<p class="text-direction">Specifying Text Direction</p>
</body>
</html>
Output:
CSS Text Formatting Example Output
Supported Browser:
Contact Us