From W3C Wiki
Jump to: navigation, search


The font-size property sets size of the text.


Values <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial value medium
Applies to All elements
Inherited Yes


  • <absolute-size>
    An <absolute-size> keyword is an index to a table of font sizes computed and kept by the UA. Possible values are:
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large

  • <relative-size>
    A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:
    • larger
    • smaller

  • <length>

  • <percentage>

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


p#xxs{ font-size: xx-small; }
p#xs{ font-size: x-small; }
p#s{ font-size: small; }
p#m{ font-size: medium; }
p#l{ font-size: large; }
p#xl{ font-size: x-large; }
p#xxl{ font-size: xx-large; }


  <p id="xxs">This is a paragraph(xx-small)</p>
  <p id="xs">This is a paragraph(x-small)</p>
  <p id="s">This is a paragraph(small)</p>
  <p id="m">This is a paragraph(medium)</p>
  <p id="l">This is a paragraph(large)</p>
  <p id="xl">This is a paragraph(x-large)</p>
  <p id="xxl">This is a paragraph(xx-large)</p>

Csslist2 font-size.png

CSS Reference

The CSS specification defines the font-size property in 15.7 Font size.