---
id: bad87fee1348bd9aedf08805
title: Use CSS Selectors to Style Elements
challengeType: 0
videoUrl: ''
localeTitle: Использование селекторов CSS для элементов стиля
---
## Description
В CSS есть сотни properties
CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <h2 style="color: red">CatPhotoApp</h2>
, вы стали стилизовать этот отдельный элемент h2
со inline CSS
, который обозначает Cascading Style Sheets
. Это один из способов указать стиль элемента, но есть лучший способ применить CSS
. В верхней части кода создайте блок style
следующим образом: <Стиль>
</ Стиль>
Внутри этого блока стиля вы можете создать CSS selector
для всех элементов h2
. Например, если вы хотите, чтобы все элементы h2
были красными, вы добавили бы правило стиля, которое выглядит так: <Стиль>
h2 {color: red;}
</ Стиль>
Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( {
и }
) вокруг правила (ов) стиля каждого элемента. Вы также должны убедиться, что определение стиля вашего элемента находится между тегами стиля открытия и закрытия. Наконец, обязательно добавьте точку с запятой в конец каждого из правил стиля вашего элемента.
## Instructions
Удалите атрибут стиля элемента h2
и вместо этого создайте блок style
CSS. Добавьте необходимый CSS, чтобы все элементы h2
синими.
## Tests
```yml
tests:
- text: Удалите атрибут стиля из вашего элемента h2
.
testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your h2
element.");'
- text: Создайте элемент style
.
testString: 'assert($("style") && $("style").length > 1, "Create a style
element.");'
- text: Ваш элемент h2
должен быть синим.
testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your h2
element should be blue.");'
- text: 'Убедитесь, что объявление вашей таблицы стилей h2
действительно с точкой с запятой и закрывающей скобкой.'
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet h2
declaration is valid with a semicolon and closing brace.");'
- text: 'Убедитесь, что все ваши элементы style
действительны и имеют закрывающий тег.'
testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/