Learn Basic CSS by Building a Cafe Menu - Step 82

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Its asking me to change the color to brown but I did put brown. Would I have to have a code for the footer?

  **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>
    <hr>
    <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>
    <hr class="bottom-line">
    <footer>
      <p>
        <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
      </p>
      <p>123 Free Code Camp Drive</p>
    </footer>
  </div>
</body>
</html>

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

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;
}

hr {
height: 2px;
background-color: brown;
border-color: brown;
}

.bottom-line {
margin-top: 25px;
}

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

.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}

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

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

/* FOOTER */

footer {
font-size: 14px;
}

a {
color: black;
}

a:visited {
color: grey;
}

a:hover {
background-color: brown; }



  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15

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

Link to the challenge:

1 Like
2

Hint: the syntax is correct but the property type background-color is not.

3

But it says brown is it a different shade?

4

brown is correct but the property-type background-color is not.

5

a:hover {
Change the color of the footer: brown;
}

2 Likes
6

ok I understand now I switched it to footer color and link color?

1 Like
7

so I just left the word color and it was correct finally. Although I dont understand why.

How does the code will know its for the footer to turn brown?

1 Like
8

You’re not turning the footer to be brown.
You are turning a link into brown when hovered.
That link is in the footer.

9

o ok its when you click it right it changes to allow user to know if they used the link?

10

not quite.

Hovering is the action of putting the mouse over a link but not actually clicking it.

11

The syntax goes as follow

Select the thing you want to style, followed by curly bracket. {
after the curly brackets follows many CSS declarations.
A declaration consists of property-type and property-value.
After you write the declaration DONT forget to close it with }

color: red

The code above means you are declaring the color to be red. width is the property-type and red is the property-value

Now which one you want to change the color to? That is where the selector comes

p:hover

This is a selector to select p elements WHEN it is hovered (when you put mouse over it)

And you combine the selectors and the declaration together becomes this :smiley:

p:hover{
  color: red;
}

This means that you apply color: red on every p element WHEN it is hovered.

For future reference, please study why

Hope that clear things up about how it can select the text in the footer. :grin:

2 Likes
12

Thank you so much for taking the time to further explain! Yes, the way you broke it down extremely helped me.

13

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