welcome back today we are going to be
focusing on navigation how would you
create a navigation list for your
website and this is something that every
website shares in common so of course
it's really important that you learn how
to do this and it's really easy let's
take a look at an example first if we
take a look at net huts you can see
right here we have a list of navigation
links now what these do is they allow us
to sort the postings on the website
according to category and tags so let's
learn how we can do this on our own
fictional website I'm going to open up
my code editor and of course we have a
blank style sheet in a skeleton HTML
file which links to the style sheet this
all should be very familiar to you at
this point now I give you a hint and I
noted that we need to create a list of
navigation links and when I use that
keyword when you can describe content as
a list then you should be using an
unordered list now within this list we
should have a list item containing an
anchor tag which links to the desired
page I'll create that now and we'll have
a her F and we'll set the value to a
pound sign because we don't have an
actual website in this case so we'll
link simply to pound which means nothing
and we'll call it home and I will close
out my anchor tag next I will duplicate
this a few times and we'll have our
various pages so we could have an about
page perhaps a portfolio page and then
lastly maybe contact this is fairly
common so let's see how this alone looks
in the browser and this is probably what
you would expect we have a nice list
containing anchor tags each one will
take us to the desired page but now you
might be thinking well Jeff that doesn't
look anything like the inline list of
links on net cuts okay that's okay
because remember the visuals how it's
displayed on the page has nothing to do
with the markup our goal with the markup
is to use semantic elements that
describe what the content is
nothing to do with the visuals because
we can always override that with our
stylesheet so let's do that now first I
will change the display by default list
items have a display of list item what
they would call list item but in this
case we want them to display in a line
or in line so let's adjust it to inline
and see what we get with that alone if i
refresh sure enough we've gotten rid of
the bullets because it's no longer set
to a list item display and now they're
displaying in a line now the way this
works is they will display in a line as
long as possible until the width of all
of the links combined add up to more
than the width of their container to
give you an example watch what happens
if we set their container an unordered
list and we get of a width of 150 pixels
if I reload the page you can see once
they got to contact the width would have
been too much so they are bound to that
150 pixels in which case it needs to
drop to a new line I'm going to remove
this and our next step is we probably
don't want these underlines there that
kind of looks tacky all right with the
CSS this is easy we're gonna grab the
anchor tags and note I'm being very
general here this is referring to all
anchor tags and your entire website if
you want to limit it to only the anchor
tags that are perhaps within an
unordered list you might want to do
something like this or you could also do
this next we're gonna set text
decoration to none meaning we don't want
any underline or anything like that if I
reload the page now those are gone the
next step is why don't we use a nicer
font so rather than using Times will
apply a font family and you've learned
about this of sans-serif and this will
use the most appropriate font of that
type and on your computer that will
likely be Helvetica or Arial and it
looks a little bit better but now you
might be thinking well it could use a
little more spacing between each item
that's easy to will say with the list
item give it some padding right for each
one and we'll say 10 pixels worth and
now if I reload pay attention you have
just a little bit more room as you can
see right there so the next thing you
might be thinking is
well when I hover over this other than
the fact that the cursor changes to a
pointer it's not easy to tell that these
are clickable links so why don't we
provide a little bit more visual
feedback and we will apply the underline
again when you hover over the anchor tag
and we do that by using a pseudo class
so watch what happens when I do a colon
hover this is a pseudo class meaning
when you hover over the element it is
attached to in this case an anchor tag
and in this case we'll say text
decoration and we're gonna add that back
on I'll save it reload the page and now
when I hover over it sure enough we now
have underlines good so what you can see
here is it's really very easy to style a
navigation list however you want if you
want to change the font size for some
crazy reason maybe we'll say 30 pixels
this is gonna look awful but it's to
note that you can apply any styling you
want so you can create these little
miniature animations as you can see
right there now I don't recommend you
ever do this because it's not great for
usability but it's good to know it's
possible if you decide you want to
change the color maybe to black when you
hover over it but you want the default
color to be maybe a grayish color you
can do that refresh its gray hover over
it we underline it and we turn the text
black and what's nice about this is
because we're doing CSS we can control
the visuals however we want if we decide
that we don't want this to be a
horizontal navigation menu we can bring
it back to vertical easy as pie and
that's the point of CSS it gives us full
control over the styling of our website
and note that when we want to make these
changes we never have to edit our markup
there should be a separation markup is
for content CSS files are for styling so
good job in the next lesson we're gonna
take a look at forms