Understand CSS font-size: 100% for Beginners – CSS Tutorial

CSS font-size is widely used in web development, in this tutorial, we will use an example to help you understand and use it correctly.

Step 1: create a html page and input this code below in body element

<h4>Title 1: font size is 12px</h4>

Then save it and open it by your browser, you may get the effect like this

Title 1: font size is 12px

Step 2: add css style in this html page

<style type="text/css">
    body{font-size:12px;}
    h4{font-size:100%;}
</style>

Then save it, open it again, you may find the size of text in h4  is 12px.

So font-size:100% means this element(h4) will inherit the font size of its parent element(body).