Text Properties in CSS

Tweet

Text Properties in CSS helps text to aligning the text, spacing it, decorating it and even some more. There are eight text-related CSS properties which are indent, align, letter-spacing, word-spacing, line-height, decoration, transform and vertical-align.

1. Text-Indent property

The text-indent property sets the start position of the text in the element(either para or lists, etc...) to the right if there is a positive value.

p {
   text-indent: 3em;
}

If you set a negative value, the first line will overflow to the left from the other lines and sometimes the overflowed text may get hidden from the view which can be avoided by the following code,

p {
   text-indent: -1.5em;
   margin-left: 2em;
   border: 1px solid red;
}

Another information you need to note that is, text-indent is inherited to its child elements. So, if the parent element has a value of 0.8em and its child element has a value of 0.8em, the child element will be indented to 0.64em (0.8*0.8).

2. Letter-Spacing property

The letter spacing property make an overall spacing between letters and it can be either positive or negative value.

p {
   letter-spacing: 0.2em;
}

It's recommended to use relative values like ems or percentage, rather than absolute values, so that the spacing remains propotional even if user changes the font size.

3. Word-Spacing property

The word spacing property just like letter spacing, make an overall spacing between the words.

4. Text-Decoration property

The text decoration property, decorates the text using the underline, overline, line-through and blink values.

p {
   text-decoration: underline;
}
p.important {
   text-decoration: overline;
}
p.strike {
   text-decoration: line-through;
{
p.blink {
   text-decoration: blink;
}
p.none {
   text-decoration: none;
}

If the text is already decorated, but if you do not want to, then you can use the none value.

5. Text-Align property

The text align properties consists of four values which aligns the text element on the left, right, center and even justifies it.

p.left {
   text-align: left;
}
p.right {
   text-align: right;
}
p.center {
   text-align: center;
}
p.justify {
   text-align: justify;
}

6. Line-Height property

The line height property helps to change the line space between the lines overall of an element.

p {
   line-height: 2em;
}

7. Text-Transform property

The text transform property is used to transform the text into uppercase, lowercase and capitalize(capitalizes the letter of each word). If you do not want these properties, then you can use none value.

p.capitalize {
   text-transform: capitalize;
}
p.uppercase {
   text-transform: uppercase;
}
p.lowercase {
   text-transform: lowercase;
}
p.none {
   text-transform: none;
}

8. Vertical-Align property

One can use the vertical align property to align the text(s) vertically using the values such as sub(subscript), sup(superscript), top, middle, bottom and numerical values. When using the values like sub, sup reduce the font size of the element for better presentation.

p.sub {
   vertical-align: -0.25;
   font-size: 65%;
}
p.sup {
   vertical-align: sup;
   font-size: 65%;
}