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:

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 »


Liked this post? Share it!