Formatting Text in CSS

CSS Web Development Front End Technology

CSS allows us to format text to create visually appealing content. The following properties are used to style text using CSS.

color

This property helps us change the text color.

letter-spacing

This property is used to set the spacing between characters.

line-height

The height of a line is specified using this property.

text-align

The horizontal alignment of the text is controlled by text-align property.

text-decoration

To underline, strikethrough or overline and style it, text-decoration is used.

text-indent

The indentation of the first line of an element is set by the text-ident property.

text-shadow

To display a shadow around text, the text-shadow property is used.

text-transform

The case of text can be set with the text-transform property.

word-spacing

The space between words can be set with this property.

Syntax

The syntax of font-variant property is as follows −

Selector {
   font-variant: /*value*/
}

Example

The following examples illustrate text formatting in CSS.

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
   content: "DEMO ";
   text-align: center;
   text-decoration: line-through;
   color: orange;
}
article {
   width: 600px;
   text-align: justify;
   text-shadow: -10px -5px lightgreen;
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<article>This is demo text. Here, we are displaying different ways to format text.</article>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   display: flex;
   float: left;
   word-spacing: 30px;
   box-shadow: inset 0 0 6px violet;
}
div::after {
   content: " ";
   border: 8px solid green;
}
div + div{
   background-color: indianred;
   width: 200px;
   color: white;
   text-align: justify;
}
</style>
</head>
<body>
<div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div>
<div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div>
</body>
</html>

Output

This gives the following output−

AmitDiwan

Published on 06-Jan-2020 08:01:39

Previous Page Print Page