1
00:00:00,272 --> 00:00:03,899
Estamos de volta com nossa página sobre
rosquinhas e os perigos de comê-las.
2
00:00:03,899 --> 00:00:08,150
Gostei da classe warning que adicionamos
às tags e .
3
00:00:08,150 --> 00:00:12,673
Mas quero que o aviso se
destaque ainda mais.
4
00:00:12,673 --> 00:00:16,889
Conseguimos essa borda cinza,
da classe CSS "fact".
5
00:00:16,889 --> 00:00:20,922
Mas ficaria melhor com uma
borda laranja mais larga.
6
00:00:20,922 --> 00:00:25,802
Vamos tentar colocar isso na
classe CSS "warning".
7
00:00:25,802 --> 00:00:29,581
Então: border, 5 px, solid, orange.
8
00:00:29,675 --> 00:00:34,198
Adorei! Mas apareceu
também na tag
9
00:00:34,219 --> 00:00:37,319
e não ficou tão bem junto com o texto.
10
00:00:37,319 --> 00:00:39,982
Quero que apareça apenas no
parágrafo que usa "warning",
11
00:00:39,982 --> 00:00:43,744
e não em avisos dentro do texto.
12
00:00:43,744 --> 00:00:46,511
Como posso tornar as regras
CSS mais específicas?
13
00:00:46,511 --> 00:00:50,532
Uma maneira é fazer uma nova
classe "warning-paragraph"
14
00:00:50,532 --> 00:00:55,152
e mover as propriedades para ela.
Mas não temos que fazer isso.
15
00:00:55,152 --> 00:01:01,220
Podemos dizer ao navegador para aplicar a
borda só em parágrafos que usam "warning",
16
00:01:01,220 --> 00:01:04,576
mas não em outras tags que usam "warning".
17
00:01:04,576 --> 00:01:09,121
Para fazer isso, primeiro escrevemos
o elemento escolhido "p"
18
00:01:09,121 --> 00:01:14,170
então colocamos um ponto,
seguido do nome da classe.
19
00:01:14,170 --> 00:01:18,673
Isso faz o navegador encontrar todos
os que usam a classe "warning"
20
00:01:18,673 --> 00:01:21,385
e aplicar as propriedades
dessa classe neles.
21
00:01:21,385 --> 00:01:26,453
Então vamos colar a propriedade
da borda aqui...
22
00:01:26,453 --> 00:01:34,321
e voila! Temos a borda na classe fact
mas não em .
23
00:01:34,321 --> 00:01:37,595
Podemos fazer qualquer combinação
de elementos e classes,
24
00:01:37,595 --> 00:01:42,603
para forçar o navegador a aplicar o estilo
só em tags que usem uma classe.
25
00:01:42,603 --> 00:01:45,233
Certifique-se de seguir
exatamente a sequência:
26
00:01:45,233 --> 00:01:50,707
nome da tag, o ponto,
e então o nome da classe.
27
00:01:50,707 --> 00:01:56,453
Se colocar acidentalmente, um espaço entre
a tag e o ponto, não funcionará mais.
28
00:01:56,453 --> 00:01:59,940
Porque espaço significa outra coisa em CSS
29
00:01:59,940 --> 00:02:02,795
e o navegador interpretará essa
regra de forma diferente.
30
00:02:02,795 --> 00:02:06,884
Fique ligado, para descobrir mais
sobre o significado do espaço.