1
00:00:00,342 --> 00:00:03,899
We're back with our webpage about donuts and the dangers of eating them.

2
00:00:03,899 --> 00:00:08,150
I'm really liking the warning class that we added to our  and our  tags.

3
00:00:08,150 --> 00:00:12,673
But I want to make this warning fact stand out even more.

4
00:00:12,673 --> 00:00:16,889
It's got that grey border now, from the "fact" class rule.

5
00:00:16,889 --> 00:00:20,922
But I think it'd look better with a big, thick orange border.

6
00:00:20,922 --> 00:00:25,802
Let's try adding that to the "warning" rule.

7
00:00:25,802 --> 00:00:29,581
So border, 5 px, solid, orange.

8
00:00:29,675 --> 00:00:34,198
Ah, I Iove it. But it's also on the  tag

9
00:00:34,219 --> 00:00:37,319
and it doesn't look so good in line with that text there.

10
00:00:37,319 --> 00:00:39,982
I only want it to be on the "warning" paragraph,

11
00:00:39,982 --> 00:00:43,744
not warning text that's in-line like that.

12
00:00:43,744 --> 00:00:46,511
How can I make a more specific CSS rule?

13
00:00:46,511 --> 00:00:50,532
Well, one approach is to make a whole new class-- "warning-paragraph"--

14
00:00:50,532 --> 00:00:55,152
and move the properties there. But we don't have to do that.

15
00:00:55,152 --> 00:01:01,220
Instead, we can tell the browser to only apply the border properties to paragraph tags that have the warning,

16
00:01:01,220 --> 00:01:04,576
but no other tags that have the warning class.

17
00:01:04,576 --> 00:01:09,121
To make that rule, we first write the element we're looking for-- "p"--

18
00:01:09,121 --> 00:01:14,170
then we write a dot, and the class name-- "warning".

19
00:01:14,170 --> 00:01:18,673
That tells the browser to find all  tags that have the class name "warning"

20
00:01:18,673 --> 00:01:21,385
and apply the properties inside.

21
00:01:21,385 --> 00:01:26,453
So let's paste this border property in here...

22
00:01:26,453 --> 00:01:34,321
And voila! We've got the border only on the fact and not on the .

23
00:01:34,321 --> 00:01:37,595
We can do that with any combination of elements and class names,

24
00:01:37,595 --> 00:01:42,603
whenever we want the browser to only style particular tags that have a class.

25
00:01:42,603 --> 00:01:45,233
Make sure you follow exactly this sequence:

26
00:01:45,233 --> 00:01:50,707
the tag name, the dot, and then the class name.

27
00:01:50,707 --> 00:01:56,453
If you put a space accidentally between the tag name and the dot, it will not work anymore.

28
00:01:56,453 --> 00:01:59,940
That's because a space means something else in CSS.

29
00:01:59,940 --> 00:02:02,795
And the browser interprets that rule differently.

30
00:02:02,795 --> 00:02:06,884
Stay tuned to find out about that oh-so-special space.