Тег <basefont> в HTML — шрифт документа, вилучений з мови

HTML

<h3>Приклад з використанням тегу  <code>basefont</code></h3>
<basefont face="Arial, Helvetica, sans-serif" size="14" color="#8ebf42">
<p id="a">Метелики – прекрасні лікарі від стресів. В цьому переконані лікарі Стокгольма. У клініках цього міста є оранжереї з метеликами і квітами, де пацієнти успішно проходять курси лікування від стресів.<br>
Серед метеликів є хижаки. Наприклад, Calyptra eustrigata. Їжа цих метеликів – кров тварин, яку вони видобувають, проколюючи гострим хоботком покриви тварин. Хижаками є тільки самці. Самки віддають перевагу соку рослин і плодів.
</p>

<h3>Приклад без використання тегу  <code>basefont</code></h3>
<p>Метелики – прекрасні лікарі від стресів. В цьому переконані лікарі Стокгольма. У клініках цього міста є оранжереї з метеликами і квітами, де пацієнти успішно проходять курси лікування від стресів.
<br>
Серед метеликів є хижаки. Наприклад, Calyptra eustrigata. Їжа цих метеликів – кров тварин, яку вони видобувають, проколюючи гострим хоботком покриви тварин. Хижаками є тільки самці. Самки віддають перевагу соку рослин і плодів.
</p>

CSS

#a {
        color: #8ebf42; 
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
      }

HTML

<h4 class="cap">1. Як писали колись</h4>
<div class="old">
    <basefont size="7" color="red" face="Verdana">
    <p>Цей абзац мав би стати великим, червоним і набраним Verdana.
        Він не став: браузер атрибути не читає.</p>
    <p>Наступний абзац — теж звичайний.</p>
</div>
<p class="note">Червона рамка нижче намагається підсвітити сам теґ basefont.
    Смуги не видно: типовий стиль браузера дає йому display: none,
    і висота елемента дорівнює нулю.</p>

<h4 class="cap">2. Те саме завданням для css</h4>
<div class="new">
    <p>Цей абзац справді великий, темно-синій і набраний Verdana —
        бо так сказало одне правило для всієї коробки.</p>
    <p>Наступний абзац успадкував те саме, без жодного додаткового теґа.</p>
    <p>А ось поле введення успадкування типово не підхоплює:
        <input value="звичайний шрифт"> — для нього потрібне окреме правило.</p>
</div>

CSS

.old,
.new {
    max-width: 560px;
    margin-bottom: 10px;
    padding: 6px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.old {
    background: #fdeeee;
}

/* спроба зробити basefont видимим — марна, він display: none */
basefont {
    border: 3px solid #d64545;
    background: #ffd9d9;
}

/* ось те, що колись робив basefont: одне правило на всю коробку */
.new {
    background: #f6f9ff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 1.25rem;
    color: #1d3a6b;
}

/* поля введення успадкування не підхоплюють — їм потрібен окремий рядок */
.new input {
    font: inherit;
    color: inherit;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}