Learn Basic CSS by Building a Cafe Menu - Step 11

Tell us what’s happening:
Describe your issue in detail here.
I have problem with this code as I cannot figure how to write it properly.

Center your h1 element by setting its text-align property to the value center .
Your code so far

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

<!-- User Editable Region -->

    <style> H1{ 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.15

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

Link to the challenge:

H1 needs to have a lowercase h, as otherwise it isn’t targeting the h1 elements of the html doc.

I believe this is a bug in the tests. Element names in HTML are case insensitive, which means they can use whatever combination of lower and upper case letters you want. Thus, you can also use upper case in element names in CSS. So technically, H1 should be accepted by the tests. Also, according to the specs, CSS type selectors for HTML elements are always converted to lowercase, so it shouldn’t matter if it is H1 or h1.

But in the real world, everyone always uses lowercase for element names and thus you should too. So think of this as the tests enforcing best practices to always use all lower case for element names :slightly_smiling_face:

I did changed to lower case and it worked, it is my first time coding it is a lot of fun to créate however i am still clue less about all rules.

Thank you so much

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