Setting the Font Size

The font-size property specifies the size of the font. The allowed values for this property are.

ValueDescription
xx-smallSets the font size to xx-small. The browser is deciding the exact size.
x-smallSets the font size to x-small. The browser is deciding the exact size.
smallSets the font size to small. The browser is deciding the exact size.
mediumSets the font size to medium. The browser is deciding the exact size.
largeSets the font size to large. The browser is deciding the exact size.
x-largeSets the font size to x-large. The browser is deciding the exact size.
xx-largeSets the font size to xx-large. The browser is deciding the exact size.
smallerSets the font size smaller relative to the font size of the parent element.
largerSets the font size larger relative to the font size of the parent element.
<length> Sets the font size precisely using a CSS length value.
<%> Sets the font size as a percentage of the parent element's font size.
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            p { 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgrey; 
                margin: 2px; 
                float: left; 
                font-family: sans-serif; 
                font-size: medium; 
            } 
            #first { 
                font-size: xx-large; 
            } 
            #second { 
                font-size: larger; 
            } 
        </style> 
    </head> 
    <body> 
        <p> 

            <span id="first">HTML</span>
            <span id="second">CSS</span>. 
        </p> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Font:
  1. Font-related properties
  2. Selecting a Font with font-family
  3. Setting the Font Size
  4. Setting the Font Style and Weight
  5. Using Web Fonts
Related: