Introduction to CSS (Part 1)

1. In the head tags 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 to ensure no browser defaults are present

nav>ul {list-style-type: none; width:100%; height:3em; padding:0; margin:0;}

Select all Open in new window

4. Position the list elements in line on one row with a width of 60 pixels

nav>ul>li{display:inline; width:60px;}

Select all Open in new window

5. Create your navigation menu as follows

			<nav>
				<ul>
					<li class="mysite"><a href="#">Home</a></li>
					<li class="mysite"><a href="#">Contact</a></li>
					<li class="mysite"><a href="#">About</a></li>
				</ul>
			</nav>

Select all Open in new window