Skip to main content
CSS is fun and cool and I like it.
Almanac

font-family

The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a “family”, and thus may be dependent on other typographic property values to select the correct face within the family.

body {
    font-family: Arial, Helvetica, sans-serif;
}

A value can be one of the following:

  • A font family name that matches a font that is embedded on the page or available on the user’s system.
Read article “font-family”
Almanac

font-weight

The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser.

span {
    font-weight: bold;
}

The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:

  • normal
  • bold
  • bolder
  • lighter

The available numeric values are:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

The keyword value normal maps to the numeric value 400 and the … Read article “font-weight”

Almanac

font-variant

The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3.

p:first-line {
    font-variant: small-caps; /* default is `normal` */
}

Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps.

A value of small-caps will render the text in uppercase letters that are smaller than regular uppercase letters. This does not override uppercasing set in the content, inside the markup. … Read article “font-variant”

Almanac

font-style

The font-style property allows you to make text appear italicized (i.e. sloped, or slanted).

em {
  font-style: italic;
}

This property accepts one of three possible values: normal, italic, and oblique.

If a given font family has an italic or oblique face embedded, the browser will select that face. If no italic or oblique face is available, the browser will mimic the sloping effect. If italic is defined and there is no italic face available, the browser … Read article “font-style”