To format text in CSS, you can change the text color, text decoration, line height, text direction, text alignment, etc.
Let us see some examples −
Text Alignment
To set text alignment using CSS, use the text-align property. Following are the possible property values −
text-align: left|right|center|justify|initial|inherit;
Example
Let us see an example to set text alignment −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: auto auto; /* Chrome, Safari, Opera */
-moz-columns: auto auto; /* Firefox */
columns: auto auto;
text-align: justify;
}
</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. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>Output
Line Height
To set line height, use the line-height property. Followng are the property values −
line-height: normal|number|length|initial|inherit;
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>Output
Text Decorations
For text decoration in CSS, use the text-decoration property as a shorthand property for the following properties −
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;
}
</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>Output
