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