Can anybody help, whats the multiple style sector suppose to look like. have i got this right?

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

  **Your code so far**
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    h1 {
      text-align: center;
    }
    h2 {
      text-align: center;
    }
    p {
      text-align: center;
    }
   h1,h2,p{
     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/101.0.4951.67 Safari/537.36

Challenge: Step 14

Link to the challenge:

hi, im struggling with what ive done wrong here. what is the correct way to form the multiple style selector. if you know what i mean.

You have the correct code, but you need to delete the top part. Your code should look like this:

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

What this does is it gives the same styling to the h1, h2, and p elements in fewer lines of code. The rest of the code needs to be deleted, otherwise you are just repeating yourself. It is important to try to avoid this, as if you do this in a real project, it can cause your code to work incorrectly (from personal experiance).

Hopefully, that makes sense!

1 Like

Thanks for your response, Ok so basically in terms of practical world usage it would create bugs? And isn’t necessary needed and is just something to know? Is that correct.

Sorry but that is not what I meant. This is very useful because you can shorten the length of your code signifigantly (which is a good thing). What I meant is that you mistake brings up a important tip. Be careful to not use multiple seperate sectors like this:

h1 {
      text-align: center;
    }

h1 {
      text-align: center;
    }

In this example, we apply the same thing to the same element, but use two seperate sectors. In this case, at least your code would still work (though it is longer than it needs to be). However, if you make this mistake often enough, it can sometimes cause certain styling to not work (such as the margin properties).

It is also useful to mention this can sometimes occur when using even just similar sectors (such as nav, and nav li). I just wanted to mention this as this caused me some trouble with my projects, and I wanted to give you this tip so you can avoid it yourself. If anything, using the multiple style sector actually helps to avoid this issue!

Hopefully that clears things up a bit! Sorry about that.

1 Like

thanks for your help you clearly explained i just wanted to check i’d understood it properly :smile: