Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Formatting Text Using CSS
To format text in CSS, you can change the text color, text decoration, line height, text direction, text alignment, etc. CSS provides numerous properties to control the visual appearance of text content.
Syntax
selector {
text-align: value;
line-height: value;
text-decoration: value;
}
Text Alignment
To set text alignment using CSS, use the text-align property. Following are the possible property values −
| Value | Description |
|---|---|
left |
Aligns text to the left (default) |
right |
Aligns text to the right |
center |
Centers the text |
justify |
Stretches lines to have equal width |
Example
Let us see an example to set text alignment −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
columns: auto auto;
text-align: justify;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results.
</div>
</body>
</html>
The text appears justified with equal spacing between words, creating straight left and right edges in a two-column layout.
Line Height
To set line height, use the line-height property. Following are the property values −
| Value | Description |
|---|---|
normal |
Default line height (usually 1.2) |
number |
Multiplier of font size (e.g., 1.5) |
length |
Fixed height in px, em, rem, etc. |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 1.9;
border: 1px solid #ddd;
padding: 15px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.</p>
</div>
</body>
</html>
The text appears with increased spacing between lines, making it more readable with 1.9 times the normal line height.
Text Decorations
For text decoration in CSS, use the text-decoration property as a shorthand property for line, color, and style −
text-decoration: text-decoration-line text-decoration-color text-decoration-style;
Example
Let us see an example for text decoration in CSS −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
}
.demo2 {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
The first paragraph appears with both overline and underline decorations. The second paragraph shows strikethrough text decoration.
Conclusion
CSS text formatting properties allow you to control text alignment, spacing, and decorations. These properties help create visually appealing and readable text layouts for web pages.
384 Views
