0:00:00.531,0:00:04.192
Nós conseguimos fazer muito até agora[br]com os seletores que vimos em CSS:

0:00:04.192,0:00:08.006
selecionando elementos pelo nome da tag,[br]pelo ID e pelo nome da classe.

0:00:08.690,0:00:11.028
Vamos revisá-los por um segundo[br]nessa página da web.

0:00:11.547,0:00:13.655
Essa página da web tem tudo sobre donuts.

0:00:13.789,0:00:15.963
E tem um título, parágrafos...

0:00:15.963,0:00:18.944
e alguns dos parágrafos são[br]fatos com menos de uma linha.

0:00:19.242,0:00:23.142
O CSS começa com a regra de selecionar[br]toda a tag '' da página,

0:00:23.142,0:00:25.611
e dá a eles[br]a fonte sans-serif.

0:00:26.074,0:00:30.063
Vou mudar para fonte "monospace",[br]para que você veja tudo que é selecionado.

0:00:30.785,0:00:31.808
está vendo?

0:00:34.102,0:00:37.836
A próxima regra seleciona qualquer[br]elemento que tenha a ID 'donut-header'.

0:00:38.034,0:00:41.913
E sabemos que está escolhendo pela ID,[br]pois começa com o símbolo '#'.

0:00:42.029,0:00:43.759
Já que a ID é bem descritiva,

0:00:43.759,0:00:46.681
me parece estar selecionando[br]o título maior no topo

0:00:46.688,0:00:47.645
e mudando sua fonte.

0:00:47.974,0:00:51.153
Mas vou apenas confirmar[br]que '' tem a ID.

0:00:51.153,0:00:53.184
sim, aqui está.

0:00:53.387,0:00:56.790
A última regra seleciona todos os elementos[br]que tem a classe 'fact'.

0:00:56.896,0:01:00.384
E sabemos que procura por uma classe,[br]pois começa com um ponto.

0:01:00.488,0:01:02.956
Para saber quais elementos[br]possuem essa classe,

0:01:02.956,0:01:04.740
eu posso olhar o que[br]a regra está fazendo--

0:01:04.740,0:01:07.143
adicionando uma borda[br]no topo e no final e colchetes--

0:01:07.833,0:01:10.462
ou eu posso através de meu HTML[br]pelo nome da classe.

0:01:10.619,0:01:13.148
Posso ver que o nome da classe[br]está neste parágrafo

0:01:13.148,0:01:14.300
e nesse parágrafo...

0:01:14.300,0:01:16.461
nos dois parágrafos[br]com fatos de uma linha

0:01:16.461,0:01:18.315
e é por isso que eles tem a borda.

0:01:18.448,0:01:19.778
classes são incríveis,

0:01:19.778,0:01:23.007
pois eles nos deixam usar o mesmo estilo[br]através de múltiplos elementos.

0:01:23.033,0:01:25.346
Mas ainda podemos [br]fazer mais com as classes,

0:01:25.346,0:01:26.348
e é isso que irei mostrar agora.

0:01:27.230,0:01:29.136
Então, temos a página sobre donuts,

0:01:29.136,0:01:31.361
mas donuts não são[br]nada saudáveis para você.

0:01:31.436,0:01:34.007
Eles podem ser uma das coisas[br]menos saudáveis para você.

0:01:34.030,0:01:36.963
E são meio que viciantes,[br]por causa do açúcar.

0:01:37.009,0:01:38.964
Então se teremos uma página[br]falando sobre eles,

0:01:38.964,0:01:42.051
devemos alertar as pessoas[br]a respeito de seus malefícios.

0:01:42.539,0:01:47.257
Que tal se fizermos esse fato em vermelho,[br]para mostrar que é um aviso?

0:01:47.626,0:01:49.015
Como faremos isso?

0:01:49.200,0:01:53.401
Começamos adicionando a [br]propriedade 'color' na regra 'fact' do CSS,

0:01:53.401,0:01:55.099
e vamos ver o que isso faz.

0:01:55.650,0:02:00.326
Mas faz com que ambos os fatos fiquem [br]vermelhos, e o segundo não é um aviso.

0:02:00.326,0:02:01.847
É apenas algo de ortografia.

0:02:02.051,0:02:03.845
Então não queremos que fique vermelho.

0:02:04.169,0:02:05.578
Podemos adicionar uma ID,

0:02:05.578,0:02:09.573
mas então se quisermos por uma cor[br]a outras coisas que eram avisos depois

0:02:09.573,0:02:10.958
e adicionar mais avisos,

0:02:10.958,0:02:14.185
então teríamos que continuar adicionando[br]ID's e regras para essas IDs.

0:02:15.041,0:02:19.806
Em um caso como esse, a melhor coisa a fazer[br]é adicionar outra classe a tag ''.

0:02:20.694,0:02:24.151
Navegadores nos deixam adicionar[br]quantas classes quisermos para uma única tag.

0:02:25.071,0:02:28.532
Para isso, colocamos o cursor[br]depois da última classe,

0:02:28.532,0:02:33.196
Damos um espaço, e escrevemos[br]uma nova classe, como 'warning'.

0:02:33.984,0:02:36.329
Agora podemos fazer uma regra para 'warning'.

0:02:37.119,0:02:40.243
e mover a propriedade 'color'[br]para dentro da regra.

0:02:40.835,0:02:44.001
Agora o fato em cima está vermelho,[br]e o segundo não está.

0:02:44.038,0:02:44.891
Lindo.

0:02:45.852,0:02:49.285
Podemos por a classe[br]em outros elementos, como antes.

0:02:49.643,0:02:54.121
Talvez queiramos colorir [br]o texto em negrito, "deep fried"...

0:02:54.121,0:02:56.986
nós o queremos de vermelho,[br]pois, coisas fritas

0:02:56.986,0:02:59.872
são muitas vezes ligadas a não estar bem.

0:03:00.025,0:03:03.692
Então adicionamos[br]'class="warning" '...

0:03:03.692,0:03:04.626
também vermelho.

0:03:05.035,0:03:11.900
Note que esse aviso aqui[br]tem a cor vermelha,

0:03:11.900,0:03:14.653
e que também tem a 'border:top'[br]e 'border:bottom' .

0:03:14.795,0:03:16.995
É isso que ocorre quando[br]se usam múltiplas classes...

0:03:16.995,0:03:19.338
o navegador vai olhar[br]todas as regras que se aplicam a elas

0:03:19.338,0:03:21.600
e aplicar todos os estilos apropriados.

0:03:22.733,0:03:26.810
Devemos tomar cuidado com usar apenas[br]cores para expressar significados,

0:03:26.810,0:03:28.563
pois alguma pessoas não as enxergam.

0:03:29.216,0:03:31.298
Existem pessoas que mal[br]podem dizer a diferença

0:03:31.298,0:03:33.255
entre vermelho e preto[br]e talvez você seja uma delas.

0:03:33.899,0:03:37.173
Então vamos mudar nossa classe[br]para ficar mais visível para todos.

0:03:38.070,0:03:40.711
Vamos mudar essa cor[br]para 'background color'.

0:03:40.711,0:03:44.470
Pois qualquer um pode dizer[br]qual algo tem um plano de fundo.

0:03:45.104,0:03:47.564
Esse é um contraste muito pequeno,[br]o vermelho e preto.

0:03:47.564,0:03:51.290
E contraste também é importante[br]para tornar a leitura da página melhor.

0:03:51.290,0:03:54.080
Então, vamos deixar a cor branca.

0:03:54.785,0:03:56.811
Ok, agora temos grandes contrastes,

0:03:56.811,0:03:59.611
e um fundo vermelho[br]para pessoas que podem ver vermelho.

0:03:59.994,0:04:04.497
e já que usamos uma classe, ambos[br]os avisos estão com o mesmo estilo.

0:04:04.774,0:04:07.787
Graças a flexibilidade [br]das classes do CSS,

0:04:07.787,0:04:10.722
podemos salvar o mundo inteiro dos donuts.

0:04:10.722,0:04:15.132
Traduzido por [Alef Almeida] [br]Revisado por [Gabriel Mello Fernandes]