1. Create your external css file by saving it as style.css then set up your style tags
<style>
</style>
Select all
Open in new window
2. Reference the nav tag and set your properties.
nav {position relative; left: 0; top:10%;}
Select all
Open in new window
3. Set the reference for the UL element and styles for it as well as setting the background color to green
nav>ul {list-style-type: none; width:100%; height:1.5em; padding:0; margin:0; background-color:#00FF00;}
Select all
Open in new window
4. Position the list elements in line on one row with a width of 60 pixels making sure to give 5 pixels of padding in between
nav>ul>li{display:inline; width:60px; padding:5px;}
Select all
Open in new window
5. Set a class selector to be used on the links with no underline for the link a background color of purple and text color of white
.navlinks{color:#ffffff; background-color:#FF00FF; text-decoration:none;}
Select all
Open in new window
6. Setup your navigation as such:
<nav>
<ul>
<li><a class="navlinks" href="#">Home</a></li>
<li><a class="navlinks" href="#">Contact</a></li>
<li><a class="navlinks" href="#">About</a></li>
</ul>
</nav>
Select all
Open in new window