CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.
Formatting Text with CSS
CSS has several properties for defining the styles of text. These properties give you precise control over the visual appearance of the characters, spaces, words, paragraphs, etc.
You can set following text properties of an element:
Note:Although, the color of the text seems like it would be a part of the CSS text, but it is actually a standalone property in CSS.
text-align property is used to set the horizontal alignment of a text.
Possible values for this property are:
text-align is set to
justify, each line is stretched so that every line has equal width, and the left and right margins are straight.
text-decoration property is used to set or remove decorations from text.
Possible values of this property are:
inherit. You should avoid underline text that is not a link, as it might confuse the visitor.
blink value for the CSS
text-decoration property is not supported by the most of the browsers. You should avoid this value.
Removing the Links Default Underlines
text-decoration property is commonly used to remove the default underlines from the hyperlinks. Removing the underline completely can confuse the visitor. Unless you provide some other visual cues to make it stands out, while styling the links.
For example, you can use dots to underline your links instead of a solid line.
border-bottom: 1px dotted;
Note:When you create an HTML link, browsers built in style sheet automatically underline it, so that the readers can see what text is clickable.
text-transform property is used to set the cases for a text.
It can be used to set the element's text content into uppercase or lowercase letters, or capitalize the first letter of each word. Possible values for the
text-transform property are:
text-indent property is used to set the indentation of the first line of text of an element. Possible values for the
text-indent property are: percentage (
%), length (specifying indent space) or
The following example demonstrates how to indent the first line of a paragraph.
Note:Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS
word-spacing property used to sets the spacing between the words.
- Word spacing can be affected by text justification. See the
- When whitespace is preserved all space characters are affected by the word spacing. See the CSS
Possible values for the
word-spacing property are: length (specifying the space to be inserted between words),
letter-spacing property is used to set extra spacing between the characters of text.
Possible values for this property are: length (specifying the extra space to be inserted between characters in addition to the default inter-character space),
line-height property defines height (also called leading) of a line of text.
Possible values for this property are: percentage (
%), length, number,
When the value is a number, the line height is calculated by multiplying the element's font size by the number. While, percentage values are relative to the element's font size.
Note:Negative values for this property are not allowed. This property is also a component of the font shorthand property.
If the value of the
line-height property is greater than the value of the
font-size for an element, this difference (called the "leading") is cut in half (called the "half-leading") and distributed evenly on the top and bottom of the in-line box.