CSS | font-size Property
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
- Edge 12
- Internet Explorer 5.5
- Firefox 1.0
- Safari 1.0
- Opera 7.0
Please Login to comment...