Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | font-size Property

  • Difficulty Level : Medium
  • Last Updated : 25 Aug, 2021

The font-size property in CSS is used to set the font size of text in HTML document.

Syntax:  

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

Default Value: 

  • medium

Property Values: 
 

  • absolute-size: The absolute-size is used to set the font size absolutely. The default value of absolute-size is medium. The list of absolute-size property are xx-small, x-small, small, medium, large, x-large, xx-large.
     

Syntax: 
 

font-size: medium|xx-small|x-small|small|large|x-large|xx-large;

Example: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS font-size property
        </title>
         
        <!-- CSS style to set font-size property -->
        <style>
            .xxsmall {
                color:green;
                font-size:xx-small;
            }
            .xsmall {
                color:green;
                font-size:x-small;
            }
            .small {
                color:green;
                font-size:small;
            }
            .medium {
                color:green;
                font-size:medium;
            }
            .large {
                color:green;
                font-size:large;
            }
            .xlarge {
                color:green;
                font-size:x-large;
            }
            .xxlarge {
                color:green;
                font-size:xx-large;
            }
        </style>
    </head>
     
    <body>
        <h1>font-size property</h1>
         
        <div class = "xxsmall">font-size: xx-small;</div>
        <div class = "xsmall">font-size: x-small;</div>
        <div class = "small">font-size: small;</div>
        <div class = "medium">font-size: medium;</div>
        <div class = "large">font-size: large;</div>
        <div class = "xlarge">font-size: x-large;</div>
        <div class = "xxlarge">font-size: xx-large;</div>
    </body>
</html>                   

Output: 
 

font-size property

 

  • relative-size: It contains two value smaller and larger. The font-size is smaller or larger depends on the parent element.
     

Syntax: 
 

font-size: smaller|larger;

Example: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS font-size Property
        </title>
         
        <!-- CSS property to set font-size -->
        <style>
            .smaller {
                color:green;
                font-size:smaller;
            }
            .larger {
                color:green;
                font-size:larger;
            }
        </style>
    </head>
     
    <body>
        <h1>font-size property</h1>
         
        <div class = "smaller">font-size: smaller;</div>
        <div class = "larger">font-size: larger;</div>
    </body>
</html>                   

Output: 
 

font-size property

 

  • length: This property is used to set the font-size in length. The length can be in form of px, cm etc.
     

Syntax: 
 

font-size: length;

Example: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS font-size Property
        </title>
         
        <!-- CSS property to set font-size -->
        <style>
            .length {
                color:green;
                font-size: 40px;
            }
        </style>
    </head>
     
    <body>
        <h1>font-size property</h1>
         
        <div class = "length">font-size: length;</div>
    </body>
</html>                   

Output: 
 

font-size property

 

  • global: This property contains three types of values such as initial | inherit | unset.
     

Syntax: 
 

font-size: initial|inherit|unset;

Example: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS font-size Property
        </title>
         
        <!-- CSS property to set font-size -->
        <style>
            .length {
                color:green;
                font-size: initial;
            }
        </style>
    </head>
     
    <body>
        <h1>font-size property</h1>
         
        <div class = "length">font-size: initial;</div>
    </body>
</html>                   

Output: 
 

font-size property

 

Supported Browsers: The browser supported by font-size property are listed below: 
 

  • Google Chrome 1.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Safari 1.0
  • Opera 7.0

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!