Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

It is

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

<!-- User Editable Region -->

    <title>Cafe Menu</title>
      <style>
        h1, * {text-align: center;}
        
      
        
        

        

        
    
      
      </style>
      
        
      

     
    


<!-- User Editable Region -->

  </head>
  <body>
    <main>
      <section>
      <h1>CAMPER CAFE</h1>
      <p id="drone-1">Est. 2020</p>
      </section>
        <h2 class="glass">Coffee</h2>
    </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/111.0.0.0 Safari/537.36

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

Link to the challenge:

2

It is? What is? What are you struggling with in this challenge please?

3

Sorry I am still getting a hang of things. So I did this to align everything to the center. But FCC is still saying my code doesn’t pass. And the hint is says ’ you should not change the existing h1 selector.’ Below is the body of the code. I don’t know want else to do.

h1, h2, p { text-align: center }
4 
<style>
  h1 {
  text-align: center;
  }
</style>

Your original style element should like this before you complete this challenge.
You are asked to add additional selectors for h2 and p, with the same CSS attributes as above, without changing the exisiting h1 selector.
So, create two additional selectors, below the h1 selector, with the same attributes.

5

I wonder why this site changes what I posted. The code I saw that I posted wasn’t what I originally posted. Anyways, what you suggested is what I have done severally but still yet, nothing. For example, I have done what you suggested again, but the site is saying ’ you should not add a new style tag. Add the new CSS rules to the existing style tag.’ I am clearly not adding a new style tag but that hint still comes up. I don’t know what else to do.

h1 { text-align: center; } p { text-align: center; } h2 { text-align: center; }
6

Can you copy and paste your entire code please?
Click on the preformatted text </> icon and then paste all of your code between the two sets of triple backticks.
Then we might be able to see what the issue is with your code.

7

I have done this.

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

      p {text-align: center;}

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

And also done this…

h1, p, h2 {text-align: center;}

Still yet…nothing!

8

Can you copy and paste your ENTIRE code please? There may be an issue elsewhere in your code which is causing it to fail.

9

This is the entire code. Funny thing is, this exact code works on VS code.

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

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

         p {text-align: center;}

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

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

This isn’t how the h1 rule was written originally. Try using the exact same way of writing the rule that was given in the starting code.

11

Ok, I just pasted your entire code into the challenge and it passes for me.
Do you have any browser extensions enabled? They can interfere with the tests, so make sure all extensions are disabled.
Also, try reloading the page with CTRL+F5 and then resubmit the code again.
Failing all else, you could try a different browser?

12

This is the question.
In the previous step, you used a type selector to style the h1 element. Center the h2 and p elements by adding a new type selector for each one to the existing style element.
This is the hint I get:
You should not add a new style tag. Add the new CSS rules to the existing style tag.
From my code, I am not adding a new style tag. So I don’t understand why I ain’t passing this stage.
Meanwhile Jeremy I don’t understand your reply could you please explain?

13

You don’t need to copy-paste the instructions at us. We can read them in the challenge.

I mean here that you changed the code you were given. You should not do that.

This is very good advice that you should try.

1 Like
14

Thanks very much @igorgetmeabrain. It was my browser extensions after all. I disabled them and it sailed through. Thanks a lot. That challenge made me feel a little dumb because it worked in VS code. Thank you.

15

Fun fact - your browser extensions often can work by changing the CSS of the websites your are visiting.

16

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