How to set the h1 element to the color green

Question

How do I set the h1 element to the color green?

index.html

<body>
    <h1>Nick Pettit</h1>
</body>
<style>
      <h1>Rachel Williams</h1>
  {<h1>}

Answer 1 · 2015-03-03T16:29:20Z

March 3, 2015 4:29pm

Rachel,

There are a few things wrong here. It can all be very very confusing at first, so I would recommend going back and rewatching some videos a few times (and practicing along with them, if that helps!) until some of the syntax starts to sink in. In the meantime, here is an explanation of what's wrong with this code:

For this exercise, we need to recall the syntax differences between HTML and CSS, and how to set property values on the elements that we select. Additionally, as these code challenges are very picky about how the code you submit is laid out, we'll need to pay extra attention to the placement of the style block.

1) Firstly, the challenge asks you to create your style block ABOVE the already present h1 element. It looks like you created a new h1 element and then positioned your style block above that, but that's not what they're looking for. Additionally, don't forget to CLOSE your style block (just like you close most other HTML elements)! For the first task in the challenge, you should end up with the following:

<body>
    <!-- the style block goes above the already present h1 element. note that is has both an opening and a closing tag -->
    <style>
    </style>
    <h1>Nick Pettit</h1>
</body>

2) Next, it wants you to target the h1 element in your CSS that you'll write in your style block. Remember, even though the style block is written in HTML, and in the HTML file, what you put INSIDE of the style block itself will be CSS code, which has a different syntax and purpose than HTML. In CSS, you can select elements from your HTML in various ways. The way they want you to do it here is by using the "tag selector", which in this case, would target the 'h1'. In HTML, you write your tags with the opening and closing angled brackets, but in CSS, to target a tag, you simply write the tag name (with no extra characters around it), and then you open up the section to target that element's properties by adding opening and closing curly brace characters, '{' and '}', respectively. So, for the second task in this challenge, you should end up with the following:

<body>
    <style>
        /* this selector targets the h1 element in my HTML */
        h1 {
            /* my properties for the h1 element will go here, between the curly braces */
        }
    </style>
    <h1>Nick Pettit</h1>
</body>

3) Lastly, they want you to target the 'color' property of the h1 element, and set it equal to the value of 'green'. Thus, we would end up with the following to finish the challenge:

<body>
    <style>
        /* this selector targets the h1 element in my HTML */
        h1 {
            color: green;
        }
    </style>
    <h1>Nick Pettit</h1>
</body>

Note the syntax in the property assignment, as well: we have the property name, followed by a colon ':', followed by the value we want to assign, and it's all closed off with a semi-colon ';'.

Again, I would strongly suggest going back and rewatching whatever videos possible up to this point, so that you can start to solidify these basic concepts before moving forward. These are very important building blocks that should not be skipped, but rather reworked over and over until you know them like the back of your hand. Every now and again, everybody needs a little help, regardless of how far along in the learning process you are or how much experience you have, but you'll want to make sure you help yourself as best as possible and put yourself in the best possible position to continue succeeding in the field by understand the foundations of these languages first!

Happy coding!

Erik

Welcome to the Treehouse Community

Looking to learn something new?

Rachel Williams

Rachel Williams

How to set the h1 element to the color green

1 Answer

Erik McClintock

Erik McClintock