Hi, I'm asking for help because I'm stuck on an exercise where you learn the <style> to open and the </ style> to close it, I do not understand anything about the exercise

HTML-CSS
1

Tell us what’s happening:

Your code so far


h2 {color: blue;}
</style>
<h2 style="color: blue">CatPhotoApp</h2>

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

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://www.freecodecamp.org/challenges/use-css-selectors-to-style-elements

2

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:

<style>
div {
  background-color: red
}
</style>

What happens?

  1. div here means “select all of the <div> elements in the html.” A different example: h1 will select all <h1> html elements.
  2. 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.

<style>
div {
  background-color: red
}
</style>

<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: <script>
  • closing tags have a slash: </script>
  • 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.

1 Like
3

Nice response!

Possibly made confusing by your reference to < script> and < style>. I would hazard a guess OP doesnt need to worry about at this time.

Essentially @oxilacdu74, as you would have learned in the HTML section, you open and tag then include its contents… then close the tag again. For instance < H1 > HEADING </ H1>

< style> tags are opened to include CSS.
< script> tags are opened to include Javascript.

you will learn in due course it is actually good practice not to include the main bulk of your styles or scripts within the HTML document… but that is for another day :grinning:

1 Like
4

Thanks @JABedford. It was a typo! Didn’t mean to put script! Edited my response