Watch Introduction to CSS (Part 2)

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