Skip to Main Content or Page Contents
HTML5 & CSS 3 Tutorial
Navigation Bars HTML & CSS Tutorial
How to design HTML / CSS Navigation Bars.
Navigation Bars using or <ul> plus <li> tags
This Page's Contents
Very Simple Navigation Bar using <p> tags
What is a Navigation Bar (Navbar)?
Very Simple Navigation Bar using <p> tags
HTML
<nav class="border1 shadow1">
<p>
<a href="#">Link one</a>
<a href="#">Link two</a>
<a href="#">Link three</a>
<a href="#">Link four</a>
</p>
</nav>
<p>
<a href="#">Link one</a>
<a href="#">Link two</a>
<a href="#">Link three</a>
<a href="#">Link four</a>
</p>
</nav>
Note: To increase the gap between the links, 2 spaces are applied using a standard space via the space bar on the keyboard plus a non breaking space ;
CSS
/* Don't alter the order of a:link, a:visited a:visited and the combined a:hover, a:active, a:focus */
a:link,
a:visited,
a:hover,
a:active { font-size: .9rem; font-weight: normal; text-decoration: none; }
a:link {color: Sienna;}
a:visited {color: DarkGoldenRod ; }
a:hover,
a:active,
a:focus { color: Bisque; background: Sienna;}
nav {background: Bisque;}
.border1 {border: 2px solid sienna;}
.shadow1 {box-shadow: inset 1 1 10px Black; }
Standard <ul> <li> Nav Bar
Programs
Video Editor
Filmora 10 Video Editor
Hosting & Domains
Hostgator
This site is hosted on Hostgator
123 Reg
Bluehost
Anti Virus Software
Kaspersky
Norton
AVG
Web Site Templates
DVD Tutorials
Books
CSS: The Missing Manual
CSS Pocket Reference
Html5 and Css3 All-In-One for Dummies
Web Design
Build Your First Website In Simple Steps
Responsive Web Design with HTML5 and CSS3