- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
<!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
<!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−
- Related Questions & Answers
- Formatting Text Using CSS
- HTML Text Formatting
- Control the flow and formatting of text with CSS
- Understanding CSS Visual Formatting
- CSS Visual Formatting Model
- Formatting Unordered and Ordered Lists in CSS
- Formatting Unordered and Ordered Lists Using CSS
- Text Decoration in CSS
- CSS Text Shadow
- Decorate a text in CSS
- text-justify Property in CSS
- Indent Text with CSS text-indent Property
- Underline text with CSS
- Strikethrough text with CSS
- Capitalize text with CSS