X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS font-size Property

The font-size property is used to set the font size of the text.

Font size can be defined by following ways:

  • absolute-size
  • relative-size
  • length
  • percentage

Absolute font size include following values:

  • xx-small
  • x-small
  • small
  • small
  • x-large
  • xx-large

Relative font size include following values:

  • smaller
  • larger

Lengths include relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc). Percentages specify an absolute font size relative to the parent element's font size.

Initial Value medium
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes.
Version CSS1
DOM Syntax object.style.fontSize = "15px";

Syntax

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 { font-size: 24pt; }
      h3 { font-size: 26px; }
      p { font-size: 1em; }
      a { font-size: 100%; }
      span { font-size: x-small; }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span> 
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>

Values

Value Description
medium Sets the font-size to medium. This is the default value of this property.
xx-small Sets the font-size to xx-small.
x-small Sets the font-size to x-small.
small Sets the font-size to small.
large Sets the font-size to large.
x-large Sets the font-size to x-large.
xx-large Sets the font-size to xx-large.
smaller Smallers the font-size.
larger Largers the font-size.
length Specifies the font-size by px, em etc.
% Sets the font-size to a percent of the parent element's font size.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 7+.0

Practice Your Knowledge

What is the correct CSS syntax for making all the <p> tag's font size 16px?



Do you find this helpful?

Related articles