Как изменить цвет шрифта в CSS

Четыре валика наносят красочную краску на стену: зелёный, красный, оранжевый и синий

Коротко: CSS (Cascading Style Sheets) — стандартный язык для управления внешним видом веб‑страниц. Ниже перечислены три основных способа задать цвет текста и дополнительные рекомендации по форматам цвета, доступности и тестированию.

Быстрый обзор методов

Inline CSS: стиль прямо в теге элемента.
Встроенный CSS: правило в секции одной HTML‑страницы.
Внешний CSS: отдельный .css файл, подключаемый ко всем страницам.

Метод первый: Inline CSS

Inline (встроенный в элемент) метод подходит для быстрого тестирования или для единичных случаев. Пример, задающий красный цвет абзацу:

Paragraph of text

Важно: inline-стили имеют высокий приоритет и затрудняют поддержку кода в больших проектах.

Метод второй: Встроенный CSS в

Подходит, если нужно применить правила к нескольким элементам, но только на одной странице. Пример:

Плюсы: простота для одной страницы. Минусы: повторение кода на разных страницах.

Метод третий: Внешний CSS

Лучший вариант для поддержки и масштабирования. Создаёте файл с расширением .css (например stylesheet.css) и подключаете его в секции :




    



    Paragraph of text

В файле stylesheet.css достаточно прописать правило:

p { color: blue }

Преимущество: централизованное управление стилями, кэширование, переиспользование.

Изменение цвета шрифта без CSS (устаревший способ)

Раньше использовали тег , но он устарел и не должен применяться в современной вёрстке:

Paragraph of text

Используйте CSS, чтобы отделить структуру (HTML) от презентации (CSS).

Форматы цвета и рекомендации

Именованные цвета: red, blue, green — удобно, но ограниченно.
HEX: #RRGGBB или короткий #RGB — широко используется.
RGB/RGBA: rgb(255,0,0) / rgba(255,0,0,0.5) — позволяет задавать прозрачность.
HSL/HSLA: hsl(120, 100%, 50%) — удобен для изменения оттенка/насыщенности.
CSS-переменные: –main-color: #1a73e8; и использование var(–main-color) для единой точки управления.

Примеры:

:root {
  --brand-color: #1a73e8;
}

h1 { color: var(--brand-color); }

p.note { color: rgba(0,0,0,0.7); }

Контраст и доступность

Важно обеспечить достаточный контраст между текстом и фоном. Низкий контраст ухудшает читаемость для людей с нарушениями зрения.

Рекомендация WCAG: контраст текста и фона должен соответствовать уровням AA/AAA в зависимости от случая использования.
Инструменты: встроенные расширения браузера, онлайн‑тестеры контраста.

Важно: яркий цвет на ярком фоне часто теряет читаемость даже при формально допустимом контрасте.

Специфика CSS: наследование и приоритеты

Правило наследования: многие свойства цвета наследуются от родительских элементов.
Приоритеты (от низкого к высокому): внешние стили → встроенные стили в → inline-стили → !important.
Рекомендация: избегайте частого использования !important — он затрудняет рефакторинг.

Когда выбранный метод не сработает

Если inline-стиль переопределён !important в другом месте.
Если правило не применяется из‑за специфичности селектора (например, классы vs id).
Если цвет влияет на читаемость и нарушает требования доступности.

Шпаргалка и чеклист для ролей

Разработчик:

Использовать внешние .css для крупного проекта.
Прописать переменные в :root для цветов бренда.
Тестировать контраст с инструментами.

Дизайнер:

Предоставить палитру в HEX и HSL.
Указать варианты для состояния (hover, active, disabled).

Контент-редактор:

Не использовать inline-стили для массовых изменений.
При добавлении цветов согласуйте с командой дизайна.

Критерии приёмки

Текст читаем при нормальном зуме и на мобильных устройствах.
Контраст соответствует минимальным требованиям WCAG AA для основного текста.
Цвета централизованы (переменные или один файл) и легко меняются.

Тестовые сценарии

Изменить значение CSS-переменной и убедиться, что цвет обновился на всех страницах.
Применить правило для класса и проверить, что элементы без класса не затронуты.
Проверить отображение в самых популярных браузерах и на мобильных устройствах.

Примеры: быстрый набор правил (cheat sheet)

/* Базовый текст */
body { color: #222; }

/* Акцент */
.a { color: #e53935; }

/* Полупрозрачный подпись */
.meta { color: rgba(0,0,0,0.6); }

/* Переменная */
:root { --accent: #ff6f00; }
.btn { color: var(--accent); }

Альтернативные подходы

Использовать классы утилитарного фреймворка (например, если проект применяет такую библиотеку).
Генерировать CSS динамически на этапе сборки (Sass/LESS/PostCSS) для поддержки тем и вариаций.

Ментальные модели

«Одна точка изменения»: задавайте цвета через переменные или один файл, чтобы менять тему централизованно.
«Наследование по умолчанию»: задавайте базовый цвет в body, а специфичные цвета — как исключения.

Заключение

Изменение цвета шрифта в CSS — простая задача технически, но требующая внимания к архитектуре и доступности. Для одного элемента подходят inline‑стили, для отдельной страницы — встроенные правила, для проекта в целом — внешняя таблица стилей и переменные.

Важно

Предпочитайте внешние стили для поддержки и масштабируемости.
Проверьте контраст перед деплоем.

Примечание

Тег устарел и не должен использоваться в современной вёрстке.

Краткое резюме

Используйте CSS: inline, встроенный или внешний.
Применяйте переменные и форматы цвета (HEX, RGB(A), HSL(A)).
Следите за контрастом и тестируйте в разных устройствах.

Как изменить цвет шрифта с помощью CSS