Free CSS course. Sign Up for tracking progress →

CSS: Small caps

Small caps are a type of lowercase letter whose size is the same as (or close to) the size of capital letters.

Text typed as plain text

Text with small caps

This is often used as a stylistic device. But there is also a practical side to small caps: they are commonly used to mark abbreviations, and they are also used in the first lines of a piece of text to make it easier for the reader to get into the text after the title.

To set small caps, use the font-variant property with one of two basic values:

  • normal - normal writing
  • small-caps - small caps

Instructions

Add a paragraph to the editor with the class set to small-capitals and display the text inside as capitals. Add styles to the <style> tag