0:00:00.272,0:00:03.899
Estamos de volta com nossa página sobre[br]rosquinhas e os perigos de comê-las.

0:00:03.899,0:00:08.150
Gostei da classe <i>warning</i> que adicionamos[br]às <i>tags </i> e <i></i><i></i> .

0:00:08.150,0:00:12.673
Mas quero que o aviso se [br]destaque ainda mais.

0:00:12.673,0:00:16.889
Conseguimos essa borda cinza,[br]da classe CSS <i>"fact"</i>.

0:00:16.889,0:00:20.922
Mas ficaria melhor com uma[br]borda laranja mais larga.

0:00:20.922,0:00:25.802
Vamos tentar colocar isso na[br]classe CSS <i>"warning"</i>.

0:00:25.802,0:00:29.581
Então: <i>border, 5 px, solid, orange</i>.

0:00:29.675,0:00:34.198
Adorei! Mas apareceu [br]também na <i>tag </i>

0:00:34.219,0:00:37.319
e não ficou tão bem junto com o texto.

0:00:37.319,0:00:39.982
Quero que apareça apenas no[br]parágrafo que usa <i>"warning"</i>,

0:00:39.982,0:00:43.744
e não em avisos dentro do texto.

0:00:43.744,0:00:46.511
Como posso tornar as regras[br]CSS mais específicas?

0:00:46.511,0:00:50.532
Uma maneira é fazer uma nova[br]classe <i>"warning-paragraph"</i>

0:00:50.532,0:00:55.152
e mover as propriedades para ela.[br]Mas não temos que fazer isso.

0:00:55.152,0:01:01.220
Podemos dizer ao navegador para aplicar a [br]borda só em parágrafos que usam <i>"warning"</i>,

0:01:01.220,0:01:04.576
mas não em outras tags que usam "warning".

0:01:04.576,0:01:09.121
Para fazer isso, primeiro escrevemos[br]o elemento escolhido "p"

0:01:09.121,0:01:14.170
então colocamos um ponto,[br]seguido do nome da classe.

0:01:14.170,0:01:18.673
Isso faz o navegador encontrar todos[br]os  que usam a classe "warning"

0:01:18.673,0:01:21.385
e aplicar as propriedades[br]dessa classe neles.

0:01:21.385,0:01:26.453
Então vamos colar a propriedade[br]da borda aqui...

0:01:26.453,0:01:34.321
e voila! Temos a borda na classe <i>fact</i>[br]mas não em <i></i>.

0:01:34.321,0:01:37.595
Podemos fazer qualquer combinação[br]de elementos e classes,

0:01:37.595,0:01:42.603
para forçar o navegador a aplicar o estilo[br]só em <i>tags</i> que usem uma classe.

0:01:42.603,0:01:45.233
Certifique-se de seguir[br]exatamente a sequência:

0:01:45.233,0:01:50.707
nome da <i>tag</i>, o ponto,[br]e então o nome da classe.

0:01:50.707,0:01:56.453
Se colocar acidentalmente, um espaço entre[br]a <i>tag</i> e o ponto, não funcionará mais.

0:01:56.453,0:01:59.940
Porque espaço significa outra coisa em CSS

0:01:59.940,0:02:02.795
e o navegador interpretará essa[br]regra de forma diferente.

0:02:02.795,0:02:06.884
Fique ligado, para descobrir mais[br]sobre o significado do espaço.