Curriculum
Course: CSS
Login

Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1
Text lesson

Navbar

Demo: Navigation Bars

Vertical

Horizontal

 

 

 

 

 

 

 

 

Navigation Bars

Effective navigation is crucial for any website’s usability.

CSS enables the transformation of basic HTML menus into visually appealing navigation bars.

Navigation Bar = List of Links

Standard HTML serves as the foundation for constructing a navigation bar.

In our illustrations, we construct the navigation bar using a standard HTML list format.

Given that a navigation bar essentially consists of a series of links, employing the <ul> and <li> elements is highly appropriate.

Example

<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>

Next, let’s eliminate the bullet points as well as any margins and padding from the list.

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

In the provided example:

  • Setting list-style-type: none; removes the bullet points, which are unnecessary for a navigation bar.
  • By applying margin: 0; and padding: 0; we eliminate default browser settings, ensuring a clean layout.

The code in the example above is a standard template utilized in both vertical and horizontal navigation bars, topics we will delve into further in the upcoming chapters.

 

 

Previous
Next