[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.81,0:00:05.43,Default,,0000,0000,0000,,Let's move on from donuts to carrots, one of the healthiest foods in the world.
Dialogue: 0,0:00:05.43,0:00:07.90,Default,,0000,0000,0000,,Plus the favorite food of rabbits.
Dialogue: 0,0:00:07.90,0:00:10.53,Default,,0000,0000,0000,,Did you know that carrots aren't just orange?
Dialogue: 0,0:00:10.53,0:00:13.54,Default,,0000,0000,0000,,They were actually originally purple. Some of them still are today.
Dialogue: 0,0:00:13.54,0:00:19.54,Default,,0000,0000,0000,,We have this short webpage here with a list of carrot colors and a sentence about their purple origins.
Dialogue: 0,0:00:19.54,0:00:25.27,Default,,0000,0000,0000,,And we've used classes to style the color names to the appropriate color.
Dialogue: 0,0:00:25.27,0:00:31.90,Default,,0000,0000,0000,,I like how the styles look in the list, but I'm not sure I like how the "purple" style looks in the text.
Dialogue: 0,0:00:31.90,0:00:36.22,Default,,0000,0000,0000,,I think I'd rather not use a background color, and go for more subtle coloring there.
Dialogue: 0,0:00:36.22,0:00:43.78,Default,,0000,0000,0000,,How could I tell the browser to style the purple text here differently than the purple text here?
Dialogue: 0,0:00:43.78,0:00:49.30,Default,,0000,0000,0000,,Well, they have the same class names, so we can't use class unless we introduce a new class name.
Dialogue: 0,0:00:49.30,0:00:52.92,Default,,0000,0000,0000,,They also have the same tag name-- they're both s.
Dialogue: 0,0:00:52.92,0:00:58.01,Default,,0000,0000,0000,,So we can't use the element-plus-class-name selector that we just learned.
Dialogue: 0,0:00:58.01,0:01:00.66,Default,,0000,0000,0000,,Is there anything else different about them?
Dialogue: 0,0:01:00.66,0:01:06.38,Default,,0000,0000,0000,,Well, one thing is that this  is inside an ,
Dialogue: 0,0:01:06.38,0:01:10.98,Default,,0000,0000,0000,,whereas this  is inside a .
Dialogue: 0,0:01:10.98,0:01:15.58,Default,,0000,0000,0000,,So the difference is their parent tags-- the tags that are above them.
Dialogue: 0,0:01:15.58,0:01:21.10,Default,,0000,0000,0000,,We can use this information to make a CSS rule, using what's called a "descendant selector"--
Dialogue: 0,0:01:21.10,0:01:25.22,Default,,0000,0000,0000,,a way of selecting elements based on their position in the document.
Dialogue: 0,0:01:25.22,0:01:30.62,Default,,0000,0000,0000,,For example, to select only the purple  inside the paragraph
Dialogue: 0,0:01:30.62,0:01:35.78,Default,,0000,0000,0000,,we'll write "p", and then a space-- the space is really important--
Dialogue: 0,0:01:35.78,0:01:40.38,Default,,0000,0000,0000,,and then the class name-- dot purple--
Dialogue: 0,0:01:40.38,0:01:46.11,Default,,0000,0000,0000,,and now we'll add our properties that will give us the more subtle coloring--
Dialogue: 0,0:01:46.11,0:01:50.31,Default,,0000,0000,0000,,background-color, transparent, override what it was before.
Dialogue: 0,0:01:50.31,0:01:58.80,Default,,0000,0000,0000,,Okay, nice. So we've affected this purple text without also affecting this purple text.
Dialogue: 0,0:01:58.80,0:02:02.88,Default,,0000,0000,0000,,And now any time we use the purple class inside a paragraph like this,
Dialogue: 0,0:02:02.88,0:02:05.32,Default,,0000,0000,0000,,it'll get those styles applied after.
Dialogue: 0,0:02:05.32,0:02:09.59,Default,,0000,0000,0000,,We can use that space to dig deep into our document.
Dialogue: 0,0:02:09.59,0:02:15.73,Default,,0000,0000,0000,,Let's say we want to apply a styling just to  tags that are in s.
Dialogue: 0,0:02:15.73,0:02:23.14,Default,,0000,0000,0000,,We start with the parent tag-- -- and then the space, and then .
Dialogue: 0,0:02:23.14,0:02:28.07,Default,,0000,0000,0000,,And maybe we'll give them a different line height to space them out more.
Dialogue: 0,0:02:28.07,0:02:34.07,Default,,0000,0000,0000,,Nice. We can even add a  in front of the  if we wanted,
Dialogue: 0,0:02:34.07,0:02:38.52,Default,,0000,0000,0000,,to make sure it didn't apply to s inside an  .
Dialogue: 0,0:02:38.52,0:02:43.81,Default,,0000,0000,0000,,You see, to use descendant selectors, we need to think hard about the structure of our document
Dialogue: 0,0:02:43.81,0:02:46.10,Default,,0000,0000,0000,,And what tags are inside other tags.
Dialogue: 0,0:02:46.10,0:02:49.51,Default,,0000,0000,0000,,If you're indenting nicely, then that should be easy to do
Dialogue: 0,0:02:49.51,0:02:52.51,Default,,0000,0000,0000,,because your indentation will reflect the hierarchy of tags.
Dialogue: 0,0:02:52.51,0:02:56.96,Default,,0000,0000,0000,,See, we have this , and indented inside that we have an ,
Dialogue: 0,0:02:56.96,0:02:59.34,Default,,0000,0000,0000,,and inside that we have the .
Dialogue: 0,0:02:59.34,0:03:02.93,Default,,0000,0000,0000,,If you're not indenting nicely, well, fix that up now
Dialogue: 0,0:03:02.93,0:03:07.02,Default,,0000,0000,0000,,because it'll make it much easier for you to understand the structure of your page
Dialogue: 0,0:03:07.02,0:03:10.61,Default,,0000,0000,0000,,and to come up with CSS selectors based on that structure.
Dialogue: 0,0:03:10.61,0:03:13.60,Default,,0000,0000,0000,,You can use that space between any kinds of selectors.
Dialogue: 0,0:03:13.60,0:03:19.02,Default,,0000,0000,0000,,Like finding a particular tag type under an element that has a certain id,
Dialogue: 0,0:03:19.02,0:03:22.46,Default,,0000,0000,0000,,or finding a particular id under elements with a particular class name,
Dialogue: 0,0:03:22.46,0:03:25.33,Default,,0000,0000,0000,,any combination that you need to use.
Dialogue: 0,0:03:25.33,0:03:32.23,Default,,0000,0000,0000,,The thing to remember is that if the structure of your page changes, then your old CSS rules might not apply.
Dialogue: 0,0:03:32.23,0:03:37.18,Default,,0000,0000,0000,,So think carefully when you use them, and how future-proof your CSS will be.
Dialogue: 0,0:03:37.18,0:03:41.30,Default,,0000,0000,0000,,You could always use classes if you want to be less dependent on the structure of your page.
Dialogue: 0,0:03:41.30,0:03:45.61,Default,,0000,0000,0000,,Let's look back at the rules I created and think through them.
Dialogue: 0,0:03:45.61,0:03:51.38,Default,,0000,0000,0000,,This first rule styles all the purple class elements inside paragraphs a certain way.
Dialogue: 0,0:03:51.38,0:03:57.59,Default,,0000,0000,0000,,If I add in new paragraphs with purple class elements in the future, would I want them to get that property?
Dialogue: 0,0:03:57.59,0:04:02.37,Default,,0000,0000,0000,,Yes, because I think that those properties will always look the best in the paragraph.
Dialogue: 0,0:04:02.37,0:04:04.40,Default,,0000,0000,0000,,Do I need a more specific rule?
Dialogue: 0,0:04:04.40,0:04:11.19,Default,,0000,0000,0000,,Well, maybe if these paragraph were always inside some element with class name "article", I could add that to the rule.
Dialogue: 0,0:04:11.19,0:04:14.25,Default,,0000,0000,0000,,But for now, this is the most specific I can be.
Dialogue: 0,0:04:14.25,0:04:21.18,Default,,0000,0000,0000,,The second rule gives all the  elements inside list items a certain line height.
Dialogue: 0,0:04:21.18,0:04:26.04,Default,,0000,0000,0000,,Do I always want strong items inside s to have that increased line height?
Dialogue: 0,0:04:26.04,0:04:30.98,Default,,0000,0000,0000,,Hm, maybe not. This rule might be too generic.
Dialogue: 0,0:04:30.98,0:04:36.78,Default,,0000,0000,0000,,Since I'm not sure, I will add a class to this 
Dialogue: 0,0:04:36.78,0:04:42.03,Default,,0000,0000,0000,,and then change this one so it's "ul.spacey"
Dialogue: 0,0:04:42.03,0:04:44.65,Default,,0000,0000,0000,,which makes it much more specific.
Dialogue: 0,0:04:44.65,0:04:49.84,Default,,0000,0000,0000,,In the future, as my webpage grows, I might make the rule more or less specific.
Dialogue: 0,0:04:49.84,0:04:53.62,Default,,0000,0000,0000,,Stick this tool in your ever-growing CSS toolbox
Dialogue: 0,0:04:53.62,0:04:57.88,Default,,0000,0000,0000,,and practice it, so you can use it when it makes sense.