CSS Font Size

CSS font-size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Example:

<html> 

<head> 
        <title>Practice CSS font-size property</title> 
</head> 

<body> 
        <p style="font-size:xx-small;">  This font size is extremely small.</p>   
        <p style="font-size:x-small;">  This font size is extra small</p>   
        <p style="font-size:small;">  This font size is small</p>   
        <p style="font-size:medium;">  This font size is medium. </p>   
        <p style="font-size:large;">  This font size is large. </p>   
        <p style="font-size:x-large;">  This font size is extra large. </p>   
        <p style="font-size:xx-large;">  This font size is extremely large. </p>   
        <p style="font-size:smaller;">  This font size is smaller. </p>   
        <p style="font-size:larger;">  This font size is larger. </p>   
        <p style="font-size:200%;">  This font size is set on 200%. </p>   
        <p style="font-size:20px;">  This font size is 20 pixels.  </p>   
</body> 

</html>

Output:

CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic, oblique, or normal.

Example:

<!DOCTYPE html> 
<html> 

<head> 
        <style>
                body {
                        font-size: 100%;
                }

                h2 {
                        font-style: italic;
                }

                h3 {
                        font-style: oblique;
                }

                h4 {
                        font-style: normal;
                }
                }
        </style> 
</head> 

<body> 
        <h2>This heading is shown in italic font.</h2> 
        <h3>This heading is shown in oblique font.</h3> 
        <h4>This heading is shown in normal font.</h4> 
</body> 

</html>

Output:

This heading is shown in italic font.

This heading is shown in oblique font.

This heading is shown in normal font.