There are a few different ways to define, load, and apply CSS to HTML.
You learned about one way (inline styles) that are defined directly in the HTML tag. Example:
<div>Hi, it's a div!</div>
<div style="background-color: red;">Hi, it's red</div>
<!-- this style is applied *only* to the div with the style -->
Now it’s showing you another way to write CSS. By using
<style> ... </style> you can expand how the CSS is applied.
Consider the above example. What if I want to make all of my div’s have a red background? what if I have 100 of them? Should I type inline-styles all the time? No way Jose! So we’re going to do something different:
div here means “select all of the
<div> elements in the html.” A different example:
h1 will select all
<h1> html elements.
- Now that all of the
<div> elements are selected, it applies the styles that are inside the curly braces. In this case, red background.
Let’s put it all together to get two red
<div>'s. Do the style tags first. HTML second.
<div>Hi, it's a div! It's red now!</div>
<div>Hi, it's red</div>
Going back to your code:
- You need to make sure that you have opening and closing tags in HTML.
- opening tags are like this:
- closing tags have a slash:
- you do not need inline styles
Hope that helps. You said “I do not understand anything about the exercise” so I hope a little explanation helps.