CSS | font-size Property - GeeksforGeeks

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:  
 
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:  
 
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:  
 
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:  
 
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
 
ManasChhabra2
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?