Learn Basic CSS by Building a Cafe Menu - Step 11

HTML-CSS
1

Tell us what’s happening:

it took me days to figure out this simple code and gave up and decided to look it up and apparently the h1 element was just h1 without the opening and closing tag, and on previous problems i have struggled, i think there has to be a better indication of how to actually do the code and be more specific, at least in my journey of trying to learn as a beginner

Your code so far

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

<!-- User Editable Region -->

    <style>
      <h1>CAMPER CAFE</h2> {
        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/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 11

2

hi there

you open with h1 and closing with h2 ?

<h1>CAMPER CAFE</h2>
1 Like
3

yeah that was an accident but it doesnt accept if i do

CAMPER CAFE

, instead it is just h1, but i didnt know you dont add the heading and closing tags

4

Can you add your current code?

5

to style the h1 element you follow this syntax:

element{
property: value;
}

the element is h1, with the property as text-align and the value as center.
Hope this helps, Goodluck!!

1 Like
7 
<style>
  <h1>CAMPER CAFE</h1> {
    text-align: center;
  }
</style>

this one? following along with the element

8

not really, u don’t need d brackets.
in my example i said you only needed d elementname no brackets or anythings. If ur element is p, you’ll style it like this:

p{
font-size: 30px;
}

without affecting your earlier code. Simply call the element (not with your mouth of course) but by declaring it on your code like what i did above and it will respond.

1 Like
9

Ok I understand now, but why didn’t the problem tell me I didn’t need the brackets to put the element cause all I have learned was elements go with opening and closing brackets.

2 Likes
10

hi!

html and css have diffrent syntex.

you are writing a css rule for h1 element above. within the css rule, element did not need the element text CAMPER CAFE, nor the angular brackets and slash <h1></h1>. only need the element name.
the angular bracket and slash are used only for HTML code.

2 Likes
11

Hey there,
first of all you need to understand, you are learning TWO languages at the same time.

One is HTML (HyperText Markup Language), which is used to define the structure and content of your page, like defining different headlines and paragraphs etc. Your code example is an HTML document.

The other language is CSS (Cascading Style Sheets) and responsible for enhancing your structured content with layout, like positioning, colors, borders, fonts and so on.

Your HTML document is the point to start creating a webpage. In the document’s header you give instructions how to process the content. Here you may define which styles to use for layout, either by linking to a CSS file or - as in your case - inline by writing it directly between opening and closing style-Tags.

So the style-Tag itself is HTML, everything wrapped in it is CSS.

HTML says, I am defining a lvl 1 headline by wrapping it in HTML tags <h1></h1>.
CSS now says, oooh, I know there might be lvl 1 headline elements marked by the keyword h1.
So CSS takes the keyword for an HTML element and defines how to style it (wrapped in curly brackets).

/* CSS */
keyword_for_html_element {
  attribute: value;
}

I hope, this will help you get the direction.

2 Likes
12

@hasanzaib1389 @Mephi have said it all. Different languages have their syntax. What u have been doing is that of html i.e:

<elementname></elementname>

while for css is:

elementname{
property: value; 
}

so I hope you understand. Goodluck on your coding journey ahead and Happy Coding :smiley: :smiley: :hugs: :pray:t4:.

1 Like
13

ohhhh ok all these explanations helped a lot, this is the guidance i needed, thank you all for the responses i needed since im just a beginner and i really love coding and want to learn and become good

2 Likes
14

Literally just follow the instructions, i was stuck on it for 5 minutes then thought about it. It is very straight forward

1 Like
15

You are very welcome

Goodluck in that! Happy Coding and a succesful journey ahead :smiley: :hugs: :hugs: :pray:t4:

1 Like