Languages
[Edit]
EN

CSS - change font size

0 points
Created by:
Wiktor-Sribiew
350

In this article, we would like to show you how to change an element's font size using CSS.

Quick solution:

div {
  font-size:xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|unset|initial|inherit;
}

 

1. Absolute size values

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .xx-small { font-size: xx-small; }
    .x-small { font-size: x-small; }
    .small { font-size: small; }
    .medium { font-size: medium; }
    .large { font-size: large; }
    .x-large { font-size: x-large; }
    .xx-large { font-size: xx-large; }

  </style>
</head>
<body>
  <div class="xx-small">xx-small</div>
  <div class="x-small">x-small</div>
  <div class="small">small</div>
  <div class="medium">medium</div>
  <div class="large">large</div>
  <div class="x-large">x-large</div>
  <div class="xx-large">xx-large</div>
</body>
</html>

2. Length values

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .default1 { font-size: 1em; }
    .default2 { font-size: 16px; }

  </style>
</head>
<body>
  <div class="default1">1em</div>
  <div class="default2">16px</div>
</body>
</html>

3. Relative size values

3.1. Smaller

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>

      .default { font-size: 26px; }
      .smaller { font-size: smaller; }

    </style>
  </head>
  <body>
    <div class="default">
      26px
      <div class="smaller">
        1x smaller
        <div class="smaller">
          2x smaller
          <div class="smaller">
            3x smaller
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

3.2. Larger

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .default { font-size: 15px; }
    .larger { font-size: larger; }

  </style>
</head>
<body>
  <div class="default">
    15px
    <div class="larger">
      1x larger
      <div class="larger">
        2x larger
        <div class="larger">
          3x larger
        </div>
      </div>
    </div>
  </div>
</body>
</html>

4. Percentage values

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .default { font-size: 26px; }
    .smaller { font-size: 80%; }

  </style>
</head>
<body>
  <div class="default">
    26px
    <div class="smaller">
      1x 80%
      <div class="smaller">
        2x 80%
        <div class="smaller">
          3x 80%
        </div>
      </div>
    </div>
  </div>
</body>
</html>

5. Global values

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .inherit { font-size: inherit; }
    .initial { font-size: initial; }
    .unset{ font-size: unset; }

  </style>
</head>
<body>
  <div class="inherit">inherit</div>
  <div class="initial">initial</div>
  <div class="unset">unset</div>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join