CSS - font-size

Description

The font-size property affects the size of an element's text.

Possible Values

xx-small − Sets the element's text to be a size smaller than that which results from the value x-small.
x-small − Sets the element's text to be a size smaller than that which results from the value small.
small − Sets the element's text to be a size smaller than that which results from the value medium.
medium − Sets the element's text to be a size smaller than that which results from the value large, and larger than that which results from the value small.
large − Sets the element's text to be a size larger than that which results from the value medium.
x-large − Sets the element's text to be a size larger than that which results from the value large.
xx-large − Sets the element's text to be a size larger than that which results from the value x-large.
larger − Sets the element's text to be larger than that of its parent.
smaller − Sets the element's text to be smaller than that of its parent.
length − Any permitted length value. Negative length values are not permitted for font-size.
percentage − Sets the element's text size relative to that of its parent.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontSize = "12pt";

Example

Here is the example using this property −

Live Demo

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

This will produce following result −