CSS - font-size

Advertisements

Previous Page
Next Page  

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 −

Advertisements