CSS text
Text FormattingIn this lesson, we will learn how to work with text in HTML using different types of CSS text properties.
CSS text Property
The CSS text property is used to change the layout of text. It consists of several sub-properties among which the most frequently used properties are:
- text-align
- text-decoration
- text-transform
- text-indent
- line-height
- letter-spacing
- word-spacing
- white-space
Let's discuss each text property in detail with examples.
text-align
The CSS text-align property is used to set horizontal alignment of text. The values of text-align property are:
- left: It align the text to the left. It is the default value of text-align property.
- right: It align the text to the right.
- center: It align the text to the center.
- justify: It stretch each line so that both the right and left margins are straight.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-align Example</title>
<!-- Internal CSS -->
<style>
p {
text-align: left;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>text-decoration
The CSS text-decoration property is used to add different "decorations" or "effects" to text. The values of text-decoration property are:
- underline: It draws a horizontal line below the text.
- overline: It draws a horizontal line over the text.
- line-through: It draws a horizontal though middle of the text.
- none: It removes any decorations from text and is often used to remove default underlines from hyper links.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration Example</title>
<!-- Internal CSS -->
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>text-transform
The CSS text-transform property is used to control the capitalization of text. The values of text-transform property are:
- uppercase: It transform all letters to uppercase.
- lowercase: It transform all letters to lowercase.
- capitalize: It transform first letter of each word to uppercase.
- none: Default, no transformation (original text).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-transform Example</title>
<!-- Internal CSS -->
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>text-indent
The CSS text-indent property is used to specify the indentation of the first line of text. It is commonly used to indent the first line of paragraphs of text.
The indentation value can be specified in any length unit like px, %, em or rem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-indent Example</title>
<!-- Internal CSS -->
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>line-height
The CSS line-height property is used to control the height of a line box. It is commonly used to set the spacing between lines of text.
The value of line-height property can be specified in unitless numbers like 1.2 or in units like px, or %.
Unitless numbers are multiplied by the element's font-size to get the final line height. Unit in percentage are relative to the font-size.
For example:
If font size is 20px then
A line height of 150% means (20x150)/100 = 30px
A line height of 1.25 means 20*1.25 = 25px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS line-height Example</title>
<!-- Internal CSS -->
<style>
p {
line-height: 30px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>letter-spacing
The CSS letter-spacing property is used to set the spacing between characters or letters in text.
The value of letter-spacing property can be specified in units like px, %, em or rem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS letter-spacing Example</title>
<!-- Internal CSS -->
<style>
p {
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>word-spacing
The CSS word-spacing property is used to set the spacing between words in text.
The value of word-spacing property can be specified in units like px, %, em or rem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS word-spacing Example</title>
<!-- Internal CSS -->
<style>
p {
word-spacing: 10px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>white-space
The CSS white-space property controls how white space, newlines, tabs are handled in text content. The values of white-space property are:
- normal: It is the default value of white-space property. It collapses extra whitespace into single whitespace and the line will wrap automatically if necessary.
- nowrap: It collapses extra whitespace in a single whitespace. Text will never wrap to the next line and continues on the same line.
- pre: It preserves extra whitespace as well as line breaks. Text will wrap to the next line only using line breaks.
- pre-wrap: It preserves extra whitespace as well as line breaks. The text will wrap to the next line automatically when necessary even without line breaks.
- pre-line: It collapses extra whitespace into single whitespace and also preserve line breaks. The text will wrap to the next line automatically when necessary even without line breaks.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS white-space Example</title>
<!-- Internal CSS -->
<style>
p {
white-space: normal;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>