CSS Text

Apart from the various CSS font properties, there are other properties that can use to style your text.

For example, you can change the color of text, align text, add decoration properties and many more.

Following are the CSS text properties:

Text Color

The color property is defined to set the color of the text.

Text-color can be set by using the name “blue”, hex value “#0000ff” or by its RGB value “rgb( 0, 0, 255)”.

Example:

h1 {

color: blue;

}

h2 {

color: #0000ff;

}

p {

color: rgb(0,0,255);

}

Try it

Text Alignment

The text-align property is defined to set the horizontal alignment of a text.

The values for this property are: left, right, center, justify, and inherit.

Example:

h1 {

text-align: center;

}

h2 {

text-align: left;

}

p {

text-align: right;

}

Try it

In justified alignment, the line is stretched so that every line has equal width, and the left and right margins are straight.

Example:

div {

text-align: justify;

}

Try it

Text Decoration

Text decoration property is used to add or remove decorations from the text.

By using underline, overline, and line-through you can add the decoration. And set “none” to remove the decoration.

Example:

h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through;

}

p {

text-decoration: none;

}

Try it

Text Transformation

Text transformation property is used to set the case of text, uppercase or lowercase.

Text transformation can be uppercase, lowercase or capitalize.

Capitalize is used to change the first letter of each word to uppercase.

Example:

h1 {

text-transform: uppercase;

}

h2 {

text-transform: lowercase;

}

h3 {

text-transform: capitalize;

}

Try it

Text Indentation

The text-indent property is defined to set the indentation of the first line of text of an element.

You can give the values for the text-indent property are: percentage (%), length (specifying indent space) or inherit.

Example:

div {

text-indent: 30px;

}

Try it

Word Spacing

The word-spacing property is used to set the spacing between the words.

Example:

p {

word-spacing: 15px;

}

Try it

Letter Spacing

The letter-spacing property is used to add or subtract space between the characters of the text.

Example:

h1 {

letter-spacing: 10px;

}

p {

letter-spacing: -5px;

}

Try it

Line Height

The CSS line-height property is used to set the height of a line of text.

Negative values for this property are not allowed.

Example:

h1 {

line-height: 1.2;

}

p {

line-height: 0.8;

}

Try it

Text Direction

The direction property is used to specify the text direction of an element

Example:

In this example, “rtl” is right to left direction and “ltr” is left to right direction.

h1 {

direction: rtl;

}

h2 {

direction: ltr;

}

Try it

Text Shadow

The text-shadow property is used to add the shadow to text.

Example:

In this example, 2px is the position of the horizontal shadow, 1px is the position of the vertical shadow and blue is the color of the shadow.

h1 {

text-shadow: 2px 1px blue;

}

Try it

White Space

The white-space property describes how white-space inside an element is handled.

The possible values are: normal, nowrap, pre, pre-line, pre-wrap, initial, inherit.

Example:

p.normal {

white-space: normal;

}

p.pre {

white-space: pre;

}

p.nowrap {

white-space: nowrap;

}

Try it

Vertical Align

The vertical-align property is used to set the vertical alignment of an element. By using this property, you can set an image position as middle, top, bottom, etc.

The possible values are: baseline, top, bottom, middle, sub, super, text-top, text-bottom, initial, inherit, and you can give the length also.

Example:

img.baseline {

vertical-align: baseline;

}

img.sub {

vertical-align: sub;

}

img.super {

vertical-align: 10px;

}

Try it