Common CSS Text and Font Properties Showcase

This template demonstrates the most commonly used CSS text and font properties with examples. Each section covers a key property, its possible values, and a visual example.

Font Properties

`font-family`

Specifies the font for text, e.g., "Arial", sans-serif, "Times New Roman", serif.

This text is in Helvetica, sans-serif.

`font-size`

Sets the size of the font, e.g., 16px, 1.2em, 2rem.

This text is 20px.

`font-weight`

Controls the thickness of the font, e.g., normal, bold, 700.

This text is bold.

`font-style`

Sets the style of the font, e.g., normal, italic.

This text is italic.

`font`

Shorthand for font-style, font-weight, font-size, line-height, font-family, e.g., italic bold 16px/1.5 Arial.

This text uses shorthand font properties.

Text Properties

`color`

Sets the text color, e.g., #ff0000, red, rgb(0, 255, 0).

This text is red.

`text-align`

Aligns text horizontally, e.g., left, right, center, justify.

This text is centered.

`text-decoration`

Sets text decoration, e.g., none, underline, line-through.

This text is underlined.

`text-transform`

Transforms text case, e.g., none, uppercase, lowercase, capitalize.

This text is uppercase.

`line-height`

Sets the height of a line box, e.g., normal, 1.5, 20px.

This text has a line height of 1.8. Lorem ipsum dolor sit amet.

`letter-spacing`

Sets spacing between characters, e.g., normal, 2px, -1px.

This text has increased letter spacing.

`word-spacing`

Sets spacing between words, e.g., normal, 5px, -2px.

This text has increased word spacing.

`text-shadow`

Adds shadow to text, e.g., 2px 2px 4px rgba(0,0,0,0.5).

This text has a shadow.

`white-space`

Controls white-space handling, e.g., normal, nowrap, pre.

This text does not wrap to a new line.

`text-overflow`

Handles overflowed text, e.g., clip, ellipsis.

This text is clipped with an ellipsis if too long.