CSS/Properties/font-size

From Web Education Community Group
Jump to: navigation, search

font-size

The font-size property sets size of the text.

Description

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


Values

  • <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

Example A

[style.css]

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; }

[index.html]

<body>
  <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>
</body>

Csslist2 font-size.png

CSS Reference

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