Home »
CSS
Text Formatting in CSS
CSS text formatting: Here, we are going to learn about the text formatting in CSS, how to apply various text formatting using CSS properties?
Submitted by Anjali Singh, on October 15, 2019
CSS text formatting
CSS text properties allow you to style your text in various ways very easily. Such as color, alignment, spacing, direction, etc.
Text Color (color property)
The color property is defined by the CSS. We can either write the name of the color or the color code to use our color on the site.
Syntax:
Element{
color:white; //#000000
}
Example:
<!DOCTYPE html>
<head>
<style>
h1 {
color: red;
}
p {
color: green;
}
</style>
</head>
<html>
<body>
<p>HELLO WORLD!</p>
<h1>HEADING</h1>
</body>
</html>
Output
Text Alignment (text-align property)
text-align property is used to align text horizontally. The possible values of this property could be: left, right, center, justify and inherit.
Syntax:
Element{
text-align:right;
}
Example:
<!DOCTYPE html>
<head>
<style>
h1 {
Text-align: center;
}
p {
Text-align: right
}
</style>
</head>
<html>
<body>
<p>HELLO WORLD!</p>
<h1>HEADING</h1>
</body>
</html>
Output
Text Decoration (text-decoration property)
The text-decoration property is used to remove or set decorations from the text. The possible values of this property could be: none, underline, overline, blink, line-through and inherit.
Syntax:
Element{
text-decoration: overline;
}
Example:
<!DOCTYPE html>
<head>
<style>
h1 {
text-decoration: none;
}
h2 {
text-decoration: overline;
}
</style>
</head>
<html>
<body>
<h1>HELLO WORLD!</h1>
<h2>HEADING</h2>
</body>
</html>
Output
Text Transformation (text-transform property)
The text-transform property is used to change the cases of the text for example, it sets the case to lowercase or uppercase or just makes the initial letter capital. Possible values could be: none, capitalize, lowercase, uppercase and inherit.
Syntax:
Element{
text-transform: none;
}
Example:
<!DOCTYPE html>
<head>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<html>
<body>
<p> Some content</p>
</body>
</html>
Output
Text Indentation (text-indent property)
The text-indent property comes in use when we have to indent the first line of text of any element. This property comes with the following values: percentage, length (specifying space) and inherit.
Syntax:
Element{
text-indent: 50%;
}
Example:
<!DOCTYPE html>
<head>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<html>
<body>
<p> Some content</p>
</body>
</html>
Output
Word Spacing (word-spacing property)
The word-spacing property deals with the spacing between the words. Possible values are: length, normal and inherit.
Syntax:
Element{
word-spacing: 20px;
}
Example:
<!DOCTYPE html>
<head>
<style>
p {
word-spacing: 50px;
}
</style>
</head>
<html>
<body>
<p> Some content</p>
</body>
</html>
Output
Letter Spacing (letter-spacing property)
The letter-spacing is a very useful property when it comes to putting spaces between the letters of the words. This can also have negative values as well. Its values are the same as word-spacing: normal, length and inherit.
Syntax:
Element{
letter-spacing: 10px;
}
Example:
<!DOCTYPE html>
<head>
<style>
h1 {
letter-spacing: -3px;
}
</style>
</head>
<html>
<body>
<h1>Some content</h1>
</body>
</html>
Output
Line Height (line-height property)
The line-height or leading property defines the height of a line of a text. Its possible values are length, percentage, inherit, number and normal.
Syntax:
Element{
line-height:50%;
}
Example:
<!DOCTYPE html>
<head>
<style>
p {
letter-spacing: 3px;
}
</style>
</head>
<html>
<body>
<h1>Test page</h1>
<p>
IncludeHelp site is specially designed to provide help to students,
working professionals and job seekers. We are fully dedicated to make each tutorial
very simple to learn and understand. This site is not created for business purpose,
but for spreading education about programming languages and to help the concerned learners
out who are enthusiastic to learn new technologies.
</p>
</body>
</html>
Output
CSS Tutorial & Examples »