Як виділити шматочок тексту іншим кольором: просто, красиво і по-кодерськи

Працюєш над сайтом і хочеш, щоб потрібні слова не губилися в текстовому морі? Інколи однієї жирності замало, треба спалах, емоцію, яскраву пляму. І от тут у гру вступає CSS і магія класів!

Як це працює?

Є у нас шматочок HTML, і ми хочемо, щоб, скажімо, фраза «consectetuer adipiscing elit» виділялась червоним. Для цього:

1. Створюємо CSS-клас із бажаним кольором.

2. Обгортаємо потрібний фрагмент тексту в <span> із цим класом.

Ось приклад:

Що ще можна?

• Міняти фон: background-color: yellow;

• Підкреслити важливе: font-weight: bold;

• Створити ефект маркера: комбінація background-color + padding

Для чого це потрібно?

• Щоб підкреслити важливу фразу у блозі чи лендінгу.

• Щоб звернути увагу користувача на умову, знижку чи дедлайн.

• Щоб оживити текст, бо ми ж не роботи — любимо красиве.

Висновок:

Якщо хочеш, щоб твої тексти на сайті були не просто «чорним по білому», а емоційним контентом із характером — вчися керувати кольорами. І HTML тебе не підведе!