WDI Fundamentals Unit 5
Now that we've learned about layout, we're even better equipped to format our HTML and uniquely style our memory game!
Our game could use some additional styling to make different portions of the page stand out.
In this assignment you will:
background-colorto make them stand out.
maincontent on the page.
marginto give the layout some breathing room.
First let's provide a little more structure to our page. In the
index.html file for your
memory_game in Sublime Text, wrap the
h1 with a
Here's what it looks like to "wrap" an element with another element:
<header> <h1>Memory Game</h1> </header>
Now wrap the two navigational anchors — "Instructions" and "Game" — with a
Finally, wrap the rest of the content — including everything from the heading that reads "Instructions" to the images of the cards — with a
Alright! Now that we've added some structure to our HTML content we're ready to add some additional styles. Complete the following steps in the
style.css file in the
memory_game folder in Sublime Text.
header element in your CSS and give it a
30px padding on the top and bottom, and
20px padding on the right and left.
index.htmlfile, right-click anywhere within the HTML file, and select the "Open in Browser" option.
Some browsers give the body a
margin by default, which will create a bit of space around the edges of the page. We want to remove this margin since we want our
header background to touch the edges of the browser window. Apply the following style to the
body selector in your
style.css file to remove this margin:
Now find the styles you are applying to the
h1. We also want to remove the margin from the
h1 so that our header takes up a little less space. Set the
margin for the
Now let's add some styles to the
nav. Give the
nav element a
20px padding on the top and bottom.
The anchors in our
nav are a little too close together! Give the
20px margin on the right and left sides.
Now let's center the
main content of our page. Give
35px margin to the top and bottom of
main and set the left and right margins to
auto to center the main section.
Our card images also look like they are spaced a little too tightly. Give each
margin on the top, and
margin on the right and left.
Nice — our game is really coming along!