0:00:00.342,0:00:03.899
We're back with our webpage about donuts and the dangers of eating them.

0:00:03.899,0:00:08.150
I'm really liking the warning class that we added to our  and our  tags.

0:00:08.150,0:00:12.673
But I want to make this warning fact stand out even more.

0:00:12.673,0:00:16.889
It's got that grey border now, from the "fact" class rule.

0:00:16.889,0:00:20.922
But I think it'd look better with a big, thick orange border.

0:00:20.922,0:00:25.802
Let's try adding that to the "warning" rule.

0:00:25.802,0:00:29.581
So border, 5 px, solid, orange.

0:00:29.675,0:00:34.198
Ah, I Iove it. But it's also on the  tag

0:00:34.219,0:00:37.319
and it doesn't look so good in line with that text there.

0:00:37.319,0:00:39.982
I only want it to be on the "warning" paragraph,

0:00:39.982,0:00:43.744
not warning text that's in-line like that.

0:00:43.744,0:00:46.511
How can I make a more specific CSS rule?

0:00:46.511,0:00:50.532
Well, one approach is to make a whole new class-- "warning-paragraph"--

0:00:50.532,0:00:55.152
and move the properties there. But we don't have to do that.

0:00:55.152,0:01:01.220
Instead, we can tell the browser to only apply the border properties to paragraph tags that have the warning,

0:01:01.220,0:01:04.576
but no other tags that have the warning class.

0:01:04.576,0:01:09.121
To make that rule, we first write the element we're looking for-- "p"--

0:01:09.121,0:01:14.170
then we write a dot, and the class name-- "warning".

0:01:14.170,0:01:18.673
That tells the browser to find all  tags that have the class name "warning"

0:01:18.673,0:01:21.385
and apply the properties inside.

0:01:21.385,0:01:26.453
So let's paste this border property in here...

0:01:26.453,0:01:34.321
And voila! We've got the border only on the fact and not on the .

0:01:34.321,0:01:37.595
We can do that with any combination of elements and class names,

0:01:37.595,0:01:42.603
whenever we want the browser to only style particular tags that have a class.

0:01:42.603,0:01:45.233
Make sure you follow exactly this sequence:

0:01:45.233,0:01:50.707
the tag name, the dot, and then the class name.

0:01:50.707,0:01:56.453
If you put a space accidentally between the tag name and the dot, it will not work anymore.

0:01:56.453,0:01:59.940
That's because a space means something else in CSS.

0:01:59.940,0:02:02.795
And the browser interprets that rule differently.

0:02:02.795,0:02:06.884
Stay tuned to find out about that oh-so-special space.