WEBVTT

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

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

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

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

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

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

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

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

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

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

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

00:00:43.744 --> 00:00:46.511
How can I make a more specific CSS rule?

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

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

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,

00:01:01.220 --> 00:01:04.576
but no other tags that have the warning class.

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

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

00:01:14.170 --> 00:01:18.673
That tells the browser to find all  tags that have the class name "warning"

00:01:18.673 --> 00:01:21.385
and apply the properties inside.

00:01:21.385 --> 00:01:26.453
So let's paste this border property in here...

00:01:26.453 --> 00:01:34.321
And voila! We've got the border only on the fact and not on the .

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

00:01:37.595 --> 00:01:42.603
whenever we want the browser to only style particular tags that have a class.

00:01:42.603 --> 00:01:45.233
Make sure you follow exactly this sequence:

00:01:45.233 --> 00:01:50.707
the tag name, the dot, and then the class name.

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.

00:01:56.453 --> 00:01:59.940
That's because a space means something else in CSS.

00:01:59.940 --> 00:02:02.795
And the browser interprets that rule differently.

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