CSS Tutorial for Beginners - 29 - Special effects Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 29th beginning tutorial
on CSS today we're going to add special
effects so first let's open up our web
page and let's take a look at the source
and this is where we added that anchor
element to add a link to our shark HTML
page in the last video and so we're
going to go ahead and add some special
effects to this a element so let's do
that let's open up the web page first
though and we'll scroll down here now
every day when we go to websites and we
click on links most of the links that
you click will have CSS special effects
and what do I mean by that well if you
hover over the link sometimes the link
will change color it will be highlighted
or there'll be an underline over it and
then if you click this link and leave
this page and then later on come back to
this page you'll notice that the link
changes color to tell you that you've
already been to that link sometimes it
changes gray or purple and so that's
what we're going to do in this video
we're going to add some special effects
to this link so let's go ahead and close
out our web page and let's open up our
famous stylesheet and let's scroll down
here and we'll add some new code as we
always do at the bottom of the page now
I'm going to go ahead and copy and paste
the code because I already typed it out
and as always I will explain it to you
and so these are the three new rules
that we're adding and you're going to
take a look at this and go whoa what is
this well I'll explain it all now these
are called pseudo classes now don't get
worried about that right now I will
explain those in a few minutes but let's
take a look this is the first rule that
we set and here is the anchor tag now
what's different is we're putting in a
colon here we haven't done that before
and that identifies this as a pseudo
class and again I'll explain what a
pseudo class is in a minute now this
represents a state and what we're doing
here is basically saying hey we want
this link to be blue when nothing has
happened to that link right and that's
what's happening right now it's always
blue so we're not really doing anything
different here now if we go down to our
next rule this is going to be the
visited color and this is actually a
gray we're going to use a
code here so I put in a gray so when we
click on our link in our webpage and we
come back to it the link will turn gray
that's all this does and then there's
this third rule right here which is
hover and this is kind of a neat one so
when we hover over our link now with the
mouse the color of the text now will
change and I think this is like an
orange color and you'll see that in a
moment now the question you might ask is
why can't I dump all of this into one
rule and that's a good question and the
answer is these are States think of them
like States and we really don't want all
these states in one rule because they
would all happen at the same time and
that defeats the purpose we only want
this in one state at a time it's kind of
like the yin and the yang of the
universe it can only be one at any given
time or think of it like you're in a
mental state you can either be happy you
can be angry you can be sad but you
can't be all three at the same time and
that's kind of what's going on here we
don't want all three of these display at
the same time we only want one of them
displayed at the same time because
that's the given state it's in at that
time so that's why we will separate
these and not dump them all into one
rule and you want them in this order to
for this to work good so you can
actually save and reuse this code for
your future web pages you want the link
first the visited second and the hover
third always keep it in this top-down
order and it'll work very nicely for you
so let's go ahead and save our
stylesheet and let's go to our web page
and now let's go down here and you'll
notice now when we hover over the link
the link is now orange and so the hover
State is getting activated when the
mouse goes to another section of the
page it returns to the other State the
link stick which is blue so this is
letting us know hey your hovered over
this link so let's click on it and we'll
go to our shark page great now let's go
back to our page open it up act like
we're a user here and look we've got our
new state it's grey and so that is the
visited CSS rule that we set and we said
hey turn this gray to let the user know
you've already been there so there you
see all three states that this link can
be in and again you can reuse this code
for your web pages that you design okay
so let's close this out now I want to
explain again pseudo classes now you
might be going well what's going on here
well I don't know if you notice but we
never put a class in our HTML let's go
open up our HTML here we didn't put any
class here everything else we've had to
put classes right or styles and that's
why it's called a pseudo class you do
not have to actually specify a class in
the HTML the browser just knows to go
ahead and style this this a element
automatically and so that's why it's
called a pseudo class it operates like a
class but it's not really a CSS class in
the way we think of it because we don't
have to put anything in our HTML and
again a pseudo class is identified by
this colon right here now if we took
that colon out we have all kinds of
problems because then it wouldn't
realize it's a pseudo class and it would
probably be looking for some sort of
class in the in the HTML okay and as
always I will post this style sheet on
the message board so you guys can go
ahead and use it so I will see you guys
in the next video