Text Styles

The different text styles such as text-align, text-indent, and text-transform provide different values that allow specifying the alignment, indentation, and casing of text in an element.

The text-align property allows the text to be centered, or left or right aligned, or justified.

left It is used for aligning the text to the left of the Web page.

right It is used for aligning the text to the right of the Web page.

center It is used for aligning the text in the middle of the Web page.

justify It is used for justifying the text on both sides of the Web page.

As discussed the text-indent property is used for specifying the indentation of the text.

length It is used in specifying field indentation and the default value is 0.

% It is used in specifying an indentation as a percentage of the width of the parent element. The parent element is the element within which the selector element is defined.

The text-transform property is for changing the case of letters in a text.

lists the values of text-transform property.

none It is used in specifying that the text will be displayed with the same casing as written within the element.

capitalize It is used in specifying that the first letter of each word will be capitalized.

uppercase It is used in specifying only uppercase letters.

lowercase It is used in specifying only lowercase letters.

CSS Code
Figure displays a CSS code that specifies the text styles for the DIV element. The
text-align property is set to left which will align the text towards the left The
text-indent property is set to 2em, which will indent the text with respect to the
font size. The text-transform property is set to uppercase, which will display all the
letters in uppercase.

The text specified in the DIV element is aligned towards the lef and all the lettrs are
displayed in uppercase

Figure shows output.

The text-decoration and word-spacing properties provides different values that allow the user to specify the decoration and word spacing of text in an element.

lists the values assigned to the text-decoration property.
none It is used for displaying normal text without any formatting.

underline It is used for displaying a line under the text.

overline It is used for displaying a line over the text.

line-through It is used for displaying a line through the text.

blink It is used for flashing the text.

lists the values assigned to the word-spacing property.

normal It is used in specifying normal spacing between words and it is the default value.

length It is used in specifying field space between words.

Figure displays a CSS code that specifies the text properties for the BODY and H3
elements. The word-spacing property is set to 2px for the BODY element. This will
display each word by leaving a distance of two pixels. The text-decoration property is
set to underline for the H3 element. This will underline the heading in the Web page.