Today’s goals:

• Create a horizontal webpage menu by styling list items and links
• Play a CSS review game

 Today’s featured website:

• https://www.supremo.co.uk/designers-eye/– Can you tell if it’s centered?

 Horizontal Website Menu

1. Let’s comment out our style tags and then add new style tags below (we can keep all CSS this way) and comment out the other link we added to the HTML. Let’s also add HTML comments to label the CSS as horizontal menu and vertical menu.
2. Let’s add ul to our style sheet with list-style-type: none; margin: 0px; padding 0px; text-align: center; and background-color: lightblue;
3. Let’s add li to our style sheet and change the display from block to inline (why?)
4. Let’s also add padding: 8px 16px; under li and line-height: 40px; and height: 40px;.
5. We need to style the links inside our menu. Add a with curly brackets { } to the style sheet below li. Add text-decoration: none; to remove the underline. Add padding: 10px;. We must add display. Here is where inline-block comes in handy. Adding display: inline-block; to our links means we can have them line up next to each other while also styling them to look like a menu.
6. Finally, let’s change the background-color on hover
7. Let’s take another look at these examples. There are several ways to create different vertical and horizontal website menus. These go beyond the basic stuff we just did.

 CSS Review Game

1. Download this code and copy/paste into a new Notepad++.
2. Play this game yourself or with the person next to you.
3. Review the answers with the class when you’re done