Зміна кольору елемента H2

У кодуванні часто існує багато різних рішень даної проблеми. Це особливо актуально, коли справа стосується стилізації елемента HTML.

Змінити одне з найпростіших - це колір тексту. Але іноді здається, що нічого, що ви намагаєтесь, не працює:

 h2 .red-text { color: red; }  

CatPhotoApp

То як можна змінити колір елемента H2 на червоний?

Варіант №1: Вбудований CSS

Одним із способів було б використання вбудованого CSS для стилізації елемента безпосередньо.

Як і в інших методах, форматування є важливим. Погляньте ще раз на код вище:

CatPhotoApp

Щоб використовувати вбудований стиль, обов’язково використовуйте styleатрибут та оберніть властивості та значення у подвійні лапки ("):

CatPhotoApp

Варіант No2: Використовуйте селектори CSS

Замість того, щоб використовувати вбудований стиль, ви можете відокремити свій HTML або структуру та вміст сторінки від стилю або CSS.

По-перше, позбудьтеся вбудованого CSS:

 h2 .red-text { color: red; }  

CatPhotoApp

Але потрібно бути обережним щодо використовуваного вами селектора CSS. Погляньте на елемент:

h2 .red-text { color: red; }

Коли є пробіл, селектор h2 .red-textкаже браузеру націлити елемент на клас, red-textякий є дочірнім h2. Однак у елемента H2 немає нащадка - ви намагаєтесь стилізувати сам елемент H2.

Щоб виправити це, видаліть пробіл:

h2.red-text { color: red; }

Або просто націліться на red-textклас безпосередньо:

.red-text { color: red; }