CSS font-size

The CSS font-size property is used when we need to define the size of a font. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #myp{font-size: 160%;}
   </style>
</head>
<body>

   <h2>The font-size Property</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   <p id="myp">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   
</body>
</html>
Output

The font-size Property

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

CSS font-size Syntax

The syntax of font-size property in CSS, is:

font-size: x;

The value of x should be any of the following:

  • xx-small - used to make the font-size smallest
  • x-small - used to make the font-size second smallest
  • small - used to make the font-size small
  • smaller - used to make the font-size smaller
  • medium - used to make the font-size medium
  • larger - used to make the font-size larger
  • large - used to make the font-size large
  • x-large - used to make the font-size more larger
  • xx-large - used to make the font-size larger than x-large
  • length - Unlike all the above and below, it is not a keyword. The length units like 22px, 120%, 1.4em etc. are used to define custom sized font.
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS font-size Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #a{font-size: xx-small;}
      #b{font-size: x-small;}
      #c{font-size: small;}
      #d{font-size: smaller;}
      #e{font-size: medium;}
      #f{font-size: larger;}
      #g{font-size: large;}
      #h{font-size: x-large;}
      #i{font-size: xx-large;}
      #j{font-size: 14px;}
      #k{font-size: 24px;}
      #l{font-size: 90%;}
      #m{font-size: 140%;}
      #n{font-size: 1em;}
      #o{font-size: 1.4em;}
   </style>
</head>
<body>

   <h2>Without font-size</h2>
   <h2 id="a">font-size: xx-small</h2>
   <h2 id="b">font-size: x-small</h2>
   <h2 id="c">font-size: small</h2>
   <h2 id="d">font-size: smaller</h2>
   <h2 id="e">font-size: medium</h2>
   <h2 id="f">font-size: larger</h2>
   <h2 id="g">font-size: large</h2>
   <h2 id="h">font-size: x-large</h2>
   <h2 id="i">font-size: xx-large</h2>
   <h2 id="j">font-size: 14px</h2>
   <h2 id="k">font-size: 24px</h2>
   <h2 id="l">font-size: 90%</h2>
   <h2 id="m">font-size: 140%</h2>
   <h2 id="n">font-size: 1em</h2>
   <h2 id="o">font-size: 1.4em</h2>
   
</body>
</html>
Output

Without font-size

font-size: xx-small

font-size: x-small

font-size: small

font-size: smaller

font-size: medium

font-size: larger

font-size: large

font-size: x-large

font-size: xx-large

font-size: 14px

font-size: 24px

font-size: 90%

font-size: 140%

font-size: 1em

font-size: 1.4em

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋