CSS offers various properties that enable you to define different text styles like color, alignment, spacing, decorations, and more in a simple and effective manner.
The commonly used text styling properties include: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more. These properties give you precise control over how the characters, words, and spaces appear.
Let's delve into setting these text properties for an element with more detail.
The color of text is specified using the CSS color property.
The following example demonstrates how to set the default text color for a page:
body {
color: #434343;
}Although the color property seems like it would belong to the CSS text, it is actually a separate property in CSS. Refer to the CSS color tutorial to learn more about it.
The text-align property is used to set the horizontal alignment of text.
Text alignment options include: left, right, center, or justified (straight left and right margins).
Here's an example to understand how this property works:
h1 {
text-align: center;
}
p {
text-align: justify;
}Note: When text-align is set to justify, each line is stretched to have equal width (except the last line), and the left and right margins are straight. This alignment is commonly used in publications like magazines and newspapers.
Let's refer to the illustration below to understand what these values represent:
The text-decoration property controls text decorations.
This property accepts values like: underline, overline, line-through, and none. It's best to avoid underlining text that isn't a link, as it can confuse visitors.
Here's an example to understand how it works:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}The text-decoration property is often used to remove the default underline from HTML hyperlinks. You can replace it with other visual cues, like a dotted border.
Here's an example:
a {
text-decoration: none;
border-bottom: 1px dotted;
}Note: Browsers automatically underline HTML links using their built-in style sheets, making clickable text visible to readers.
The text-transform property alters the case of text.
While text is often written in mixed case, there are situations where you may want to display it differently. This property enables you to change text to uppercase, lowercase, or capitalize the first letter of each word.
Here's an example:
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}The text-indent property adjusts the indentation of the first line of text within a block.
This can be done by adding space before the first line of text, and the size of the indentation can be specified using percentage (%), pixel values, ems, etc.
For example, the following style rule indents the first line of paragraphs by 100 pixels:
p {
text-indent: 100px;
}Note: The direction of text inside the element determines whether the text is indented from the left or right, as defined by the CSS direction property.
The letter-spacing property adds extra spacing between characters.
This property accepts length values in pixels, ems, etc., and can also accommodate negative values. When you set letter spacing, providing a length value adds space between characters on top of the default space between them.
Here's how it works:
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}The word-spacing property adds extra spacing between words.
This property accepts length values in pixels, ems, etc., including negative values.
Here's an example:
p.normal {
word-spacing: 20px;
}
p.justified {
word-spacing: 20px;
text-align: justify;
}
p.preformatted {
word-spacing: 20px;
white-space: pre;
}Note: Word spacing can be influenced by text justification, and even though whitespace is preserved, spaces between words are affected by the word-spacing property.
The line-height property controls the height of text lines.
It's also known as leading and is commonly used to adjust the spacing between lines of text.
This property accepts values like numbers, percentages (%), or lengths in pixels, ems, etc.
p {
line-height: 1.2;
}When using a number value, the line height is calculated by multiplying the element's font size by the number. The percentage values are relative to the element's font size.
Note: Negative values for line-height are not allowed. This property is also part of the CSS font shorthand property.
If the line-height value is greater than the font-size value for an element, the difference (known as "leading") is divided in half and distributed evenly above and below the inline box. Here's an example:
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}Refer to the CSS3 text overflow tutorial in the advanced section to learn about handling overflowed text. Also, see the CSS3 text shadow section to learn about applying shadow effects to text.