CSS Data Type - <absolute-size>

CSS <absolute-size> data type defines absolute font size in the properties font shorthand and font-size.

Possible Values

  • xx-small − It specifies the font size that is 60% size of medium. And equivalent to the deprecated size="1".

  • x-small − It specifies the font size that is 75% the size of the default font size.

  • small − It specifies the font size that is 89% the size of the default font size and equivalent to the deprecated size="2".

  • medium − Preferred size among users. It specifies the default font size as the reference middle value and equivalent to the deprecated size="3".

  • large − It specifies the font size that is 20% greater than the default font size and equivalent to the deprecated size="4".

  • x-large − It specifies a font size that is 50% greater than the default font size and equivalent to the deprecated size="5".

  • xx-large − It specifies a font size that is twice the default font size and equivalent to the deprecated size="6".

  • xxx-large − It specifies a font size that is three times the default font size and equivalent to the deprecated size="7".

Syntax

font-size = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large;

The following table shows the scaling factor for different absolute-size keywords. It also shows how these keywords relate to heading sizes (<h1> to <h6>) and the deprecated HTML size attribute.

<absolute-size> xx-small x-small small medium large x-large xx-large xxx-large
scaling factor 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML heading h6 h5 h4 h3 h2 h1
HTML size attribute 1 2 3 4 5 6 7

CSS <absolute-size> - Example

The following example demonstrates the use of different font sizes using font-size property −

<html>
<head>
<style>
   p {
      margin-bottom: 5px;
   }
   .font-xx-small {
      font-size: xx-small;
   }
   .font-x-small {
      font-size: x-small;
   }
   .font-small {
      font-size: small;
   }
   .font-medium {
      font-size: medium;
   }
   .font-large {
      font-size: large;
   }
   .font-x-large {
      font-size: x-large;
   }
   .font-xx-large {
      font-size: xx-large;
   }
   .font-xxx-large {
      font-size: xxx-large;
   }
</style>
</head>
<body>
   <p class="font-xx-small">xx-small</p>
   <p class="font-x-small">x-small</p>
   <p class="font-small">small</p>
   <p class="font-medium">medium</p>
   <p class="font-large">large</p>
   <p class="font-x-large">x-large</p>
   <p class="font-xx-large">xx-large</p>
   <p class="font-xxx-large">xxx-large</p>
</body>
</html>
Advertisements