Styling with CSS - Part 21 - Navigation Bar Video Lecture - IT & Software

welcome to the Doubletree school's CSS
navigation bar tutorial having
easy-to-use navigation is important for
any website so in this tutorial I will
show you how to style a list of links
into a navigation bar like this a
navigation bar needs standard HTML as a
base and since the navigation bar is
basically a list of links using the UL
and Li elements makes perfect sense so
here we have a list of links the regular
style so it looks like navigation bar
let's start by removing the list markers
since the navigation bar will not need
them so we set the list style type to
none and then we set the margins and
padding to zero to remove any browser
default and now we have a list of links
that we can use as our base for our
navigation bar let's start by building a
vertical navigation bar so we need to
style the links or a elements
so let's start by setting this play lock
of displaying the links as block
elements we'll make the whole area
clickable and not just the text it also
allows us to specify the width and since
block elements take up the full width
available by default I want to specify a
width a suit sauce now we set the width
to 120 pixels and you can see that not
just the text is clickable but the whole
were 120 pixel area let's add some
background color and change the color of
the text
now let's remove the underline from the
links and center align the text
now we want to text to be bolder and we
wanted to show in all uppercase case
letters now let's give the text some
space by adding padding now we want to
add some interactivity on the background
color to change when the user Mouse's
over a link so the style rule we created
we want to change it to apply to link
and visit it that means unvisited and
listed links I want to create a new rule
for Hoover and active
where the background color changes to
green or specifically a darker green now
we have a fully style vertical menu
let's leave this example for now and see
how we can create a horizontal
navigation bar there are two ways to
create a horizontal navigation bar using
inline or floating list items let's see
how we can use inline list items here we
have a horizontal linked list it's been
created by setting display inline for
the list item elements by default list
item elements are block elements by
setting it to inline we remove the line
breaks before and after each list item
and display them on one line however we
can't use this method if you want the
links to have equal width since an
inline element cannot have width so
let's go back to our previous example
where we created a vertical navigation
bar and see if we can change it to
horizontal here we have links we would
equal width since the a elements have
been set to display block and as a
specify width now if we float these list
item elements they will slide next to
each other let's see
we started to float left and the items
will prepare next to each other on the
horizontal line so now we have a fully
style horizontal navigation bar this
concludes our tutorial for CSS
navigation bar thank you for watching