Styling Text

Formatting and styling text.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text

CSS Properties

font-family

https://developer.mozilla.org/en-US/docs/Web/CSS/font

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

The font to use.

@font-face

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Define a font to use in a font-family.

font-size

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Set font size in px, rem, or other units.

Relative font sizes (smaller, larger). https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size

Absolute font sizes (x-small, large). https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size

*See the table on the absolute-size page to learn how default heading sizes are defined.

color

https://developer.mozilla.org/en-US/docs/Web/CSS/color

Set text color in hex codes, color names, hsl, or other units.

line-height

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

The height reserved for a line of text (not the rendered font size).

text-decoration

Text decoration style shorthand.

text-decoration-style

text-decoration-thickness

text-decoration-color

text-decoration-line

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

::first-letter

Style the first letter of an element.

This is hard to debug, as browsers don't show the style in the inspector.

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

::first-line

Style the first line of text.

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

Wrapping and breaking text

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text

overflow-wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

word-break

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

white-space

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

white-space-collapse

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse

Accessibility

Long lines of text can be hard to read when the eye has to jump across the screen to the beginning of the next line.

A line length of 50-120 characters is recommended.

Level
Topics