FCC Challenge 9: Use CSS Selectors to Style Elements

For FCC Challenge 9, we’re deleting the style in the h2 tag and creating a separate CSS style element to style the h2 tag:

[html]

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

The modified code should look like:

[html]

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.

When you entered [html]

CatPhotoApp

[/html], you were giving that individual h2 element an inline style.

That’s one way to add style to an element, but a better way is by using CSS, which stands for Cascading Style Sheets.

At the top of your code, create a style element like this:

[html]

[/html]

Inside that style element, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this:

[html]

[/html]

Note that it’s important to have both opening and closing curly braces ({ and }) around each element’s style. You also need to make sure your element’s style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element’s styles.

Delete your h2 element’s style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue.