[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.83,0:00:05.21,Default,,0000,0000,0000,,We're back with the webpage that\Nlinks to lists of famous paintings.
Dialogue: 0,0:00:05.21,0:00:11.74,Default,,0000,0000,0000,,The CSS starts with a rule that sets a font family\Nfor everything in the body to sans-serif.
Dialogue: 0,0:00:11.74,0:00:17.11,Default,,0000,0000,0000,,Then a rule for group selectors that \Nchanges the font family of the s and s.
Dialogue: 0,0:00:17.11,0:00:24.74,Default,,0000,0000,0000,,And then we have a bunch of rules that you probably \Nhaven't seen before and might look a bit funny.
Dialogue: 0,0:00:24.74,0:00:29.97,Default,,0000,0000,0000,,They all start with "a", and then a colon,\Nand then a word.
Dialogue: 0,0:00:29.97,0:00:35.50,Default,,0000,0000,0000,,What does that colon mean? \NWhat could those rules be selecting for?
Dialogue: 0,0:00:35.50,0:00:41.06,Default,,0000,0000,0000,,Well, all of those things that start with \Na colon are called pseudo-classes.
Dialogue: 0,0:00:41.06,0:00:48.00,Default,,0000,0000,0000,,A pseudo-class is used to select elements based on information\Nthat's not really part of the webpage structure
Dialogue: 0,0:00:48.00,0:00:51.83,Default,,0000,0000,0000,,or just can't be expressed using \Nother selectors.
Dialogue: 0,0:00:51.83,0:00:57.43,Default,,0000,0000,0000,,In this page, I'm using pseudo-classes to\Nstyle the links based on their state.
Dialogue: 0,0:00:57.43,0:01:03.45,Default,,0000,0000,0000,,The 'link' pseudo-class will select all the links\Non the page that the user has not visited yet.
Dialogue: 0,0:01:03.45,0:01:06.58,Default,,0000,0000,0000,,Which most browsers default to blue.
Dialogue: 0,0:01:06.58,0:01:10.40,Default,,0000,0000,0000,,The 'visited' pseudo-class will select \Nall the links that the user has visited.
Dialogue: 0,0:01:10.40,0:01:13.29,Default,,0000,0000,0000,,Which most browsers default to purple.
Dialogue: 0,0:01:13.29,0:01:16.12,Default,,0000,0000,0000,,If we really want, we can \Nchange the colors.
Dialogue: 0,0:01:16.12,0:01:18.08,Default,,0000,0000,0000,,But you should have a good reason \Nfor doing that.
Dialogue: 0,0:01:18.08,0:01:22.95,Default,,0000,0000,0000,,People get used to associating blue and purple \Nwith things they have and haven't seen.
Dialogue: 0,0:01:22.95,0:01:25.55,Default,,0000,0000,0000,,And people like knowing \Nwhich pages they've visited.
Dialogue: 0,0:01:25.55,0:01:28.47,Default,,0000,0000,0000,,So you should not take that away\Nwithout a good reason.
Dialogue: 0,0:01:28.47,0:01:31.09,Default,,0000,0000,0000,,So, I'm just going to delete these two rules. \N
Dialogue: 0,0:01:31.09,0:01:34.22,Default,,0000,0000,0000,,Because I don't think it's personally \Na good idea to be messing with them.
Dialogue: 0,0:01:34.22,0:01:38.97,Default,,0000,0000,0000,,The next rule is a fun one though: 'a:hover'.
Dialogue: 0,0:01:38.97,0:01:46.14,Default,,0000,0000,0000,,The 'hover' pseudo-class will select an element \Nas long as the user is currently mousing over it.
Dialogue: 0,0:01:46.14,0:01:48.41,Default,,0000,0000,0000,,So the properties will only get applied then.
Dialogue: 0,0:01:48.41,0:01:53.35,Default,,0000,0000,0000,,Try pausing this talk-through now \Nand hover over the links to see what happens.
Dialogue: 0,0:01:53.35,0:01:57.41,Default,,0000,0000,0000,,Go ahead, I'll wait. Hover hover \Nhover hover...
Dialogue: 0,0:01:57.41,0:02:01.16,Default,,0000,0000,0000,,Did you see that background change color? \NIt's a pretty cool effect.
Dialogue: 0,0:02:01.16,0:02:05.07,Default,,0000,0000,0000,,And you can actually use that 'hover' pseudo-class \Non any element, not just links.
Dialogue: 0,0:02:05.07,0:02:07.66,Default,,0000,0000,0000,,Just remember that it won't work \Nfor all devices.
Dialogue: 0,0:02:07.66,0:02:11.42,Default,,0000,0000,0000,,Like if you're on a phone, you don't have a way of hovering. \NYou just have touch or no touch.
Dialogue: 0,0:02:11.42,0:02:15.30,Default,,0000,0000,0000,,It's great to have a hover effect as a bonus, but don't rely on it.
Dialogue: 0,0:02:15.30,0:02:20.50,Default,,0000,0000,0000,,What about these last two here? \NThey're similar to 'hover'.
Dialogue: 0,0:02:20.50,0:02:23.07,Default,,0000,0000,0000,,They depend on what the user is currently doing.
Dialogue: 0,0:02:23.07,0:02:27.19,Default,,0000,0000,0000,,The 'active' pseudo-class selects elements \Nthat are currently being activated.
Dialogue: 0,0:02:27.19,0:02:34.08,Default,,0000,0000,0000,,Like for a link, if the user is currently pressing down on the link, \Nright before they actually change pages.
Dialogue: 0,0:02:34.08,0:02:38.61,Default,,0000,0000,0000,,The 'focus' pseudo-class selects elements \Nthat currently have the focus
Dialogue: 0,0:02:38.61,0:02:42.39,Default,,0000,0000,0000,,which usually happens if you use your tab key \Nto tab around an interface.
Dialogue: 0,0:02:42.39,0:02:47.74,Default,,0000,0000,0000,,Pause the talk-through now and try pressing down on the links \Nand tabbing around them, and see what happens.
Dialogue: 0,0:02:47.74,0:02:51.50,Default,,0000,0000,0000,,Did you see the background \Nchange color when you did that?
Dialogue: 0,0:02:51.50,0:02:56.42,Default,,0000,0000,0000,,I chose the same property for 'hover', 'active', and 'focus',\Nbecause they're all sort of the same thing.
Dialogue: 0,0:02:56.42,0:02:58.84,Default,,0000,0000,0000,,The user is targeting the link somehow.
Dialogue: 0,0:02:58.84,0:03:03.66,Default,,0000,0000,0000,,Many web designers use the same properties \Nacross all three states for that reason.
Dialogue: 0,0:03:03.66,0:03:07.11,Default,,0000,0000,0000,,What if I decided I want to change \Nthe color of that background?
Dialogue: 0,0:03:07.11,0:03:13.55,Default,,0000,0000,0000,,Well, I can either go into each of them \Nand change each one of them
Dialogue: 0,0:03:13.55,0:03:15.88,Default,,0000,0000,0000,,Or I could do what we just learned.
Dialogue: 0,0:03:15.88,0:03:20.14,Default,,0000,0000,0000,,I can group the selectors by putting them \Nall into one rule, separated by commas.
Dialogue: 0,0:03:20.14,0:03:27.21,Default,,0000,0000,0000,,So we'll just put our comma after here, \Nsay "a:active", then "a:focus".
Dialogue: 0,0:03:27.21,0:03:37.42,Default,,0000,0000,0000,,Now I can delete these two and change \Nall three of those at once. Nice.
Dialogue: 0,0:03:37.42,0:03:41.53,Default,,0000,0000,0000,,These are the first pseudo-classes we've \Nshown you here, but they're not the only ones.
Dialogue: 0,0:03:41.53,0:03:45.12,Default,,0000,0000,0000,,You can search for CSS pseudo-classes \Non the Internet to find out about others
Dialogue: 0,0:03:45.12,0:03:48.65,Default,,0000,0000,0000,,or wait for us to teach more here.