Learn Basic CSS by Building a Cafe Menu - Step 12

HTML-CSS
1

The hint is telling me I should have an h1 selector in my style element.

Is my spacing correct? I don’t see the error.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style h1= {
    text-align: center;
    } </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/105.0.0.0 Safari/537.36

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

Link to the challenge:

2

the syntax template you should be using is:

element {
 property: value;
}

Make your h1 selector look like this (Note: there are no = or < or > in this)

3

Finally an answer that makes sense! thank you

4

Step 12

You can add style to an element by specifying it in the style element and setting a property for it like this:

element {
 property: value;
}

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

Here is the Hint i’m getting:

You should have an h1 selector in your style element.

What is a selector??

5

Hi!
Can you please share your code and a link to the lesson? It is hard to help without seeing your code and a link to the lesson makes it easier to check your code. If I can see your code I can know the best way to explain selectors to you.

Also in future, use the ‘ask for help’ button. It will provide your formatted code, a lesson link and browser information. Which gives all the info needed to answer your question quickly.

6

A selector tells CSS what element to affect, ie. div, p, and body or in the case of classes = .example and for id’s = #example.

In the case of selecting html elements, CSS will affect ALL elements that match that type. So using classes and id’s helps specify which element you want.

7

Here is the ## Hint:

You should have an h1 selector in your style element.

8

Okay so,

Here is an example of a selector.

p {
color: red;
}

This will turn all <p> elements red. The selector is the p, the property is color and the attribute is red.

So, if you want to create a h1 selector with the property of text-align and attribute of centre you would follow the same format as with the p element example. Does this make sense?

10

I think so! I am going to try again

11

Thank you so much!!! :slight_smile:

12 
   </style>

Here is the hint. What is my error? :   <style h1 {property: text-align; center} > </h1>
   </style>
13

The property IS text-align, so remove that, put text-align where property was and put center between the : and ;

14

Like this? I’m not understanding the syntax…

15 
  <style h1 {
      text-align:center; 
      }>
    </style>
16

Wow…

 <style h1 {
      text-align:center; 
      }>
    </style>
17

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

18

Okay, so lets go back to how html elements work.

Html elements must have correct opening and closing tags. Content can go in-between these tags. Attributes can go inside html tags, but a selector is not an attribute.

This is correct.

<p>This is a paragraph</p>

This is incorrect.

<p this is a paragraph <p

The selector code for the h1 element to align in the center is correct and the closing tag of your style element is correct.

But the opening style tag is missing its closing bracket. There also is an extra bracket after the last curly bracket that should not be there.

19

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