Skip to content
Related Articles

Related Articles

CSS | font-size Property
  • Difficulty Level : Medium
  • Last Updated : 07 Jan, 2019

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;

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:






    <!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:




    <!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:




    <!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:




    <!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 :