[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.34,0:00:03.90,Default,,0000,0000,0000,,We're back with our webpage about donuts and the dangers of eating them.
Dialogue: 0,0:00:03.90,0:00:08.15,Default,,0000,0000,0000,,I'm really liking the warning class that we added to our  and our  tags.
Dialogue: 0,0:00:08.15,0:00:12.67,Default,,0000,0000,0000,,But I want to make this warning fact stand out even more.
Dialogue: 0,0:00:12.67,0:00:16.89,Default,,0000,0000,0000,,It's got that grey border now, from the "fact" class rule.
Dialogue: 0,0:00:16.89,0:00:20.92,Default,,0000,0000,0000,,But I think it'd look better with a big, thick orange border.
Dialogue: 0,0:00:20.92,0:00:25.80,Default,,0000,0000,0000,,Let's try adding that to the "warning" rule.
Dialogue: 0,0:00:25.80,0:00:29.58,Default,,0000,0000,0000,,So border, 5 px, solid, orange.
Dialogue: 0,0:00:29.68,0:00:34.20,Default,,0000,0000,0000,,Ah, I Iove it. But it's also on the  tag
Dialogue: 0,0:00:34.22,0:00:37.32,Default,,0000,0000,0000,,and it doesn't look so good in line with that text there.
Dialogue: 0,0:00:37.32,0:00:39.98,Default,,0000,0000,0000,,I only want it to be on the "warning" paragraph,
Dialogue: 0,0:00:39.98,0:00:43.74,Default,,0000,0000,0000,,not warning text that's in-line like that.
Dialogue: 0,0:00:43.74,0:00:46.51,Default,,0000,0000,0000,,How can I make a more specific CSS rule?
Dialogue: 0,0:00:46.51,0:00:50.53,Default,,0000,0000,0000,,Well, one approach is to make a whole new class-- "warning-paragraph"--
Dialogue: 0,0:00:50.53,0:00:55.15,Default,,0000,0000,0000,,and move the properties there. But we don't have to do that.
Dialogue: 0,0:00:55.15,0:01:01.22,Default,,0000,0000,0000,,Instead, we can tell the browser to only apply the border properties to paragraph tags that have the warning,
Dialogue: 0,0:01:01.22,0:01:04.58,Default,,0000,0000,0000,,but no other tags that have the warning class.
Dialogue: 0,0:01:04.58,0:01:09.12,Default,,0000,0000,0000,,To make that rule, we first write the element we're looking for-- "p"--
Dialogue: 0,0:01:09.12,0:01:14.17,Default,,0000,0000,0000,,then we write a dot, and the class name-- "warning".
Dialogue: 0,0:01:14.17,0:01:18.67,Default,,0000,0000,0000,,That tells the browser to find all  tags that have the class name "warning"
Dialogue: 0,0:01:18.67,0:01:21.38,Default,,0000,0000,0000,,and apply the properties inside.
Dialogue: 0,0:01:21.38,0:01:26.45,Default,,0000,0000,0000,,So let's paste this border property in here...
Dialogue: 0,0:01:26.45,0:01:34.32,Default,,0000,0000,0000,,And voila! We've got the border only on the fact and not on the .
Dialogue: 0,0:01:34.32,0:01:37.60,Default,,0000,0000,0000,,We can do that with any combination of elements and class names,
Dialogue: 0,0:01:37.60,0:01:42.60,Default,,0000,0000,0000,,whenever we want the browser to only style particular tags that have a class.
Dialogue: 0,0:01:42.60,0:01:45.23,Default,,0000,0000,0000,,Make sure you follow exactly this sequence:
Dialogue: 0,0:01:45.23,0:01:50.71,Default,,0000,0000,0000,,the tag name, the dot, and then the class name.
Dialogue: 0,0:01:50.71,0:01:56.45,Default,,0000,0000,0000,,If you put a space accidentally between the tag name and the dot, it will not work anymore.
Dialogue: 0,0:01:56.45,0:01:59.94,Default,,0000,0000,0000,,That's because a space means something else in CSS.
Dialogue: 0,0:01:59.94,0:02:02.80,Default,,0000,0000,0000,,And the browser interprets that rule differently.
Dialogue: 0,0:02:02.80,0:02:06.88,Default,,0000,0000,0000,,Stay tuned to find out about that oh-so-special space.