Използване CSS Selectors за Style Elements HTML5

Урок 2. Use CSS Selectors to Style Elements

С CSS има стотици CSS свойства, които можете да използвате, за да промените начина, по който изглежда елемент на страницата ви.


Когато въведохте <h2 style="color: red">CatPhotoApp</h2>, дадохте на  h2 елемента индивидуален вграден стил/inline style.
Това е един от начините да добавите стил към даден елемент, но по-добрият начин е чрез използването на CSS, което означава "Cascading Style Sheets".

В горната част на кода си създайте стил като този: Въведете два тага за стил съответно на 2 ред: <style> и 3 ред: </style>

В този елемент на стил можете да създадете CSS selector  за всички h2 елементи. Например, ако искате всички h2 елементи да бъдат червени, елементът style / стил ще изглежда така:
<style>
  h2 {color: red;}
</style>

Обърнете внимание, че е важно да имате едновременно отваряща и затваряща къдрави скоби ({и}) около стила на всеки елемент h2 {color: red;}. Също така трябва да сте сигурни, че стилът на вашия елемент е между маркерите за стил за отваряне <style> и затваряне </style>. И накрая, не забравяйте да добавите точка и запетая в края на всеки от стиловете на вашите елементи h2 {color: red;}.
Вашата задача е: Изтрийте атрибута за стил в h2 елемента и вместо това създайте елемент с  CSS style. Добавете необходимите CSS, за да превърнете  всички h2 елементи в синьо/blue.


Ако всичко сте направили правилно натискайки Run tests бутона ще видите екрана за успех!

Можете да преминете към урок: Use a CSS Class to Style an Element
Всички теми от Responsive Web Design>>.