Как использовать CSS для изменения цвета шрифта

Добавьте немного цвета в свой веб-дизайн с помощью CSS, чтобы сделать текст ярче.

Хотите украсить свой сайт разными цветами шрифта? Вы можете сделать это с помощью CSS. CSS означает каскадные таблицы стилей и является языком по умолчанию, используемым для создания и управления стилем любого веб-сайта.

Существует три метода применения CSS к HTML-документу. Это встроенный CSS, внутренний/встроенный CSS и внешний CSS.

Способ первый: встроенный CSS

Чтобы изменить цвет шрифта в CSS, вам необходимо создать правило CSS, чтобы установить значение свойства цвета.

Встроенный метод использует свойство стиля, которое можно применить практически к любому элементу. Вот пример, в котором цвет шрифта абзаца HTML устанавливается красным:

<p style="color: red;">Paragraph of text</p>

Вы можете добиться того же эффекта, используя внутренний/встроенный CSS или внешний CSS.

Метод второй: внутренний/встроенный CSS

Вы можете использовать этот метод, если хотите создать правила CSS, которые влияют на более чем один экземпляр элемента HTML, но только на одной странице. Затем правила CSS записываются в заголовок HTML-страницы с использованием элемента стиля:

<head>
    <style>
    p { color: blue }
    </style>
</head>

Способ третий: внешний CSS

Третий способ добиться того же эффекта — использовать внешнюю таблицу стилей CSS. С помощью текстового редактора создайте файл с расширением «.css». Обычно этот файл называют как-то вроде stylesheet.css, но вы можете назвать его как угодно, сохраняя расширение «.css».

Например, чтобы окрасить основной текст в зеленый цвет с помощью внешней таблицы стилей, просто вставьте следующее правило CSS:

p { color: blue }

В вашем HTML-документе вы должны включить ссылку на вашу таблицу стилей в элемент заголовка HTML:

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <p>Paragraph of text</p>
</body>
</html>

Изменение цвета шрифта в HTML без применения CSS

Лучше всего использовать CSS, но вот как изменить цвет шрифта, используя только HTML:

<p><font color="red">Paragraph of text</font></p>

Элемент шрифта вместе с его атрибутом цвета устарел. Это потому, что они являются презентационными, а не структурными элементами. Современный HTML должен состоять только из структурных элементов.

Изменение цвета шрифта в CSS относительно просто

Мы показали вам три метода изменения цвета шрифта в CSS. Мы также показали вам, как это сделать старым способом, используя тег шрифта HTML. Попробуйте их и посмотрите, что подойдет вам лучше всего!