Learn Basic CSS by Building a Cafe Menu - Step 13

HTML-CSS
1

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>

<!-- I have a problem in step 13 -->

    <style>
      selector 1, selector 2, selector 3   h1 {
        text-align: center;
      }
  selector 1, selector 2, selector 3  h2  {
        text-align: center;
      }
      selector 1,selector 2, selector 3   p {
        text-align: center;
      }
    </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 (Linux; U; Android 12; TECNO BF7 Build/SP1A.210812.016; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/122.0.6261.64 Mobile Safari/537.36 OPR/78.0.2254.70362

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 13

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

You have modified your code. The instructions for the step is:
Delete the three existing type selectors and replace them with one selector list that centers the text for the h1, h2, and p elements.
You need one selector for three element.
Example

one, two, three {
Property: value;
}

Using the above example.
You need to add h1, h2, pselector, in that you needtext-alignproperty with the valuecenter`
@oluwadamilolasamuel9

1 Like
4

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>

<!-- I still have a problem in step 13 -->

    <style>
      h1 selector 3 {text-align: center;}
h2 selector 3{text-align:center;}
      p selector 3     {text-align:center;}
    </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 (Linux; U; Android 12; TECNO BF7 Build/SP1A.210812.016; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/122.0.6261.64 Mobile Safari/537.36 OPR/78.0.2254.70362

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 13

5

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

7

Posting answers is not allowed here on the forum

8

oh! not aware about that. deleted already. thanks

1 Like
9

Hello!
The selector1, selector2 is used as an example. With grouping CSS selectors, you dont need to add the properties indivdually. You add it in the same group, seperating each selector with a comma.
Example:

h1, p , div {
property:value
}

You can learn more about grouping selectors here:

10

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