Need help on step 12 of css

HTML-CSS
1

I dont understand this step (step 12):
Its seems i found language gap here

  **Your code so far**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    element {
      CAMPER CAFE: 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.0.0 Safari/537.36

Challenge: Step 12

Link to the challenge:

2

what is element?delete that, change it to what her say what her want

3

the name of the element is h1, the name of the property is called text-align. so remove “element” and replace it with h1; the same goes for “CAMPER CAFE” and text-align.

4
h1 { text-align: center; }
5

remove element use selector h1 then align your style after opening bracket

6

I’ll try to explain this a little bit more thoroughly than freecodecamp. The <style> element allows you to run a separate programming language inside your html that has completely different goals and rules to html. CSS’s goal is to style your html to look better with more unique styles and is not about the content.

So where you put element was just an idea of what you can but there. The element is placeholding basically for a piece of code that will target your CSS to a specific html element. For example:

p{
// Placeholder
}
h1{
//Placeholder
}
body{
//placeholder
}

You can see how each of the places where h1, p, and body would reference a piece of html code. This way of referencing html is called an element selector. It basically targets all type of that element with the specific CSS you later implement.

Now how do we actually style the html elements? This is with properties. You can image properties similarly to attributes, like hair color or height. CSS supports many different properties that can each be set to different settings. Don’t worry if this is a little over your head. You will learn this very shortly.

p{
text-align: center;  //aligns text to the center of an html element
}
h1{
background-color: #000000;  //Use a hexadecimal value to set the h1 element background color to black.
}
body{
height: 200px; //sets the body html height to be 200 pixels.
}

Where you went wrong with CSS is that you need to switch gears. HTML ultimately focuses on the content of a webpage (images, text, etc.) while CSS controls how it should be displayed (font-color, background-color, size, etc.).

So instead of targeting the element, you need to target your CSS at your heading. Instead of targeting the content of an html element, you need to tell your html to align its text differently. HTML controls the content, CSS controls the HTML.

I really hope this helps someone to learn a little bit more about CSS.

1 Like
7

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