<p class="about">За допомогою властивості <strong>font-size</strong> ми можемо змінити розмір тексту. От наприклад, є п'ять абзаців:</p>

<p>Цей абзац використовує значення властивості <strong>font-size</strong> за замовчуванням (<em>medium</em>, і воно може різнитися між різними браузерами/ОС).</p>

<p class="px">А тут ми встановили розмір <em>25px</em>, тобто 25 пікселів.</p>

<p class="em">Для цього абзацу встановлене значення <em>1.25</em> - у 1.25 рази більший за розмір за замовчуванням або значення встановлене за допомогою <strong>font-size</strong> для батьківського елементу.</p>

<p class="per">А за допомогою відсотків (<em>175%</em>), ми встановлюємо розмір, відносно розміри тексту батьківського елементу або значення за замовчуванням, якщо спеціально <strong>font-size</strong> не прописувався (як і у минулому прикладі).</p>

<p class="rem"><em>1.7rem</em> - працює так само як і <em>em</em>, от тільки відносно корневого елемента (в більшості випадків - це <em>html</em>).</p>
body {
  line-height: 1.45;
  font-size: 17px;
  font-family: sans-serif;
}

.about {
  background-color: gold;
  padding: 12px;
}

.px {
  font-size: 25px;
}

.em {
  font-size: 1.25em;
}

.per {
  font-size: 175%;
}

.rem {
  font-size: 1.7rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.