HTML and CSS Reference
In-Depth Information
step-by-step
1.
Open your text editor.
2.
From the Lesson_15 folder, open
tpa.html
.
3.
Put your cursor before the code
<div id=”content”>
and press Enter (Return).
4.
Enter the following code:
<div id=”nav”>
<ul>
<li><a href=”Final/home.html”>HOME</a></li>
<li><a href=”Final/planets.html”>PLANETS</a></li>
<li><a href=”Final/flights.html”>FLIGHTS</a></li>
<li><a href=”Final/book.html”>SUIT UP</a></li>
</ul>
</div>
5.
Put your cursor before the code
</style>
in the
<head>
section of the document and press
Enter (Return).
6.
Enter the following code:
div#nav {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
color: white;
width: 740px;
font-size: 30px;
margin: 20px auto;
overflow: hidden;
}
7.
Press Enter (Return) and enter the following code:
div#nav ul {
margin: auto;
width: 688px;
list-style: none;
}
8.
Press Enter (Return) and enter the following code:
div#nav ul li {
float: left;
width: 170px;
text-align: center;
}
9.
Press Enter (Return) and enter the following code:
div#nav ul li a {
line-height: 40px;
display: block;
color: white;
background-color: #00F;
text-decoration: none;
}
