Learn Basic CSS by Building a Cafe Menu - Step 14

HTML-CSS
1

I am now doing CSS and creating my own Coffee Shop menu. I am stuck on step 14, I need some help and advice please.

  **Your code so far**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    selector {
      text-align: center;
    }
      {
      text-align: center;
    }
      {
      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/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello.

This is incorrect. In order to understand why, here is the original code:

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

The step asks you to include the h1, h2 and p elements in a single rule.

You can do this by using a selector list. A selector list is simply several selectors separated by a comma, e.g:

element1, element2, element3 {
  property: value;
}

This gives all elements listed the rule property: value.

3

Does this mean that the h1 h2 and p elements should be deleted and I should replace them with a element/selector. Then, add a property of the element/selector and the value of text-align?

Sorry for so many questions.

4

Don’t worry!

If I understand correctly, yes.

Basically, what this step asks you to do is good practice, because when you have a group of elements that will have the same properties, it is much more readable when you have one single block of code dictating the properties, instead of one block for each individual element.

As a note, you can also do this when they only have a few properties in common. Example:

h1 {
  background-color: black;
  color: red;
  text-align: right;
}

h2 {
  background-color: black;
  color: red;
  text-align: left;
}

You can group their overlapping properties into a single block of code by using a selector list, and then set the other properties using only the h1 and h2 selectors. In cases like these whether this helps or not will be your own criteria.

5

Hey,

Yeah, after so much research this one has really thrown me off track. Still stuck on this one and trying my best to work it out without putting so many questions.

6

Ok, i’ve just solved it so sorry.

7

Hey how did you manage to solve it I can’t seem to work it out?

8

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