1 00:00:08,674 --> 00:00:12,750 Today we're going to talk about styling links and styling lists. 2 00:00:12,750 --> 00:00:15,390 When it comes time to style the links on your page, 3 00:00:15,390 --> 00:00:19,810 it's really important that you remember links are what make up a website. 4 00:00:19,810 --> 00:00:23,210 It's that interconnectivity that helps people gain knowledge. 5 00:00:23,210 --> 00:00:26,210 It's what helps search engines help link your text and 6 00:00:26,210 --> 00:00:28,450 content to somebody else's text and content. 7 00:00:28,450 --> 00:00:31,330 So, today we're gonna talk specifically about links cuz 8 00:00:31,330 --> 00:00:33,110 I want you to think about how you're styling. 9 00:00:34,140 --> 00:00:36,960 In general, when you go to style a link you can use 10 00:00:36,960 --> 00:00:40,340 all the same different attributes that you've been using for everything else. 11 00:00:40,340 --> 00:00:42,780 Your headers, your paragraphs, things like that. 12 00:00:42,780 --> 00:00:46,250 However, links do have one special additional property 13 00:00:46,250 --> 00:00:48,090 called text-decoration. 14 00:00:48,090 --> 00:00:51,350 So in this example right here, what I have going on is that 15 00:00:51,350 --> 00:00:55,050 instead of having my links be inline, which means they go next to each other, 16 00:00:55,050 --> 00:00:59,540 I'm gonna say, hey, I want my links to be separated, one on top of each other. 17 00:00:59,540 --> 00:01:02,320 So hopefully, most of this code looks familiar to you. 18 00:01:02,320 --> 00:01:06,890 You have this idea that the display is block, it'll go underneath each other. 19 00:01:06,890 --> 00:01:09,140 The font-weight, I want it to be a little bit bold. 20 00:01:09,140 --> 00:01:11,530 I've set a new color and a new background color. 21 00:01:11,530 --> 00:01:14,130 Now I've set a width, and, if you try to set a width and 22 00:01:14,130 --> 00:01:18,080 it doesn't work, just remember, links by default are inline and 23 00:01:18,080 --> 00:01:22,890 they don't take a width unless you change them to block or inline block. 24 00:01:22,890 --> 00:01:26,910 I also am gonna align the text, add some padding, and this text decoration, 25 00:01:26,910 --> 00:01:28,530 none, this is new. 26 00:01:28,530 --> 00:01:29,590 This says, hey, 27 00:01:29,590 --> 00:01:34,020 I wanna get rid of that underline that usually shows up underneath links. 28 00:01:34,020 --> 00:01:36,510 So I've gone from this up here in the top corner 29 00:01:36,510 --> 00:01:39,790 to something that a little bit more styled down here at the bottom. 30 00:01:39,790 --> 00:01:44,010 In fact, it almost doesn't even look like a link at all. 31 00:01:44,010 --> 00:01:44,990 So let's talk about that. 32 00:01:46,200 --> 00:01:48,060 Sometimes when installing their links, 33 00:01:48,060 --> 00:01:51,080 people really try to make it look much more like buttons. 34 00:01:51,080 --> 00:01:54,640 And we want to avoid that because we want to be semantic. 35 00:01:54,640 --> 00:01:58,040 If you want a button, use a button element instead. 36 00:01:58,040 --> 00:02:02,110 And you can do that very simply by just putting in the button tag instead of 37 00:02:02,110 --> 00:02:03,180 the anchor tag. 38 00:02:03,180 --> 00:02:06,380 And again, in the same way you can style it in many different ways. 39 00:02:06,380 --> 00:02:08,530 But what I want you to understand is there are so 40 00:02:08,530 --> 00:02:11,900 many different things you can do with links and so much styling you can do with 41 00:02:11,900 --> 00:02:17,050 them, make sure that people understand that it's a link that they're looking at. 42 00:02:17,050 --> 00:02:21,020 Or, if they're using a screen reader, it's a link they're hearing about. 43 00:02:21,020 --> 00:02:23,030 So, another new thing about links, 44 00:02:23,030 --> 00:02:26,840 that we haven't seen before, is this idea that links have states. 45 00:02:26,840 --> 00:02:28,910 Have you ever noticed that, when you go to a web page, 46 00:02:28,910 --> 00:02:32,210 sometimes some of the links are blue, and some of them are purple? 47 00:02:32,210 --> 00:02:33,900 And, you realize, after a little bit, 48 00:02:33,900 --> 00:02:38,060 the ones that are purple, they're there because you have visited them, before. 49 00:02:38,060 --> 00:02:40,420 So, what we have, are we have these different states. 50 00:02:40,420 --> 00:02:42,810 And I'm gonna go over them very quickly and later, 51 00:02:42,810 --> 00:02:46,670 when we talk about what are called pseudo classes, we'll talk about them even more. 52 00:02:46,670 --> 00:02:50,490 But quickly, an a with this colon right here link 53 00:02:50,490 --> 00:02:53,462 simply says this is just a normal link, you've seen it before, 54 00:02:53,462 --> 00:02:58,430 a;visited says here's a link and my browser tells me. 55 00:02:58,430 --> 00:03:00,510 It knows that I've clicked on it before. 56 00:03:00,510 --> 00:03:04,350 By browser default, it will be a different color. 57 00:03:04,350 --> 00:03:07,640 We also have a link with the hover activity over it. 58 00:03:07,640 --> 00:03:10,010 So you've probably seen that when you hold your mouse over something, 59 00:03:10,010 --> 00:03:11,880 kind of like I'm holding the pen over here. 60 00:03:11,880 --> 00:03:13,760 Is that it'll do something crazy. 61 00:03:13,760 --> 00:03:16,350 Maybe it'll change the color or different things like that. 62 00:03:16,350 --> 00:03:20,360 So hover is activated by holding your mouse over a link. 63 00:03:20,360 --> 00:03:22,810 Which kind of brings up an interesting question of 64 00:03:22,810 --> 00:03:24,670 does this work on touch screens? 65 00:03:24,670 --> 00:03:28,665 When you're developing your page you need to remember that hover isn't necessarily 66 00:03:28,665 --> 00:03:33,410 gonna work if people are accessing it on a phone or a tablet or something like that. 67 00:03:33,410 --> 00:03:36,710 Which brings me to another state called focus. 68 00:03:36,710 --> 00:03:40,660 So the focus state is what happens when somebody is tabbing through your page. 69 00:03:40,660 --> 00:03:44,090 As they hit tab it's gonna jump from element to element. 70 00:03:44,090 --> 00:03:47,989 And when it gets to this particular link, it's going to know I'm in focus, so 71 00:03:47,989 --> 00:03:52,185 if you wanna do something different, maybe the same thing you do when people hover, 72 00:03:52,185 --> 00:03:54,335 this is how you can trigger that activity. 73 00:03:54,335 --> 00:03:58,824 Okay, and the last one is the one I really kinda think is the weirdest one of all, 74 00:03:58,824 --> 00:04:03,179 I would maybe even call it dumb, but I didn't create the Internet and HTML and 75 00:04:03,179 --> 00:04:07,199 I respect, but it's really weird, because what this one says is hey, 76 00:04:07,199 --> 00:04:09,950 this is the link just as I'm clicking it. 77 00:04:09,950 --> 00:04:13,070 And the reason I think that's weird is because for most of us, 78 00:04:13,070 --> 00:04:15,650 when we click on a link, we're going to a new page so 79 00:04:15,650 --> 00:04:18,302 we're not even going to see what styling happened. 80 00:04:18,302 --> 00:04:19,144 All right? 81 00:04:19,144 --> 00:04:22,190 Let's go ahead and talk about how we do these. 82 00:04:22,190 --> 00:04:26,860 But before I do, once again we are coming back to this idea of precedence. 83 00:04:26,860 --> 00:04:29,510 Cascading style sheets are very big on this. 84 00:04:29,510 --> 00:04:32,990 If you decide that you want to use these different states, there 85 00:04:32,990 --> 00:04:37,180 are a couple of rules you need to remember when you're writing your style sheets. 86 00:04:37,180 --> 00:04:41,480 One, if you're going to use a:hover it must come after a:link. 87 00:04:41,480 --> 00:04:46,480 And next, a:visited and a:active they must come after a:hover. 88 00:04:46,480 --> 00:04:49,560 So it's just this hierarchy that's going on while you're coating your pages. 89 00:04:50,640 --> 00:04:54,600 So let's look at an example now of some code and how I'm styling my links. 90 00:04:56,320 --> 00:04:57,180 In this example, 91 00:04:57,180 --> 00:05:01,460 what I have here is I just have three links that I haven't styled in any way. 92 00:05:01,460 --> 00:05:03,670 I've got a link to introduction to web design, 93 00:05:03,670 --> 00:05:07,310 a link to the University of Michigan, and a link to Kent State University, 94 00:05:07,310 --> 00:05:08,980 which is where I did my undergrad. 95 00:05:08,980 --> 00:05:13,950 But what happens when I go ahead and I add some CSS to it? 96 00:05:13,950 --> 00:05:17,230 Up here on the top I have all the typical things we've been talking about before, 97 00:05:17,230 --> 00:05:18,840 the width and the color. 98 00:05:18,840 --> 00:05:20,760 I've added the text decoration, and 99 00:05:20,760 --> 00:05:25,530 what I also wanted to add is this idea of margin where I can center each of my links 100 00:05:25,530 --> 00:05:28,442 one on top of each other with a little bit of space in between them. 101 00:05:28,442 --> 00:05:32,080 All right, so let's take a look at what that looks like and 102 00:05:32,080 --> 00:05:36,500 you can see I have each links looks really much different, okay. 103 00:05:36,500 --> 00:05:38,410 And you can see when I see my pen, 104 00:05:38,410 --> 00:05:42,930 when I hover over each one of these, what happens is the color changes. 105 00:05:42,930 --> 00:05:45,690 How I got that to work is right over here. 106 00:05:45,690 --> 00:05:48,300 Whenever my link goes into a hover state, 107 00:05:48,300 --> 00:05:52,180 it knows to change the background color and the font color. 108 00:05:52,180 --> 00:05:57,590 Okay, well what is a:focus, and what I've got down here a little bit, a:active? 109 00:05:57,590 --> 00:06:00,300 What's going on here is that I've put in the a:focus for 110 00:06:00,300 --> 00:06:02,600 those people that are tabbing through my page. 111 00:06:02,600 --> 00:06:06,000 So as you watch me tab, you can see Introduction to Web Design goes into 112 00:06:06,000 --> 00:06:08,030 focus, and then the University of Michigan, 113 00:06:08,030 --> 00:06:12,710 and then Kent State, and I'm doing that by tabbing through the page. 114 00:06:12,710 --> 00:06:16,210 The last rule, the active rule, is something that I'm gonna show you and 115 00:06:16,210 --> 00:06:17,860 then kind of break off from there. 116 00:06:17,860 --> 00:06:21,870 How the active works is that when you're actually clicking on a page, 117 00:06:21,870 --> 00:06:25,120 it's going to add a border around that link. 118 00:06:25,120 --> 00:06:28,160 Now, the kind of odd thing is that as soon as I'm done 119 00:06:28,160 --> 00:06:30,400 clicking we're gonna go to a new page. 120 00:06:30,400 --> 00:06:33,220 So it kinda breaks off, you don't really get to see that border 121 00:06:33,220 --> 00:06:37,020 unless I hold it down very deliberately, just like that. 122 00:06:37,020 --> 00:06:40,230 So, in this example I tried to show you the two different ways that you can 123 00:06:40,230 --> 00:06:41,640 style links. 124 00:06:41,640 --> 00:06:44,570 Now let's go on and think about this in a little bit more detail. 125 00:06:45,640 --> 00:06:49,200 When you style these links, once again I can't stress enough the importance of 126 00:06:49,200 --> 00:06:53,640 accessibility, we wanna make sure that your links are links and 127 00:06:53,640 --> 00:06:55,760 that people know that they're there. 128 00:06:55,760 --> 00:06:58,460 Once you're done playing around with links, let's go ahead and 129 00:06:58,460 --> 00:07:00,440 start thinking about styling list items. 130 00:07:01,980 --> 00:07:05,360 When you style lists, kind of the default properties they all look the same. 131 00:07:05,360 --> 00:07:09,020 You've got the one, two, three or the circle, circle, circle, but 132 00:07:09,020 --> 00:07:11,920 we can change all that, we can change things beyond the font and 133 00:07:11,920 --> 00:07:15,420 the margin to look at the style that your lists are taking on. 134 00:07:15,420 --> 00:07:18,618 So some of the things we can look at are your list-style-type, 135 00:07:18,618 --> 00:07:20,580 your list-style-image. 136 00:07:20,580 --> 00:07:23,880 The list style position, and just the list style itself. 137 00:07:23,880 --> 00:07:27,970 The list style type basically says how do you want me to indicate the different 138 00:07:27,970 --> 00:07:28,930 list items? 139 00:07:28,930 --> 00:07:32,740 By default for ordered lists again, we have the one, two, three, but 140 00:07:32,740 --> 00:07:34,050 you can give different values. 141 00:07:34,050 --> 00:07:39,090 You can say I want it to be lower roman numeral, upper roman numeral, 142 00:07:39,090 --> 00:07:42,870 lower alpha numeric, you can play with these to get the feel you want. 143 00:07:42,870 --> 00:07:47,080 So in this case we've gone from 1 and 2 to A and B. 144 00:07:47,080 --> 00:07:52,370 And if instead I had done lower alpha, we'd have had lowercase a and lowercase b. 145 00:07:52,370 --> 00:07:56,430 When you do list-style-type for unordered lists, typically what you have, and 146 00:07:56,430 --> 00:07:59,380 it depends on your browser, is the little circle or the little disk. 147 00:07:59,380 --> 00:08:00,500 We can change that, and 148 00:08:00,500 --> 00:08:04,780 we can put in exactly what you wanna make sure it's going to be. 149 00:08:04,780 --> 00:08:07,660 Another option that you can play with is this idea of getting rid of 150 00:08:07,660 --> 00:08:09,800 those default markers altogether, and 151 00:08:09,800 --> 00:08:14,190 instead, using a custom image instead of that traditional marker. 152 00:08:14,190 --> 00:08:15,730 And when you do this, 153 00:08:15,730 --> 00:08:19,360 it kind of brings up back to this idea of the list-style position. 154 00:08:19,360 --> 00:08:21,768 Many times you're gonna move your position over, 155 00:08:21,768 --> 00:08:24,069 depending on which list-style you're using. 156 00:08:25,510 --> 00:08:29,650 Down here I've got an example of where I'm saying I want my list style image. 157 00:08:29,650 --> 00:08:34,480 I've got square first, this says, hey, if you can't find the picture go ahead and 158 00:08:34,480 --> 00:08:39,110 use square, otherwise I want you to use this picture right here. 159 00:08:40,670 --> 00:08:42,110 All right? So let's go ahead and 160 00:08:42,110 --> 00:08:43,010 look at another example. 161 00:08:44,120 --> 00:08:49,030 In the file list.html, what I put in here are two different types of list, 162 00:08:49,030 --> 00:08:50,750 an unordered list and an ordered list. 163 00:08:50,750 --> 00:08:52,960 And I just kinda filled them in with some different information. 164 00:08:52,960 --> 00:08:55,900 And when you look at this screen, which I'm gonna make a little bit bigger for 165 00:08:55,900 --> 00:08:57,410 you here, if I can. 166 00:08:57,410 --> 00:09:00,870 You can see that the unordered lists are just using the circles, and 167 00:09:00,870 --> 00:09:02,990 the ordered lists are using the default numbers. 168 00:09:02,990 --> 00:09:04,550 So, let's play with this now. 169 00:09:04,550 --> 00:09:07,496 Let's go ahead and put in a style sheet. 170 00:09:12,604 --> 00:09:16,504 In my style sheet, I've gone in there said, what I wanna do with my list 171 00:09:16,504 --> 00:09:21,470 styles is I wanna switch it to upper-roman and numeral and also use a square instead. 172 00:09:21,470 --> 00:09:26,020 So, this is what it looked like before, and this is what we look like afterwards. 173 00:09:26,020 --> 00:09:29,090 So, you can see, there's just a little bit more something to it. 174 00:09:29,090 --> 00:09:32,000 And, this is a very simple way to change your page up 175 00:09:32,000 --> 00:09:34,840 from how other people typically do their page. 176 00:09:34,840 --> 00:09:36,480 One other option I just wanted to show you, 177 00:09:36,480 --> 00:09:41,410 because everyone really likes this, is that idea of using the list style image. 178 00:09:41,410 --> 00:09:45,400 So, I'm gonna go down here and uncomment this code out. 179 00:09:45,400 --> 00:09:49,730 And if you remember, if you've been paying attention to this idea that when you have 180 00:09:49,730 --> 00:09:54,970 precedence this new rule down here is gonna overwrite all the rules above it. 181 00:09:54,970 --> 00:10:00,980 So let's go ahead and make sure I've saved my page, and let's go ahead and reload. 182 00:10:02,430 --> 00:10:06,590 And now in this case what's happened is that we've removed those regular markers 183 00:10:06,590 --> 00:10:09,270 and I've put my little lightning bolt inside. 184 00:10:09,270 --> 00:10:12,780 So, doing things like this are not difficult, but 185 00:10:12,780 --> 00:10:16,550 to be honest it takes a little bit of time, especially if you're using images, 186 00:10:16,550 --> 00:10:19,800 to make sure you've got everything written exactly the same way. 187 00:10:19,800 --> 00:10:21,380 Typos are really the killer. 188 00:10:21,380 --> 00:10:23,190 It's not a matter of it being difficult, 189 00:10:23,190 --> 00:10:26,410 it's a matter about you just being very careful when you're doing these things. 190 00:10:27,550 --> 00:10:31,040 Okay, so let's go ahead and review what we've been talking about so far. 191 00:10:31,040 --> 00:10:35,370 And not just in this lecture, but in the course as far we've gotten today. 192 00:10:35,370 --> 00:10:40,400 And what I want to emphasize is that until now, we've been styling tags, and 193 00:10:40,400 --> 00:10:44,000 these tags can always just take these property value pairs and 194 00:10:44,000 --> 00:10:46,830 you can transform your page into something really great. 195 00:10:46,830 --> 00:10:49,780 We're about to go into something new and a little bit different. 196 00:10:49,780 --> 00:10:53,048 We're gonna talk about pseudo-classes and IDs and selectors. 197 00:10:53,048 --> 00:10:56,160 And I wanna make sure that you're comfortable 198 00:10:56,160 --> 00:11:00,440 building these different rules on your own before you progress. 199 00:11:00,440 --> 00:11:02,820 Now being comfortable does not mean that you're perfect. 200 00:11:02,820 --> 00:11:05,110 It doesn't mean that you know how to do everything. 201 00:11:05,110 --> 00:11:08,460 What it does mean is that you are confident enough to go out and 202 00:11:08,460 --> 00:11:12,350 start using some of the tools that are out there to improve your site. 203 00:11:12,350 --> 00:11:16,970 I'm listing two of them right here just because they're both very well known in 204 00:11:16,970 --> 00:11:22,100 the case of the Chris Pederick site, or I personally just found them really helpful. 205 00:11:22,100 --> 00:11:24,870 Another option is just remember that you can go out there and 206 00:11:24,870 --> 00:11:27,730 you can do a web search for developer tools. 207 00:11:27,730 --> 00:11:30,560 You're not the first, and you're not gonna be the last person to run 208 00:11:30,560 --> 00:11:32,820 into problems when you're styling your page. 209 00:11:32,820 --> 00:11:36,700 My overall hope would be that you would really go on to the forums in the Coursera 210 00:11:36,700 --> 00:11:40,820 course or in whatever classroom you're in and ask your fellow students for help. 211 00:11:40,820 --> 00:11:43,490 Because really, the only way to learn is to practice, 212 00:11:43,490 --> 00:11:47,550 practice, run into problems, get some help and keep going. 213 00:11:47,550 --> 00:11:51,400 As you do more and more web design, I'm hoping that you're gaining the confidence 214 00:11:51,400 --> 00:11:54,090 to help make something really cool that you're gonna proud of. 215 00:11:54,090 --> 00:11:55,300 So stick in there. 216 00:11:55,300 --> 00:11:55,800 Thanks.