WEBVTT

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

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

00:00:05.153 --> 00:00:07.505
mas falta uma coisa: estilo.

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

00:00:10.974 --> 00:00:13.844
Texto preto, fundo branco, mesma fonte,

00:00:13.844 --> 00:00:15.600
tudo feito de cima pra baixo

00:00:15.600 --> 00:00:17.773
Você já esteve na web e
viu que as páginas são

00:00:17.773 --> 00:00:19.700
muito diferentes umas das outras.

00:00:19.700 --> 00:00:21.850
Olhe ao seu redor na Khan Academy

00:00:21.850 --> 00:00:24.108
todas as diferentes cores, 
fontes e tamanhos.

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

00:00:26.675 --> 00:00:29.709
Pause esse vídeo e olhe para
alguns sites diferentes.

00:00:29.709 --> 00:00:31.425
O que tem de diferente em cada um deles?

00:00:31.425 --> 00:00:34.225
O que você gosta ou não gosta
sobre o seus estilos?

00:00:34.225 --> 00:00:36.323
Vou esperar aqui.

00:00:38.143 --> 00:00:40.726
É importante ver como as páginas web
podem ser diferentes

00:00:40.726 --> 00:00:41.629
porque em breve

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

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

00:00:46.861 --> 00:00:48.074
porque representa você,

00:00:48.074 --> 00:00:50.250
mas também faz os outros
usuários feliz.

00:00:51.140 --> 00:00:53.076
Para instalar nossa
página web é preciso

00:00:53.076 --> 00:00:55.278
aprender uma nova linguagem: o CSS.

00:00:55.308 --> 00:00:57.867
CSS significa Cascading Style Sheets,

00:00:57.867 --> 00:01:00.023
é uma maneira de definir que
estilo aplicaremos

00:01:00.023 --> 00:01:01.349
para diferentes partes
da nossa página web.

00:01:01.629 --> 00:01:06.003
Embutimos ele dentro do HTML,
mas ele não é HTML.

00:01:06.003 --> 00:01:08.088
Temos que aprender uma nova linguagem

00:01:08.088 --> 00:01:10.501
e tentar não confundir o HTML com CSS.

00:01:11.071 --> 00:01:13.241
Veremos como usar CSS em todos

00:01:13.241 --> 00:01:16.573
os aspectos da nossa página web como
as fontes, tamanhos e layouts.

00:01:16.633 --> 00:01:20.103
Mas vamos começar com algo que é
muito divertido: cor.

00:01:20.103 --> 00:01:22.070
Que tal mudar alguns cabeçalhos

00:01:22.070 --> 00:01:24.850
na nossa página web para um
agradável verde grama?

00:01:25.450 --> 00:01:27.898
Para começar, precisamos inserir
uma tag de estilo

00:01:27.898 --> 00:01:29.479
ao cabeçalho da nossa página.

00:01:31.719 --> 00:01:34.420
Quando o navegador vê isso, 
pensará que está tudo ok.

00:01:34.420 --> 00:01:37.110
Tudo aqui dentro é CSS.

00:01:37.320 --> 00:01:40.100
Vou usar meu conversor de CSS
para compreendê-lo

00:01:40.150 --> 00:01:42.010
em vez do meu conversor de HTML.

00:01:43.390 --> 00:01:48.028
Aqui dentro, vamos adicionar
uma regra de estilo CSS.

00:01:48.028 --> 00:01:50.987
Uma regra de estilo tem um seletor
que informa ao navegador

00:01:50.987 --> 00:01:53.557
qual é o estilo da parte da página web
e declarações

00:01:53.997 --> 00:01:55.839
que dizem ao navegador como
arrumar essa parte.

00:01:56.739 --> 00:01:59.689
Se queremos todo o estilo em h2
na nossa página,

00:01:59.689 --> 00:02:03.164
vamos digitar esse seletor h2.

00:02:03.864 --> 00:02:05.950
e vamos digitar as chaves.

00:02:05.950 --> 00:02:08.433
Tenha certeza que são chaves "{ }"
e não colchetes "[ ]".

00:02:08.433 --> 00:02:09.311
Pois ele não vai funcionar.

00:02:10.101 --> 00:02:12.338
Dentro delas, vamos colocar
nossas declarações

00:02:12.518 --> 00:02:14.322
que possuem propriedades e valores.

00:02:14.322 --> 00:02:17.821
Para mudar a cor do texto, usamos
a propriedade de cor.

00:02:19.281 --> 00:02:22.541
Colocamos dois pontos e um valor.

00:02:22.711 --> 00:02:25.368
Precisamos dizer ao navegador
que cor nós queremos.

00:02:25.518 --> 00:02:28.559
Poderíamos escrever apenas
'verde' (green).

00:02:28.559 --> 00:02:31.859
Ele vai entender porque o verde
é uma cor comum.

00:02:32.169 --> 00:02:33.955
Mas isso não é o verde que eu queria.

00:02:33.955 --> 00:02:35.496
Eu quero um verde grama.

00:02:35.966 --> 00:02:38.158
Se eu escrever 'verde grama'
(grassy green),

00:02:38.158 --> 00:02:41.380
agora o navegador fica confuso

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

00:02:43.133 --> 00:02:44.997
porque nunca
ouviu falar de verde grama.

00:02:45.517 --> 00:02:48.265
Se queremos poder especificar
qualquer cor,

00:02:48.265 --> 00:02:51.424
precisamos usar algo chamado de
espectro RGB

00:02:51.424 --> 00:02:53.566
que talvez você já ouviu falar
na aulas de artes.

00:02:53.566 --> 00:02:55.836
Você não precisa ser um especialista,

00:02:55.836 --> 00:02:57.962
porque temos um seletor de
cores RGB aqui pra você.

00:02:58.872 --> 00:03:03.677
Para usá-lo, é só substituir a cor
por "rgb( )".

00:03:03.677 --> 00:03:05.432
O seletor de cores aparecerá

00:03:05.432 --> 00:03:09.474
e você pode mover o mouse para
dentro dela e escolher uma cor

00:03:09.474 --> 00:03:11.653
e você verá a atualização
da cor em tempo real.

00:03:11.653 --> 00:03:13.880
E quando estiver satisfeito, clique nela.

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

00:03:16.991 --> 00:03:19.904
são alterados em nossas parênteses RGB?

00:03:19.904 --> 00:03:23.391
Esse é o vermelho (red), 
verde (green) e azul (blue)

00:03:23.391 --> 00:03:24.741
que compõem essa cor.

00:03:26.764 --> 00:03:29.909
Uma coisa interessante sobre
este selector h2 do CSS

00:03:29.909 --> 00:03:33.420
que usamos, é que ele gosta de
todos os h2 na página.

00:03:33.810 --> 00:03:36.299
Assim, podemos mudar várias
linhas, porque queremos

00:03:36.299 --> 00:03:40.461
que todos esses h2 estejam
verdes e consistentes

00:03:40.461 --> 00:03:42.934
para todos aqueles h2 que
encontrar na página.

00:03:43.374 --> 00:03:44.987
Se você continuar com CSS
pode aprender sobre

00:03:44.987 --> 00:03:47.227
muitas outras maneiras,
como outras partes da página,

00:03:47.227 --> 00:03:49.323
como se você só quisesse um desses h2.

00:03:49.893 --> 00:03:53.180
Você pode ir longe com esses
tipos de seletores básicos.

00:03:54.410 --> 00:03:55.981
Veremos outro estilo CSS.

00:03:56.391 --> 00:03:58.594
Desta vez para fazer a cor do fundo 
de céu azul.

00:03:58.894 --> 00:04:01.529
Como poderíamos colorir o
fundo em uma página?

00:04:01.879 --> 00:04:05.107
Que 'tag' abrange toda a página?

00:04:05.337 --> 00:04:07.194
Não são as tags 'h1'.

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

00:04:10.533 --> 00:04:15.684
Lembre-se, tudo dentro dessa 
tag 'body' (corpo) é visível.

00:04:16.044 --> 00:04:18.193
Se queremos mudar o estilo
da página toda,

00:04:18.493 --> 00:04:21.970
precisamos usar um seletor
para selecionar essa tag.

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

00:04:26.802 --> 00:04:30.062
Agora, em vez de cor, escrevemos
cor do fundo (background-color)

00:04:31.859 --> 00:04:35.781
dois pontos e, 
em seguida, o "rgb( )".

00:04:36.311 --> 00:04:40.882
Começamos o nosso seletor de cores e vou
colocá-la para cima e escolher um azul

00:04:40.882 --> 00:04:44.852
que me faz pensar em coelhos 
funky e nas nuvens cumulus.

00:04:45.392 --> 00:04:46.279
Pronto!

00:04:46.609 --> 00:04:48.649
Veja minha elegante página.

00:04:48.889 --> 00:04:51.459
Existem mais de centenas de
propriedades CSS

00:04:51.459 --> 00:04:53.677
além da cor e cor de fundo

00:04:53.677 --> 00:04:56.087
mas eles são mais divertidos de se usar.

00:04:56.537 --> 00:04:58.174
Depois que eu terminar

00:04:58.174 --> 00:05:00.547
brinque com as cores que escolhi


00:05:00.547 --> 00:05:03.322
e personalize esta página para ser mais
o seu estilo que o meu.

00:05:04.098 --> 00:05:05.700
Certo? Então vamos lá!

NOTE Paragraph

00:05:05.700 --> 00:05:09.000
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]