Designing a style for menus

[ProjectX]

center the #menu horizontally
setting its margin-left and margin-right properties


Next, you want to center the #menu horizontally. You can do this by setting its margin-left and margin-right properties to auto. Think of the margin as invisible space around an element. Using these two margin properties, center the #menu element within the body element.

#menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}

[ProjectX]

A class selector

A class selector is defined by a name with a dot directly in front of it, like this:

.class-name {
styles
}

To apply the class's styling to the div element, remove the id attribute and add a class attribute to the div element's opening tag. Make sure to set the class value to menu.

<div class="menu">

[ProjectX]

Background of the page.

Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page.

Delete the comment and its contents inside the body type selector. Now add a background-image property and set its value to url(https://cdn.freecodecamp.org/curriculum ... /beans.jpg).

body {
background-image: url(https://cdn.freecodecamp.org/curriculum ... /beans.jpg)
}

[ProjectX]

Article Element

It’s looking good. Time to start adding some menu items. Add an empty article element under the Coffee heading. It will contain a flavor and price of each coffee you currently offer.

<h2>Coffee</h2>
<article> Toffee £3</article>

______________________________________________________________________________

article elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two p elements inside your article element. The first one's text should be French Vanilla, and the second's text 3.00.

<article><p>French Vanilla
<p>3.00
</article>