Learn Basic CSS by Building a Cafe Menu - Step 13

HTML-CSS
1

Tell us what’s happening:

I don’t understand the whole concept of “selectors” I’ve wrote it everywhere possible but I keep getting it wrong. Please help.

Your code so far

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

<!-- User Editable Region -->

    <style selector>
      h1  {
        text-align: center;
      }
      h2  {
        text-align: center;
      }
      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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 13

2

The code you pasted above is the default code, so we can’t see what you have tried. Can you paste your own code in here so we can see what you are trying? Or explain to us what you don’t understand?

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 (').

3

Oh, I take that back, I do see you made one change:

<style selector>

You don’t want to change the <style> tags at all, so undo that change.

“Delete the three existing type selectors…”

Do you understand what that means?

“…replace them with one selector list that centers the text for the h1, h2, and p elements.”

You want to create a list of selectors. The example code is showing you how:

selector1, selector2 {
  property: value;
}

You won’t actually use selector1 and selector2 in your solution. Those are placeholders for the actual element names you want to style. In this case those elements are h1, h2, and p, so you’ll have three selectors in your list. And then you replace property: value with the actual property name and value you want to change, which in this case is text-align and center.

What you are doing in this step is consolidating the three separate CSS rules you created, one each for h1, h2, and p into one rule. You aren’t changing the styling of those elements, they will still all have their text aligned to the center. You are just making the way you write the CSS more concise.

1 Like
4

hi there!
you should have delete the existing selector those h1,h2,&p& add them in the same line such like this.
selector1, selector2{
add your property here:;
}

1 Like
5

Hey Buddy You tried well , But kindly do som echanges.

1st remove the word selector from your <style selector>.

2nd remove the h2 and p tag.

3rd put h2 and p tag after h1 by putting comma ,

   selector 1, selector2, selector3

Note : Here Selector means values like h1, h2, p

Hope You Understand !!

2 Likes