CSS Tutorial for Beginners - 41 - Vertical menu Video Lecture - Learn CSS

in this video we're going to start to
take a look at navigation menus and
we're going to start out with vertical
menus and then in a few videos we'll
take a look at horizontal menus so we've
got our UL element our li element and
our anchor element and so if you look
over here at the web page this is the
default look without any styling we
haven't put any rules in yet and so this
is the default that you would get in the
browser and this is basically what an
unordered list does you'll get these
bullets the unordered list is a block
level element so that's why this is in
the top down order and of course the
anchor is our actual link and so that
comprises the entire area for the link
that we can click on and that of course
is the hand as I said now most of the
action will take place with our link
that's what we're going to be for mate
so we're going to put most of our CSS
rules in this area but we do need to do
some initial things against the
unordered list so let's just go ahead
and copy and paste here and now we've
got our unordered list selector now the
first thing we want to do is get rid of
these bullets so in order to do that we
use the list style property and we set
that to none so let's refresh and there
you can see now the bullets for the
unordered list are gone now the next
step and by the way this is a very
common practice that you'll see web
developers do they will get rid of the
padding and the margin for the unordered
list because we want to control that
down at the anchor tag level not at the
UL level so let's go ahead and do that
so we're going to set the padding to
zero margin to zero we'll hit refresh
and there you can see all the padding
and margins are gone because again we
want to control this down at the anchor
tag level and remember the anchor tag is
within the li element and the li element
is within our unordered list so let's
create our CSS rules for our anchor tag
now this is the path again the UL to the
LI to the anchor tag now you don't
actually have to put these in here we
could actually just specify a for the
anchor tag but it's good practice to put
the paths in so that you kind of know
the path when you see the CSS rule so
okay the next thing we want to do is get
rid of the underline for our links so
let's go ahead and do that and the
property we use there is text -
decoration we set
at two none so we'll go ahead and
refresh our webpage and there you can
see now the underlining is gone now what
we want to do is set a font for our
links because you usually don't want to
use the browser's default so let's go
ahead and do that now I like to use
Georgia but you can experiment with the
fonts that you like you could use
Helvetica you could use Arial and you
will remember that the browser will try
to load this font first and then if it
can't load it it will load the second
one and on and on so let's go ahead and
refresh and there you can see now we
have our Georgia font but now for our
menu we want to have a nice background
color so let's go ahead and create that
and of course we use the background
color property I'm going to use a hex
code here so it's going to be 5 C 7 5 5e
so that's what we're going to use but
you can pick whatever color you want and
you can see that's a nice green now that
text doesn't stand out so well against
the green so let's actually switch the
color from purple to white and we do
that of course with the color property
and if we refresh here we can see that
looks much better now you'll notice that
the background color green is only
sizing itself to the area of the text or
the link and that is because the anchor
tag is an inline element remember the
difference between a block element and
an inline element remember we talked
about that well you remember it's not in
the flow so this background color will
only stretch to the size of the text so
we have to convert our anchor tag to a
block level element so that our
background color will stretch out
further than the text so let's go ahead
and do that and you will remember that
we use the display property and now
we're going to go ahead and convert that
to a block if we refresh this now the
background color stretches all the way
to the end of the page because it's in
the flow but obviously we don't want our
menu stretching all the way to the end
of the page so let's shorten this up a
bit and we'll enforce a width and we'll
make the width 80 pixels now you can
make that whatever is appropriate for
your website but we're just going to use
80 pixels here but again this isn't the
standard or anything like that
you can size it to whatever you want
your menus to look like so let's go
ahead and save this well refresh there
you can see that looks much better but
now we want these links to look more
like buttons
also it's kind of hard to tell if you
notice which button is different from
the other one so let's put some margin
between all of our anchor elements and
so we'll set the margin to 5 pixels and
you'll see now we'll get some space
between our anchor elements and there
you can see these look more like buttons
now you'll notice how the text is
crunched up right against the border and
so let's put some space between the text
and the border and you'll remember that
CSS box model what's in between the
content in this case the text and the
border it's padding so let's stick some
padding in there and we'll make it 10
pixels now you'll notice that when we
refresh this page this will actually
increase the size of our buttons in our
menu so just be aware of that and you
can see now it's much bigger because
we've added 10 pixels all the way around
our content now let's add a border
around our links now if you don't want a
border you don't have to do this but I'm
just going to show you how to do that
and we've done that in previous videos
but let's go ahead and add a border
we're going to make it 1 pixel we're
going to make it solid we're going to
make the color red and we're going to
curve the corners of our buttons so
let's go ahead and save that and there
you can see now we have that nice little
border around the button now some people
like the text sort of closer to the left
side of the button other people want it
centered so again that is preference but
I'll show you how to Center that and we
use the text align property and we just
set it to Center if we hit refresh there
you can see now we've got our text
centered now you'll notice so far we
only set a width we didn't put a height
in our links here so we're actually
letting the browser determine the height
so you can do that or you can actually
set a fixed height so let's set a fixed
height and we'll save this well refresh
this there you can see we've increased
the size of our buttons now you'll
notice though that the texts now are no
longer vertically centered and that's
because we specified an absolute height
the browser
no longer will vertically align these
for us so we have to use a property to
do that and the property we use is
called the line height property now we
want to set this to 25 pixels in other
words we want to match the height and
what this does is it will actually split
this in half so it'll put 12.5 pixels on
the top
and it will take 12.5 pixels and put it
on the bottom and then it will be
perfectly centered to the size of our
link which is 25 pixels so again -
perfectly vertically Center this you
want the line height to match the height
and so let's see how that works and
we'll hit refresh and there you can see
they're vertically aligned perfectly now
okay that's going to do it for this
videos now I want you to save this code
because in the next video we're going to
add some effects to these buttons see
you guys that