WEBVTT
00:00:00.272 --> 00:00:03.899
Estamos de volta com nossa página sobre
rosquinhas e os perigos de comê-las.
00:00:03.899 --> 00:00:08.150
Gostei da classe warning que adicionamos
às tags e .
00:00:08.150 --> 00:00:12.673
Mas quero que o aviso se
destaque ainda mais.
00:00:12.673 --> 00:00:16.889
Conseguimos essa borda cinza,
da classe CSS "fact".
00:00:16.889 --> 00:00:20.922
Mas ficaria melhor com uma
borda laranja mais larga.
00:00:20.922 --> 00:00:25.802
Vamos tentar colocar isso na
classe CSS "warning".
00:00:25.802 --> 00:00:29.581
Então: border, 5 px, solid, orange.
00:00:29.675 --> 00:00:34.198
Adorei! Mas apareceu
também na tag
00:00:34.219 --> 00:00:37.319
e não ficou tão bem junto com o texto.
00:00:37.319 --> 00:00:39.982
Quero que apareça apenas no
parágrafo que usa "warning",
00:00:39.982 --> 00:00:43.744
e não em avisos dentro do texto.
00:00:43.744 --> 00:00:46.511
Como posso tornar as regras
CSS mais específicas?
00:00:46.511 --> 00:00:50.532
Uma maneira é fazer uma nova
classe "warning-paragraph"
00:00:50.532 --> 00:00:55.152
e mover as propriedades para ela.
Mas não temos que fazer isso.
00:00:55.152 --> 00:01:01.220
Podemos dizer ao navegador para aplicar a
borda só em parágrafos que usam "warning",
00:01:01.220 --> 00:01:04.576
mas não em outras tags que usam "warning".
00:01:04.576 --> 00:01:09.121
Para fazer isso, primeiro escrevemos
o elemento escolhido "p"
00:01:09.121 --> 00:01:14.170
então colocamos um ponto,
seguido do nome da classe.
00:01:14.170 --> 00:01:18.673
Isso faz o navegador encontrar todos
os que usam a classe "warning"
00:01:18.673 --> 00:01:21.385
e aplicar as propriedades
dessa classe neles.
00:01:21.385 --> 00:01:26.453
Então vamos colar a propriedade
da borda aqui...
00:01:26.453 --> 00:01:34.321
e voila! Temos a borda na classe fact
mas não em .
00:01:34.321 --> 00:01:37.595
Podemos fazer qualquer combinação
de elementos e classes,
00:01:37.595 --> 00:01:42.603
para forçar o navegador a aplicar o estilo
só em tags que usem uma classe.
00:01:42.603 --> 00:01:45.233
Certifique-se de seguir
exatamente a sequência:
00:01:45.233 --> 00:01:50.707
nome da tag, o ponto,
e então o nome da classe.
00:01:50.707 --> 00:01:56.453
Se colocar acidentalmente, um espaço entre
a tag e o ponto, não funcionará mais.
00:01:56.453 --> 00:01:59.940
Porque espaço significa outra coisa em CSS
00:01:59.940 --> 00:02:02.795
e o navegador interpretará essa
regra de forma diferente.
00:02:02.795 --> 00:02:06.884
Fique ligado, para descobrir mais
sobre o significado do espaço.