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.