Flash cards
Review the key moves
What is the main idea behind CSS Navigation Bars?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<li><a ___="default.asp">Home</a></li>Put the learning moves in the order that makes the concept easiest to apply.
A navigation bar is an important component of web design.
Navigation bars helps users to easily navigate between different sections of a website.
Navigation bars are typically built with HTML list elements ( <ul> and <li>), and then styled with CSS to get a great look.
A navigation bar is typically located at the top or at the side of a webpage.
A vertical navbar
- Home
- News
- Contact
- About
A horizontal navbar
- Home
- News
- Contact
- About
Navigation Bar = List of Links
A navigation bar is basically a list of links, so using the HTML <ul> and <li> elements makes perfect sense:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>Now let's remove the bullets and the margins and padding from the <ul> element:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}Live preview
Example explained
- Set list-style-type: none; - Removes the bullet points from list
- Set margin: 0; - Resets default browser margins
- Set padding: 0; - Resets default browser paddings
Note
The HTML and CSS code in the example above is the base code used for both vertical and horizontal navigation bars, which you will learn more about in the next chapters.