Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

Tell us what’s happening:
i dont really understand what its telling me to do

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style>
      <h1>CAMPER CAFE</h1>
    </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/104.0.5112.102 Safari/537.36 OPR/90.0.4480.117

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

Link to the challenge:

2

this step is teaching you a new language called CSS (cascading stylesheet language)

So it does not look like html

What you’ve added into the style element is HTML syntax not CSS. So erase that and instead pay attention to the sample syntax given in the exercise.

For convenience, I’m pasting that here for you:

element {
 property: value;
}

This is how CSS rules look like. CSS rules are created to tell the browser that you want to do something special with the styling of specific HTML elements.

The first word “element” should be replaced with the name of the element you want to modify. (Say you want the browser to do some cool animation in the future to a specific HTML element, then the first step is to identify the name of the element. )

Element names like h1, h2, p, a, body, etc. These are all element names.

Next the syntax block is showing you how to add CSS properties (or style properties) inside the element’s CSS rule.
CSS style properties are keywords that the browser understands. So they must be written down exactly as provided.
In this case the css proeprty you are being told to use is called “text-align” so use that word on the left of the colon.

Finally you need a value on the right of the colon. In this case the value is “center” .

Once you’ve written this correctly the browser will understand that you want to target the h1 elements and make them all centered on the page.

3

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