Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

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

Your code so far

Step 12

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.

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

When trying diffrent types of css style tags it keeps showing this error
“You should not add a new style tag. Add the new CSS rules to the existing style tag.”

1 Like
2

@amar501 welcome to the community!

Can you paste here your complete code solution?

1 Like
5

I tried but when I past it it shoes as a result not as aa code

6

I see. Try to enclose your code like this…

```
your code here
```

Those characters are backticks located on the key together with the ~ character.

1 Like
7

I added a point(.) in the elements so they show up

<!.DOCTYPE html>

<htm.l lang="en">
  <hea.d>
    <meta. charset="utf-8" />
    <ti.tle>Cafe Menu</title>
    <st.yle>
      h1 {
        text-align: center;
      }
      h2 {
        text-align: center;
      }
      p {
        text-align: center;
      }
    </style>
  </hea,d>
  <bod,y>
    <m,ain>
      <h.1>CAMPER CAFE</h1>
      <.p>Est. 2020</p>
      <sect.ion>
        <h,2>Coffee</h2>
      </sect,ion>
    </ma,in>
  </bod,y>
</h,tml>
8

Those . and , are unnecessary and are syntax errors.

Based on you code solution, you’re missing a closing </style> tag.

9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
10

so like this ?

t<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style>
      h1 {
        text-align: center;
      }
      h2 {
        text-align: center;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>
1 Like
11

Pretty much, yes except the extra t character.

So, this code solution does not pass?

12

YES SIR it tells me that I should not add a new style tag. ad to Add the new CSS rules to the existing style tag and when I do this

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

it still shows an error

1 Like
13

You can use this solution, without the extra t character in the DOCTYPE definition, and then hard reload the page Ctrl + Shift + R to clear the browser cache.

Somebody encountered this before, and resolved it by using a different browser.

14

the t was just a mistake it’s not in the original code I think there’s something wrong with the system cuz I tried what you told me and it didn’t work at all . thank you for spending time to help I appreciate it

15

If your code is still not passing, please post your full updated code

16 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style>
      h1 {
        text-align: center;
      }
      h2 {
        text-align: center;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>
17

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