CSS Data Type - <relative-size>

Quiz

CSS data type <relative-size> represents relative size keywords. It defines a size relative to computed size of parent element.

These terms are frequently used in the properties font-size and font shorthand.

<relative-size> keywords are relative to The current element size. The <relative-size> corresponds to the adjacent size in the <absolute-size> table if the inherited size is given using a <absolute-size> keyword.

Possible Values

<relative-size> data type uses values as listed below:

smaller - A relative size one size smaller than the inherited size.
larger - A relative size one size larger than the inherited size.

Syntax

<relative-size> = smaller | larger

CSS <relative-size> - Comparing Keyword Values

The following example demonstrates the use of different values of <relative-size> and their comparision:

 
<html>
<head>
<style>
   .container {
      font-size: 20px;
      color: #333; 
      font-family: 'Arial', sans-serif; 
   }
   .small {
      font-size: smaller; 
      font-style: italic;      
      }
   .large {
      font-size: larger; 
      font-weight: bold;
   }
   .x-large {
      font-size: x-large; 
      color: #0066cc; 
   }
   .xx-large {
      font-size: xx-large; 
      text-decoration: underline; 
   }
</style>
</head>
<body>
<div class="container">
   <p>This is the custom default font size with different styles and colors.</p>
   <p class="small">This text is slightly smaller and in italic.</p>
   <p class="large">This text is slightly larger and bold.</p>
   <p class="x-large">This text is extra large with a blue color.</p>
   <p class="xx-large">This text is double extra large with underline.</p>
</div>
</body>
</html>

CSS <relative-size> - Comparing Keyword Values

The following example demonstrates the use of different values of <relative-size> and their comparision:

 
<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      font-size: 16px; 
   }

   .container {
      margin: 20px;
   }

   .smaller {
      font-size: smaller;
   }

   .larger {
      font-size: larger;
   }

   .custom-relative {
      font-size: 120%; 
   }
</style>
</head>
<body>
<div class="container">
   <p>This is the default font size.</p>
   <p class="smaller">This text is smaller relative to the default.</p>
   <p class="larger">This text is larger relative to the default.</p>
   <p class="custom-relative">This text has a custom relative size (120%).</p>
</div>
</body>
</html>

Print Page