Understanding CSS3’s Font-Size Property

CSS3’s font-size property is one that is used very commonly, so it’s important to understand exactly how to use it. Most new developers may think that the font-size property only takes fixed values in any of the common units of measurement (px, em, rem, cm, etc), but the property also takes values in percentages (%) and predefined values (small, medium, large, etc), which is what we’ll cover in this post.

Screen Shot 2016-10-30 at 2.40.11 PM

Join us in our newest publication:

The predefined values that the font-size property takes are as follows:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller
  • larger

Here’s an example of how you’d use it in your CSS (compare the font-size in the screenshot below to the font-size in the one above to see the difference between the default and the fixed values):

  1. p{
  2. font-size: larger;
  3. }

Screen Shot 2016-10-30 at 2.39.49 PM

You can also adjust or define the font-size using percentage values, which work to set the font-size to a percentage of the font-size of the parent value. Check it out below:

  1. p{
  2. font-size: 300%;
  3. }

Screen Shot 2016-10-30 at 2.45.47 PM

Share and Enjoy !

0 0