Usando múltiplas classes de CSS

Nós conseguimos fazer muito até agora
com os seletores que vimos em CSS:

selecionando elementos pelo nome da tag,
pelo ID e pelo nome da classe.

Vamos revisá-los por um segundo
nessa página da web.

Essa página da web tem tudo sobre donuts.

E tem um título, parágrafos...

e alguns dos parágrafos são
fatos com menos de uma linha.

O CSS começa com a regra de selecionar
toda a tag '' da página,

e dá a eles
a fonte sans-serif.

Vou mudar para fonte "monospace",
para que você veja tudo que é selecionado.

está vendo?

A próxima regra seleciona qualquer
elemento que tenha a ID 'donut-header'.

E sabemos que está escolhendo pela ID,
pois começa com o símbolo '#'.

Já que a ID é bem descritiva,

me parece estar selecionando
o título maior no topo

e mudando sua fonte.

Mas vou apenas confirmar
que '' tem a ID.

sim, aqui está.

A última regra seleciona todos os elementos
que tem a classe 'fact'.

E sabemos que procura por uma classe,
pois começa com um ponto.

Para saber quais elementos
possuem essa classe,

eu posso olhar o que
a regra está fazendo--

adicionando uma borda
no topo e no final e colchetes--

ou eu posso através de meu HTML
pelo nome da classe.

Posso ver que o nome da classe
está neste parágrafo

e nesse parágrafo...

nos dois parágrafos
com fatos de uma linha

e é por isso que eles tem a borda.

classes são incríveis,

pois eles nos deixam usar o mesmo estilo
através de múltiplos elementos.

Mas ainda podemos
fazer mais com as classes,

e é isso que irei mostrar agora.

Então, temos a página sobre donuts,

mas donuts não são
nada saudáveis para você.

Eles podem ser uma das coisas
menos saudáveis para você.

E são meio que viciantes,
por causa do açúcar.

Então se teremos uma página
falando sobre eles,

devemos alertar as pessoas
a respeito de seus malefícios.

Que tal se fizermos esse fato em vermelho,
para mostrar que é um aviso?

Como faremos isso?

Começamos adicionando a
propriedade 'color' na regra 'fact' do CSS,

e vamos ver o que isso faz.

Mas faz com que ambos os fatos fiquem
vermelhos, e o segundo não é um aviso.

É apenas algo de ortografia.

Então não queremos que fique vermelho.

Podemos adicionar uma ID,

mas então se quisermos por uma cor
a outras coisas que eram avisos depois

e adicionar mais avisos,

então teríamos que continuar adicionando
ID's e regras para essas IDs.

Em um caso como esse, a melhor coisa a fazer
é adicionar outra classe a tag ''.

Navegadores nos deixam adicionar
quantas classes quisermos para uma única tag.

Para isso, colocamos o cursor
depois da última classe,

Damos um espaço, e escrevemos
uma nova classe, como 'warning'.

Agora podemos fazer uma regra para 'warning'.

e mover a propriedade 'color'
para dentro da regra.

Agora o fato em cima está vermelho,
e o segundo não está.

Lindo.

Podemos por a classe
em outros elementos, como antes.

Talvez queiramos colorir
o texto em negrito, "deep fried"...

nós o queremos de vermelho,
pois, coisas fritas

são muitas vezes ligadas a não estar bem.

Então adicionamos
'class="warning" '...

também vermelho.

Note que esse aviso aqui
tem a cor vermelha,

e que também tem a 'border:top'
e 'border:bottom' .

É isso que ocorre quando
se usam múltiplas classes...

o navegador vai olhar
todas as regras que se aplicam a elas

e aplicar todos os estilos apropriados.

Devemos tomar cuidado com usar apenas
cores para expressar significados,

pois alguma pessoas não as enxergam.

Existem pessoas que mal
podem dizer a diferença

entre vermelho e preto
e talvez você seja uma delas.

Então vamos mudar nossa classe
para ficar mais visível para todos.

Vamos mudar essa cor
para 'background color'.

Pois qualquer um pode dizer
qual algo tem um plano de fundo.

Esse é um contraste muito pequeno,
o vermelho e preto.

E contraste também é importante
para tornar a leitura da página melhor.

Então, vamos deixar a cor branca.

Ok, agora temos grandes contrastes,

e um fundo vermelho
para pessoas que podem ver vermelho.

e já que usamos uma classe, ambos
os avisos estão com o mesmo estilo.

Graças a flexibilidade
das classes do CSS,

podemos salvar o mundo inteiro dos donuts.

Traduzido por [Alef Almeida]
Revisado por [Gabriel Mello Fernandes]