Learn Basic CSS by Building a Cafe Menu - Step 11

Tell us what’s happening:
I am completely new to computer science, coding, etc. I am not sure how to correctly code h1 in mt style , then center it. Any information would be appreciated.
Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>

<!-- User Editable Region -->

    <style>
     <h1> {
      text-align: center;
     } </h1>
    </style>

<!-- User Editable Region -->

  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.47

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 11

Link to the challenge:

You don’t use HTML tags in CSS. You just use the name of the element.

Look at the example in the instructions again:

element {
 property: value;
}

You replaced property and value correctly. Now you just need to replace element with the name of the element you want to style.

I had it like this originally, and it’s still not working.

You’ll need to paste your CSS in here so we can see what you mean by “had it like this originally”. Please use the following method.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

    <style> 
    <h1> {
      text-align: center;
    } </h1>
    </style>

You need to wrap your code in triple back ticks as described above. If you can’t find the back tick on your keyboard then you can use the </> button on the editor menu.

Ok, I just did, and edited the prior comment. Thanks for helping

This is the same code as you originally posted. As I mentioned above, you don’t use HTML tags in CSS. You just use the name of the element. So remove the opening and closing h1 tags. Then look at the example again:

element {
 property: value;
}

You’ve done the part between the curly braces correctly. You just need to replace element with the name of the element you are styling.

Ok. the directions state to center my h1 using that format. Also that my h1 should be in my style.

I am completely new to this. I’m trying to learn. I haven’t worked with computers in 15 years. That’s why I’m taking this course.

You are doing fine. You are almost there. Did you remove the opening and closing h1 tags from your code? Once you do that you just need to add the element name in front of the opening curly brace.

Actually, thank you. That worked.

If it is a selector, if I were you I wouldn’t put it like this <h1 it would be better like this h1
Apart from that, they are in the place they don’t have to be.

Yes I did. it worked. Thank you both so much.

1 Like

I saw that in your reply before you deleted it. that’s exactly what I did, and it went through.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.