CSS Text & Fonts

Text Color

This paragraph uses the default text color for a page, which is black.

This paragraph uses a class style defined as blue.

This paragraph uses a class style defined as green.

Text Align

Paragraph is aligned left

Paragraph is aligned center

Paragraph is aligned right

Text Align Justify

The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text Decoration

Paragraph has overline

Paragraph has underline

Paragraph has linethrough

Text Transformation with Indent

This is some text in upper case with an indent

This is some text in lower case.

This is some text being capitalized.

Text with Line Height

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

Text with Direction, Word Spacing and Shadow

This is the default text direction.

This is right-to-left text direction.

This paragraph has positive word spacing.

This paragraph has negative word spacing.

This paragraph has shadow

Font Family

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

Font Style and Size

This is normal font of size 14px.

This is italic font of size 30px.

This is oblique font of size 40px.

This is font size of 1em.

This is font size of 1.5em.

This is font size of 2em.

Font Weight

This is a paragraph with font weight normal.

This is a paragraph with font weight lighter.

This is a paragraph with font weight bold.

This is a paragraph with font weight thicker.