XHTML and CSS Tutorial - 25 - Styling Links Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys is Bucky and
welcome to your 25th XHTML and CSS story
and in this tutorial we're going to be
going over how to style the links and if
your eyes are like alright I know that a
link is a so if I just go ahead and type
a and write how I want to link to appear
it's good no need to watch this tutorial
well not so fast because a link is
actually a lot more complicated than you
might think a link is actually composed
of something called States and a state
is basically when and how you press the
link so I'm just going to go through
different states and then you guys are
going to understand what I'm talking
about there's one link for when the page
is first visited there's another state
for when the link has been clicked
there's another state for as you're
mousing over them link and there's the
last state is as your mouse button is
down and as you are clicking the link so
one link can have four different styles
and they typically do have four
different styles believe it or not so
let's go ahead and let me show you how
to not only change the styling on the
link but change is styling on each
different state so let's go ahead and
just add um well first of all we know
that element four link is a so let's go
ahead and add a link on our screen so a
href hello a href equals of course is
going to go to the new boston calm and
just type the new Boston and check it
out and we'll just actually add some
this is just normal text so now we have
a link and when we refresh it we have a
link in some normal text but as you can
see whenever we are hovering over it or
remember we are clicking it it changes
the read so we can begin to see the
different kind of states right now but
maybe we don't want it to be you know
purple by default or when we click it to
turn red those are the things we're
going to adjust so by default before you
even click
Oh link it's gonna be at its default
state in that is a semicolon link the a
stands for the anchor of course which is
the element in the semicolon and the
name after it this is the state so now
this is basically the default link now
we can style it what it is by default
and let's just go ahead and add color
red and text decoration let's set this
to none now the text decoration you can
either have this like underlined or I
think um there's something called like
strikethrough or line three or something
no never use it it's basically
underlined or none so first let me point
this out before I confuse you guys when
i refresh this you says by default it
doesn't turn red that's because I
already went to this site before plenty
of times the New Boston com
so actually what state we're looking at
right now is visited so let's go ahead
and edit that right now a visited is
when you already clicked a link and you
know it's like links visiting you know
what it means why might explain this to
you so we want the links that we already
visited let's go ahead and just turn
them green something real simple so now
when we go ahead and save and refresh
this since this link has already been
visited that's why it's going to appear
green just like that so now we know how
to adjust the style for default links
that we haven't been to and links that
we have been to now I told you guys that
there are other states other than this
and that is one their state is when you
are hovering over the link now this
doesn't matter if you already been to it
or you have um not been to it when
you're hovering over it you're hovering
over it so let's go ahead and make this
one a lot different so background color
let's just change this to blue change
the background to blue and what else can
we do change the color of the text to
white that might make it a little little
easier to read put text
decoration underlined I always like
hovering over to be underlined so in
order to get you need to change the
property called text decoration and
let's just go ahead font-weight:bold
make sure I spelled that right good
enough so now whenever you hover over it
let me just go ahead and do this
whenever you hover over it um you get a
blue background you can see the text
changes from green to white you get an
underline and your font turns from
regular to bold pretty cool huh
so that's like how to make your website
kind of dynamic and changing using just
basic CSS so you know just thought I
throw that out there so now the one last
day I want to cover is called the active
state now the active state is as you are
pressing down and your finger is holding
down that button this is the active
state so a active what do we want to do
when our mouse button is active let's
just go ahead and do something simple
change your background color to orange
simple enough so let's go ahead and save
this and let me explain you guys what my
finger is doing all right right now I'm
just moving my mouse now I'm hovering
over it so that's where that a:hover
comes into play and now I'm clicking
down maybe you can hear me here let me
let me you can hear my mouse see now I'm
holding it down now it's active and of
course if I let go it's going to go
ahead and take me to the greatest
website ever the new boston.com there we
go welcome to the new Boston have to
check this out later
bye anyways that is the basics of the
different states I mean before you might
be thinking alright a links a link a
link a link but no it's actually
composed of four different states and
that's what get a lot of people hung up
and confused what now you guys have edge
on them because you understand those
different states and how you can alter
them so that's all I got for you guys
for this tutorial thank you guys for
watching to subscribe and I'll see you
guys later