0:00:00.703,0:00:02.903
Aprendemos como se faz uma bela página web completa,

0:00:02.903,0:00:05.153
bonita com todos os tipos de marcações, como textos e imagens,

0:00:05.153,0:00:07.505
mas falta uma coisa: estilo.

0:00:07.835,0:00:10.707
Minha página se parece com a que você está fazendo.

0:00:10.974,0:00:13.844
Texto preto, fundo branco, mesma fonte,

0:00:13.844,0:00:15.600
tudo feito de cima pra baixo

0:00:15.600,0:00:17.773
Você já esteve na web e[br]viu que as páginas são

0:00:17.773,0:00:19.700
muito diferentes umas das outras.

0:00:19.700,0:00:21.850
Olhe ao seu redor na Khan Academy

0:00:21.850,0:00:24.108
todas as diferentes cores, [br]fontes e tamanhos.

0:00:24.108,0:00:26.545
Na verdade, vamos fazer isso agora.

0:00:26.675,0:00:29.709
Pause esse vídeo e olhe para[br]alguns sites diferentes.

0:00:29.709,0:00:31.425
O que tem de diferente em cada um deles?

0:00:31.425,0:00:34.225
O que você gosta ou não gosta[br]sobre o seus estilos?

0:00:34.225,0:00:36.323
Vou esperar aqui.

0:00:38.143,0:00:40.726
É importante ver como as páginas web[br]podem ser diferentes

0:00:40.726,0:00:41.629
porque em breve

0:00:41.629,0:00:44.412
você vai descobrir como fazer suas páginas web diferente

0:00:44.412,0:00:46.861
e você quer fazer isso de um jeito que te agrade,

0:00:46.861,0:00:48.074
porque representa você,

0:00:48.074,0:00:50.250
mas também faz os outros[br]usuários feliz.

0:00:51.140,0:00:53.076
Para instalar nossa[br]página web é preciso

0:00:53.076,0:00:55.278
aprender uma nova linguagem: o CSS.

0:00:55.308,0:00:57.867
CSS significa Cascading Style Sheets,

0:00:57.867,0:01:00.023
é uma maneira de definir que[br]estilo aplicaremos

0:01:00.023,0:01:01.349
para diferentes partes[br]da nossa página web.

0:01:01.629,0:01:06.003
Embutimos ele dentro do HTML,[br]mas ele não é HTML.

0:01:06.003,0:01:08.088
Temos que aprender uma nova linguagem

0:01:08.088,0:01:10.501
e tentar não confundir o HTML com CSS.

0:01:11.071,0:01:13.241
Veremos como usar CSS em todos

0:01:13.241,0:01:16.573
os aspectos da nossa página web como[br]as fontes, tamanhos e layouts.

0:01:16.633,0:01:20.103
Mas vamos começar com algo que é[br]muito divertido: cor.

0:01:20.103,0:01:22.070
Que tal mudar alguns cabeçalhos

0:01:22.070,0:01:24.850
na nossa página web para um[br]agradável verde grama?

0:01:25.450,0:01:27.898
Para começar, precisamos inserir[br]uma tag de estilo

0:01:27.898,0:01:29.479
ao cabeçalho da nossa página.

0:01:31.719,0:01:34.420
Quando o navegador vê isso, [br]pensará que está tudo ok.

0:01:34.420,0:01:37.110
Tudo aqui dentro é CSS.

0:01:37.320,0:01:40.100
Vou usar meu conversor de CSS[br]para compreendê-lo

0:01:40.150,0:01:42.010
em vez do meu conversor de HTML.

0:01:43.390,0:01:48.028
Aqui dentro, vamos adicionar[br]uma regra de estilo CSS.

0:01:48.028,0:01:50.987
Uma regra de estilo tem um seletor[br]que informa ao navegador

0:01:50.987,0:01:53.557
qual é o estilo da parte da página web[br]e declarações

0:01:53.997,0:01:55.839
que dizem ao navegador como[br]arrumar essa parte.

0:01:56.739,0:01:59.689
Se queremos todo o estilo em h2[br]na nossa página,

0:01:59.689,0:02:03.164
vamos digitar esse seletor h2.

0:02:03.864,0:02:05.950
e vamos digitar as chaves.

0:02:05.950,0:02:08.433
Tenha certeza que são chaves "{ }"[br]e não colchetes "[ ]".

0:02:08.433,0:02:09.311
Pois ele não vai funcionar.

0:02:10.101,0:02:12.338
Dentro delas, vamos colocar[br]nossas declarações

0:02:12.518,0:02:14.322
que possuem propriedades e valores.

0:02:14.322,0:02:17.821
Para mudar a cor do texto, usamos[br]a propriedade de cor.

0:02:19.281,0:02:22.541
Colocamos dois pontos e um valor.

0:02:22.711,0:02:25.368
Precisamos dizer ao navegador[br]que cor nós queremos.

0:02:25.518,0:02:28.559
Poderíamos escrever apenas[br]'verde' (green).

0:02:28.559,0:02:31.859
Ele vai entender porque o verde[br]é uma cor comum.

0:02:32.169,0:02:33.955
Mas isso não é o verde que eu queria.

0:02:33.955,0:02:35.496
Eu quero um verde grama.

0:02:35.966,0:02:38.158
Se eu escrever 'verde grama'[br](grassy green),

0:02:38.158,0:02:41.380
agora o navegador fica confuso

0:02:41.380,0:02:43.133
e faz com que os títulos fiquem preto de novo,

0:02:43.133,0:02:44.997
porque nunca[br]ouviu falar de verde grama.

0:02:45.517,0:02:48.265
Se queremos poder especificar[br]qualquer cor,

0:02:48.265,0:02:51.424
precisamos usar algo chamado de[br]espectro RGB

0:02:51.424,0:02:53.566
que talvez você já ouviu falar[br]na aulas de artes.

0:02:53.566,0:02:55.836
Você não precisa ser um especialista,

0:02:55.836,0:02:57.962
porque temos um seletor de[br]cores RGB aqui pra você.

0:02:58.872,0:03:03.677
Para usá-lo, é só substituir a cor[br]por "rgb( )".

0:03:03.677,0:03:05.432
O seletor de cores aparecerá

0:03:05.432,0:03:09.474
e você pode mover o mouse para[br]dentro dela e escolher uma cor

0:03:09.474,0:03:11.653
e você verá a atualização[br]da cor em tempo real.

0:03:11.653,0:03:13.880
E quando estiver satisfeito, clique nela.

0:03:14.500,0:03:16.991
Agora, você sabe como os três números

0:03:16.991,0:03:19.904
são alterados em nossas parênteses RGB?

0:03:19.904,0:03:23.391
Esse é o vermelho (red), [br]verde (green) e azul (blue)

0:03:23.391,0:03:24.741
que compõem essa cor.

0:03:26.764,0:03:29.909
Uma coisa interessante sobre[br]este selector h2 do CSS

0:03:29.909,0:03:33.420
que usamos, é que ele gosta de[br]todos os h2 na página.

0:03:33.810,0:03:36.299
Assim, podemos mudar várias[br]linhas, porque queremos

0:03:36.299,0:03:40.461
que todos esses h2 estejam[br]verdes e consistentes

0:03:40.461,0:03:42.934
para todos aqueles h2 que[br]encontrar na página.

0:03:43.374,0:03:44.987
Se você continuar com CSS[br]pode aprender sobre

0:03:44.987,0:03:47.227
muitas outras maneiras,[br]como outras partes da página,

0:03:47.227,0:03:49.323
como se você só quisesse um desses h2.

0:03:49.893,0:03:53.180
Você pode ir longe com esses[br]tipos de seletores básicos.

0:03:54.410,0:03:55.981
Veremos outro estilo CSS.

0:03:56.391,0:03:58.594
Desta vez para fazer a cor do fundo [br]de céu azul.

0:03:58.894,0:04:01.529
Como poderíamos colorir o[br]fundo em uma página?

0:04:01.879,0:04:05.107
Que 'tag' abrange toda a página?

0:04:05.337,0:04:07.194
Não são as tags 'h1'.

0:04:07.654,0:04:09.393
Não são os o P's, não é a imagem.

0:04:10.533,0:04:15.684
Lembre-se, tudo dentro dessa [br]tag 'body' (corpo) é visível.

0:04:16.044,0:04:18.193
Se queremos mudar o estilo[br]da página toda,

0:04:18.493,0:04:21.970
precisamos usar um seletor[br]para selecionar essa tag.

0:04:22.620,0:04:24.972
Então, vamos escrever 'body' (corpo).

0:04:26.802,0:04:30.062
Agora, em vez de cor, escrevemos[br]cor do fundo (background-color)

0:04:31.859,0:04:35.781
dois pontos e, [br]em seguida, o "rgb( )".

0:04:36.311,0:04:40.882
Começamos o nosso seletor de cores e vou[br]colocá-la para cima e escolher um azul

0:04:40.882,0:04:44.852
que me faz pensar em coelhos [br]funky e nas nuvens cumulus.

0:04:45.392,0:04:46.279
Pronto!

0:04:46.609,0:04:48.649
Veja minha elegante página.

0:04:48.889,0:04:51.459
Existem mais de centenas de[br]propriedades CSS

0:04:51.459,0:04:53.677
além da cor e cor de fundo

0:04:53.677,0:04:56.087
mas eles são mais divertidos de se usar.

0:04:56.537,0:04:58.174
Depois que eu terminar

0:04:58.174,0:05:00.547
brinque com as cores que escolhi[br]

0:05:00.547,0:05:03.322
e personalize esta página para ser mais[br]o seu estilo que o meu.

0:05:04.098,0:05:05.700
Certo? Então vamos lá!

0:05:05.700,0:05:09.000
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]