Learn Basic CSS by Building a Cafe Menu - Step 13

HTML-CSS
1

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

Everything looks right but still not accepting this

Your code so far

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

Your mobile information:

SM-A032F - Android 13 - Android SDK 33

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

Link to the challenge:

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

There is nothing called <selectors>, read the challenge description again and understand the example provided and hopefully you’ll get it.

4

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

5

I guess this is the initial code for the challenge ?

You need to do what the challenge asks you to do like in the example provided.

6

Example

selector1, selector2 {
  property: value;
}

Delete the three existing type selectors and replace them with one selector list that centers the text for the h1, h2, and p elements.
Reset your challenge and try again.
@headbreak51

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

selector2, h2 {
text-align: center;
}
p {
selector3, text-align: center;
}

8

I don’t what it wants me to do

9

In CSS, you can select many elements and apply shared styling to all of them.

Suppose you have this:

.text {
   color: red;
}
.text-heading {
   color: red;
}
.text-main {
   color: red;
}

As you see, they all have the same styling as color of red.
There is a better way to make the above CSS shorter and more readable:

.text, .text-heading, .text-main {
   color: red;
}

You selected all elements you want to apply the same style to them separated by commas.

As you can see, it has the same effect but much shorter and more readable.

If you understand it, read the challenge again and you should get it.

1 Like
10

This is most helpful.
So I understand though, the h1, h2, and p elements are also considered as “selectors?”

11

Hi there!
Sure, you can also style it like that:

h1, h2, p {
   color: red;
}

And in the future, please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

Thank you.

12

Mod edit: removed solution

13

@king50801011

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.