Building a Cafe Menu - Step 13

HTML-CSS
1

Can anyone tell whats wrong in style element with h2 selector
Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    h1 {
      text-align: center;
    }
  </style> 
  <style>
    p{text-align: center;} </style>
    <style>
      h2{text-align: center;} </style>
  
  
</head>
<body>
  <header>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
  </header>
  <main>
    <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/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70

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

Link to the challenge:

2

Hi @noble_239

While it’s possible to put multiple <style> elements in one HTML document, I think the question wants you to put all the CSS stuff in one <style> element.

You don’t need to use <style> ... </style> for every and each selectors, just one <style> ... </style> and include all styles inside that one style element.

Like this

<style>
div{color: red;}
span{color: blue;}
</style>

Hope that helps :slight_smile:

1 Like
3

i have done this already but it doesnt work. error shows (You should not change the existing h1 selector.)

1 Like
4

What does your code look like with a single style element?

5

(You should not change the existing h1 selector.) not working na .

6

Please provide the actual code

7

style h1,h2,p{text align: center;} /style

like this ?

8

Two issues

  1. Those don’t look like correct style tags

  2. the instructions didn’t ask you to put the three CSS rules into one rule

9

In the previous step, you used a type selector to style the h1 element. Go ahead and center the h2 and p elements with a new type selector for each one.

this is my step 13
my response to this is

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

but error shows
You should add a new h2 selector.

10

You should have ONE style element with THREE CSS rules.

11

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

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

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

   <style> h2{
     text-align: center;
     }
     </style>
</head>
<body>
  <header>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
  </header>
  <main>
    <section>
      <h2>Coffee</h2>
    </section>
  </main>
</body>
</html>

what to do with this problem error.
You should add a new h2 selector.
the above done is my coding . can anyone stop my mistake! or tell the solution.

  **Your browser information:**

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

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

Link to the challenge:

12

You should have ONE style element with THREE CSS rules inside of it.

1 Like
13

you mean like this

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

this is not correct,
(You should not change the existing h1 selector.) tells the hint given by them!

1 Like
14

That is ONE CSS rule. You need THREE CSS rules.

15

Here you have THREE style elements with THREE CSS rules. You should put these THREE CSS rules all in ONE style element.

2 Likes
16

i didnt get this can u re-write the code. where i got stucked!

17

We are still not allowed to write answers for other users.

What does it look like if you try to put all three separate CSS rules into one single style element?

The code you have posted so far has three CSS rules in three separate style elements or one CSS rule in one style element.

1 Like
18

Hi, let me try to help you visualize it in a way that would make you understand.

In this code, the comments are added corresponding their elements and the CSS rules to see what are considered an element and what is considered as a CSS rule.

 <!-- this is the first style element -->
   <style> h1{
      text-align: center; <!-- the first style element has one CSS rule -->
    }
  </style>

<!-- this is the second style element -->
  <style> p{
    text-align: center;    <!-- the second style element has one CSS rule -->
    }
    </style> 

<!-- this is the third style element -->
   <style> h2{
     text-align: center; <!-- the third style element has one CSS rule -->
     }
     </style>

Now the questions implicitly asks you to make a single style element with all the CSS rules inside it.

Note: that you can put more than one CSS rule inside a style element like the example I gave you in the first comment.

Hope this helps ^^

4 Likes
19

Can u please write the code !

1 Like
20

No. We are not allowed to write answers for other users.

Asking again after someone told you no is very rude.

Please post your latest attempt and we cn help you fix it.

2 Likes