Formatting Text Using CSS

CSS Web Development Front End Technology

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 −

Live Demo

<!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

Live Demo

<!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 −

Live Demo

<!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>