Learn Basic CSS by Building a Cafe Menu - Step 63

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
topography of heading elements (e.g. h1, h2) is set by default values of users’ browsers.

Add two new type selectors (h1 and h2). Use the font-size property for both, but use the value 40px for the h1 and 30px for the h2. Please who can help me pass this level

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet"/>
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p class="established">Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article class="item">
          <p class="flavor">French Vanilla</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
        </article>
        <article class="item">
          <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
        </article>
        <article class="item">
          <p class="flavor">Hazelnut</p><p class="price">4.00</p>
        </article>
        <article class="item">
          <p class="flavor">Mocha</p><p class="price">4.50</p>
        </article>
      </section>
      <section>
        <h2>Desserts</h2>
        <article class="item">
          <p class="dessert">Donut</p><p class="price">1.50</p>
        </article>
        <article class="item">
          <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
        </article>
        <article class="item">
          <p class="dessert">Cheesecake</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
        </article>
      </section>
    </main>
  </div>
</body>
</html>

/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

/* This is where am stuck, my code here is not working  */
.h1 {
font-size:40px;
}
.h2 {
  font-size:30px;
}


.established {
font-style: italic;
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}

h1, h2 {
font-family: Impact, serif;
}

.item p {
display: inline-block;
}

.flavor, .dessert {
text-align: left;
width: 75%;
}

.price {
text-align: right;
width: 25%
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello!

It looks like you do not need the periods in front of h1 and h2.

So when creating type selectors with elements (h1, h2, p, etc.), you do not need the period in front of the element name. It would look something like this:

h1{
  font-size: 40px;
}

However, when dealing with class names, as you did with the “established” class in this project, you need to include the period in front. A type selector for the class “example” would look something like this:

.example{
^ Notice the period in front in this instance
}

I hope that helps! Good luck and happy coding!

3

I have tried several ways but yet the code does not pass

4

Is it still not passing when you remove the two periods in front of h1 and h2? Like this:

h1 {
font-size:40px;
}
h2 {
  font-size:30px;
}

I tried and it passed for me. If it’s not letting you pass, it may be a different problem. :thinking:

5

Thank, the code passed

1 Like
6

I am glad to help! Good luck!

7

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