Uppercase and Letter Spacing

You've already used the text-transform property in the lesson on selectors. It changes the case of the letters:

  • uppercase: all letters are capitals,
  • lowercase: ALL LETTERS ARE SMALL,
  • capitalize: each word starts with a capital letter,
  • none: the letters are as they are in the HTML (the default).

Why not write the heading in capitals right in the HTML? Because here, the capitals are a matter of looks, not of content. The text in the HTML stays as it is, and if we want to change the design later, we only change the CSS.

The letter-spacing property adds space between the letters. Text in capitals usually looks better with a little extra space:

Domestic cat

Domestic cat

A negative value moves the letters closer together. The value is a length, for example in pixels.

Instructions

In the rule for #title, add text-transform: uppercase.

In the same rule, add letter-spacing: 4px.

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

6/8