Text Properties

Font-Size

This is used to set the size of font. There are numerous measurement units, including pixels, points, percentage, em, rem, vw, vh, vmin, and vmax.

p {font-size: 2em;}

Line-Height

Line-height sets the minimum heigth of lines in block elements and the actual line height for inline elements. We can set this to normal, or we can use a value like 50% or 1.6.

p {line-height: 50%;}

Font-Weight

Font-weight simply sets the "boldness" of the text. We can assign a numerical value or use the keywords normal, bold, bolder, lighter, etc. A value of 400 is normal weight, while a number of 700 is bold.

p {font-weight: 700;}

Text-Decoration

This attribute is used to add decoration to text. We can assign values such as none, overline, underline, line-through. Also the lines may have various colors or styles.

p {text-decoration: underline overline dotted red;}

Text-Align

This attribute is used to align text. Possible values include left, right, center, and justify.

p {text-align: right;}

Text-Transform

This attribute controls capitalization of text and can take the values uppercase, lowercase, capitalize.

p {text-transform: capitalize;}

Letter-Spacing

The letter-spacing property alters the space between characters in text. Try using pixel values, such as -3px or 8px.

p {letter-spacing: 5px;}

Word-Spacing

The word-spacing property alters the space between words. The default value is the keyword normal but you can specify a numerical value in pixels, ems, etc. Negative values are also ok.

p {word-spacing: 5em;}

Font-Style

Font-style is used to create slanted text. The keywords are normal, italic, and oblique.

p {font-style: italic;}

Text-Indent

This is used to indent text. Most measurement units are acceptable.

p {text-indent: 2em;}

Text-Align-Last

This attribute is used to control alignment in the last line of a paragraph. Normal alignment values (left, right, justify, center) are accepted.

In the example below, the first line of the paragraph will be indented by 2em and all other lines will be justified (even) on both margins. If the text-align-last attribute is removed, the final line will not be justified--it will be left-aligned only.

p {
text-align: justify;
text-indent: 2em;
text-align-last: justify;
}

White-Space

Possible values include normal, nowrap, pre, pre-line, pre-wrap, initial, and inherit.

Normal causes extra white spaces to collapse into a single white space. Nowrap also collapses multipe spaces into one but prevents line wraps. Pre simply preserves all white spaces such that none are collapsed; so if you type more than one space, those extra spaces will be visible. Pre-line collapses white spaces and allows some wrapping. Pre-wrap maintains white spaces but allows wrapping.

p {white-space nowrap;}

Word-Wrap

The word-wrap property allows long words to break as needed. Set this property to normal or to break-word.

p {word-wrap: break-word;}