Learn Basic CSS by Building a Cafe Menu - Step 11

HTML-CSS
1

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

Your code so

{text-align:center;}


far

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

<!-- User Editable Region -->

    <style><h1> {text-align:center;} </h1>
    </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/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

It’s helpful if you can learn to describe the issues which you are facing, including any error message you might be seeing. Not only is this a vital skill in coding but also, the more you say, the more we can help!

In this challenge, you should be adding some CSS code to your HTML document.

Your syntax is not quite correct. As described in the challenge description, the syntax for adding CSS selectors and property/value pairs is as follows:

element {
 property: value;
}

Whilst you’ve added the property/value pair correctly, you should not be using HTML tags for the selector. Simply replace the word ‘element’ above with the element which you are selecting (in this case h1).

3

CSS syntax is different then HTML syntax. We target elements by using selectors. If you are targeting a class you should type a dot followed by the name of your class and then a pair of curly brackets ex:.title{}. Then all elements that have that class as the value of its class attributes will get its styling applied to it. If you want to style all elements of a certain type, for example all buttons on your page, then you type the elements type without an dot ex:button{}.

In this case your styling an element type so you should simply type h1 followed by a set of curly brackets where your styling attributes will go inside.
Ex of targeting an h2 element by creating a selector:

h2{color:red;
font-size:56px;}
1 Like
4

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