Today we're going to talk about
styling links and styling lists. When it comes time to style
the links on your page, it's really important that you remember
links are what make up a website. It's that interconnectivity that
helps people gain knowledge. It's what helps search engines
help link your text and content to somebody else's text and
content. So, today we're gonna talk
specifically about links cuz I want you to think about
how you're styling. In general,
when you go to style a link you can use all the same different attributes that
you've been using for everything else. Your headers, your paragraphs,
things like that. However, links do have one
special additional property called text-decoration. So in this example right here,
what I have going on is that instead of having my links be inline,
which means they go next to each other, I'm gonna say, hey, I want my links to
be separated, one on top of each other. So hopefully,
most of this code looks familiar to you. You have this idea that the display is
block, it'll go underneath each other. The font-weight,
I want it to be a little bit bold. I've set a new color and
a new background color. Now I've set a width, and,
if you try to set a width and it doesn't work, just remember,
links by default are inline and they don't take a width unless you
change them to block or inline block. I also am gonna align the text, add
some padding, and this text decoration, none, this is new. This says, hey, I wanna get rid of that underline that
usually shows up underneath links. So I've gone from this up
here in the top corner to something that a little bit more
styled down here at the bottom. In fact, it almost doesn't
even look like a link at all. So let's talk about that. Sometimes when installing their links, people really try to make it
look much more like buttons. And we want to avoid that
because we want to be semantic. If you want a button,
use a button element instead. And you can do that very simply by just
putting in the button tag instead of the anchor tag. And again, in the same way you can
style it in many different ways. But what I want you to
understand is there are so many different things you can do with
links and so much styling you can do with them, make sure that people understand
that it's a link that they're looking at. Or, if they're using a screen reader,
it's a link they're hearing about. So, another new thing about links, that we haven't seen before,
is this idea that links have states. Have you ever noticed that,
when you go to a web page, sometimes some of the links are blue,
and some of them are purple? And, you realize, after a little bit, the ones that are purple, they're there
because you have visited them, before. So, what we have,
are we have these different states. And I'm gonna go over them
very quickly and later, when we talk about what are called pseudo
classes, we'll talk about them even more. But quickly,
an a with this colon right here link simply says this is just a normal link,
you've seen it before, a;visited says here's a link and
my browser tells me. It knows that I've clicked on it before. By browser default,
it will be a different color. We also have a link with
the hover activity over it. So you've probably seen that when
you hold your mouse over something, kind of like I'm holding
the pen over here. Is that it'll do something crazy. Maybe it'll change the color or
different things like that. So hover is activated by
holding your mouse over a link. Which kind of brings up
an interesting question of does this work on touch screens? When you're developing your page you need
to remember that hover isn't necessarily gonna work if people are accessing it on a
phone or a tablet or something like that. Which brings me to another
state called focus. So the focus state is what happens when
somebody is tabbing through your page. As they hit tab it's gonna
jump from element to element. And when it gets to this particular link,
it's going to know I'm in focus, so if you wanna do something different, maybe
the same thing you do when people hover, this is how you can trigger that activity. Okay, and the last one is the one I really
kinda think is the weirdest one of all, I would maybe even call it dumb, but
I didn't create the Internet and HTML and I respect, but it's really weird,
because what this one says is hey, this is the link just as I'm clicking it. And the reason I think that's
weird is because for most of us, when we click on a link,
we're going to a new page so we're not even going to
see what styling happened. All right? Let's go ahead and
talk about how we do these. But before I do, once again we are coming
back to this idea of precedence. Cascading style sheets
are very big on this. If you decide that you want to
use these different states, there are a couple of rules you need to remember
when you're writing your style sheets. One, if you're going to use
a:hover it must come after a:link. And next, a:visited and
a:active they must come after a:hover. So it's just this hierarchy that's going
on while you're coating your pages. So let's look at an example now of some
code and how I'm styling my links. In this example, what I have here is I just have three
links that I haven't styled in any way. I've got a link to
introduction to web design, a link to the University of Michigan,
and a link to Kent State University, which is where I did my undergrad. But what happens when I go ahead and
I add some CSS to it? Up here on the top I have all the typical
things we've been talking about before, the width and the color. I've added the text decoration, and what I also wanted to add is this idea of
margin where I can center each of my links one on top of each other with a little
bit of space in between them. All right, so let's take a look
at what that looks like and you can see I have each links
looks really much different, okay. And you can see when I see my pen, when I hover over each one of these,
what happens is the color changes. How I got that to work is right over here. Whenever my link goes into a hover state, it knows to change the background
color and the font color. Okay, well what is a:focus, and what I've
got down here a little bit, a:active? What's going on here is that
I've put in the a:focus for those people that
are tabbing through my page. So as you watch me tab, you can see
Introduction to Web Design goes into focus, and
then the University of Michigan, and then Kent State, and I'm doing
that by tabbing through the page. The last rule, the active rule,
is something that I'm gonna show you and then kind of break off from there. How the active works is that when
you're actually clicking on a page, it's going to add a border
around that link. Now, the kind of odd thing
is that as soon as I'm done clicking we're gonna go to a new page. So it kinda breaks off,
you don't really get to see that border unless I hold it down very deliberately,
just like that. So, in this example I tried to show you
the two different ways that you can style links. Now let's go on and think about
this in a little bit more detail. When you style these links, once again
I can't stress enough the importance of accessibility, we wanna make sure
that your links are links and that people know that they're there. Once you're done playing around
with links, let's go ahead and start thinking about styling list items. When you style lists, kind of the default
properties they all look the same. You've got the one, two, three or
the circle, circle, circle, but we can change all that,
we can change things beyond the font and the margin to look at the style
that your lists are taking on. So some of the things we can look
at are your list-style-type, your list-style-image. The list style position, and
just the list style itself. The list style type basically says how
do you want me to indicate the different list items? By default for ordered lists again,
we have the one, two, three, but you can give different values. You can say I want it to be lower
roman numeral, upper roman numeral, lower alpha numeric, you can play
with these to get the feel you want. So in this case we've gone from 1 and
2 to A and B. And if instead I had done lower alpha,
we'd have had lowercase a and lowercase b. When you do list-style-type for unordered
lists, typically what you have, and it depends on your browser,
is the little circle or the little disk. We can change that, and we can put in exactly what you
wanna make sure it's going to be. Another option that you can play
with is this idea of getting rid of those default markers altogether, and instead, using a custom image
instead of that traditional marker. And when you do this, it kind of brings up back to this
idea of the list-style position. Many times you're gonna
move your position over, depending on which
list-style you're using. Down here I've got an example of where
I'm saying I want my list style image. I've got square first, this says, hey,
if you can't find the picture go ahead and use square, otherwise I want you
to use this picture right here. All right?
So let's go ahead and look at another example. In the file list.html, what I put in
here are two different types of list, an unordered list and an ordered list. And I just kinda filled them in
with some different information. And when you look at this screen, which
I'm gonna make a little bit bigger for you here, if I can. You can see that the unordered lists
are just using the circles, and the ordered lists are using
the default numbers. So, let's play with this now. Let's go ahead and put in a style sheet. In my style sheet, I've gone in there
said, what I wanna do with my list styles is I wanna switch it to upper-roman
and numeral and also use a square instead. So, this is what it looked like before,
and this is what we look like afterwards. So, you can see, there's just
a little bit more something to it. And, this is a very simple
way to change your page up from how other people
typically do their page. One other option I just
wanted to show you, because everyone really likes this, is
that idea of using the list style image. So, I'm gonna go down here and
uncomment this code out. And if you remember, if you've been paying
attention to this idea that when you have precedence this new rule down here is
gonna overwrite all the rules above it. So let's go ahead and make sure I've saved
my page, and let's go ahead and reload. And now in this case what's happened is
that we've removed those regular markers and I've put my little
lightning bolt inside. So, doing things like this
are not difficult, but to be honest it takes a little bit of
time, especially if you're using images, to make sure you've got everything
written exactly the same way. Typos are really the killer. It's not a matter of it being difficult, it's a matter about you just being very
careful when you're doing these things. Okay, so let's go ahead and review
what we've been talking about so far. And not just in this lecture, but
in the course as far we've gotten today. And what I want to emphasize is that
until now, we've been styling tags, and these tags can always just take
these property value pairs and you can transform your page
into something really great. We're about to go into something new and
a little bit different. We're gonna talk about pseudo-classes and
IDs and selectors. And I wanna make sure
that you're comfortable building these different rules
on your own before you progress. Now being comfortable does
not mean that you're perfect. It doesn't mean that you
know how to do everything. What it does mean is that you
are confident enough to go out and start using some of the tools that
are out there to improve your site. I'm listing two of them right here just
because they're both very well known in the case of the Chris Pederick site, or I
personally just found them really helpful. Another option is just remember
that you can go out there and you can do a web search for
developer tools. You're not the first, and
you're not gonna be the last person to run into problems when you're
styling your page. My overall hope would be that you would
really go on to the forums in the Coursera course or in whatever classroom you're in
and ask your fellow students for help. Because really,
the only way to learn is to practice, practice, run into problems,
get some help and keep going. As you do more and more web design, I'm
hoping that you're gaining the confidence to help make something really
cool that you're gonna proud of. So stick in there. Thanks.