Formatting Text in CSS
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−
Published on 06-Jan-2020 12:31:39
