Aprendemos como se faz uma bela página web completa,
bonita com todos os tipos de marcações, como textos e imagens,
mas falta uma coisa: estilo.
Minha página se parece com a que você está fazendo.
Texto preto, fundo branco, mesma fonte,
tudo feito de cima pra baixo
Você já esteve na web e viu que as páginas são
muito diferentes umas das outras.
Olhe ao seu redor na Khan Academy
todas as diferentes cores, fontes e tamanhos.
Na verdade, vamos fazer isso agora.
Pause esse vídeo e olhe para alguns sites diferentes.
O que tem de diferente em cada um deles?
O que você gosta ou não gosta sobre o seus estilos?
Vou esperar aqui.
É importante ver como as páginas web podem ser diferentes
porque em breve
você vai descobrir como fazer suas páginas web diferente
e você quer fazer isso de um jeito que te agrade,
porque representa você,
mas também faz os outros usuários feliz.
Para instalar nossa página web é preciso
aprender uma nova linguagem: o CSS.
CSS significa Cascading Style Sheets,
é uma maneira de definir que estilo aplicaremos
para diferentes partes da nossa página web.
Embutimos ele dentro do HTML, mas ele não é HTML.
Temos que aprender uma nova linguagem
e tentar não confundir o HTML com CSS.
Veremos como usar CSS em todos
os aspectos da nossa página web como as fontes, tamanhos e layouts.
Mas vamos começar com algo que é muito divertido: cor.
Que tal mudar alguns cabeçalhos
na nossa página web para um agradável verde grama?
Para começar, precisamos inserir uma tag de estilo
ao cabeçalho da nossa página.
Quando o navegador vê isso, pensará que está tudo ok.
Tudo aqui dentro é CSS.
Vou usar meu conversor de CSS para compreendê-lo
em vez do meu conversor de HTML.
Aqui dentro, vamos adicionar uma regra de estilo CSS.
Uma regra de estilo tem um seletor que informa ao navegador
qual é o estilo da parte da página web e declarações
que dizem ao navegador como arrumar essa parte.
Se queremos todo o estilo em h2 na nossa página,
vamos digitar esse seletor h2.
e vamos digitar as chaves.
Tenha certeza que são chaves "{ }" e não colchetes "[ ]".
Pois ele não vai funcionar.
Dentro delas, vamos colocar nossas declarações
que possuem propriedades e valores.
Para mudar a cor do texto, usamos a propriedade de cor.
Colocamos dois pontos e um valor.
Precisamos dizer ao navegador que cor nós queremos.
Poderíamos escrever apenas 'verde' (green).
Ele vai entender porque o verde é uma cor comum.
Mas isso não é o verde que eu queria.
Eu quero um verde grama.
Se eu escrever 'verde grama' (grassy green),
agora o navegador fica confuso
e faz com que os títulos fiquem preto de novo,
porque nunca ouviu falar de verde grama.
Se queremos poder especificar qualquer cor,
precisamos usar algo chamado de espectro RGB
que talvez você já ouviu falar na aulas de artes.
Você não precisa ser um especialista,
porque temos um seletor de cores RGB aqui pra você.
Para usá-lo, é só substituir a cor por "rgb( )".
O seletor de cores aparecerá
e você pode mover o mouse para dentro dela e escolher uma cor
e você verá a atualização da cor em tempo real.
E quando estiver satisfeito, clique nela.
Agora, você sabe como os três números
são alterados em nossas parênteses RGB?
Esse é o vermelho (red), verde (green) e azul (blue)
que compõem essa cor.
Uma coisa interessante sobre este selector h2 do CSS
que usamos, é que ele gosta de todos os h2 na página.
Assim, podemos mudar várias linhas, porque queremos
que todos esses h2 estejam verdes e consistentes
para todos aqueles h2 que encontrar na página.
Se você continuar com CSS pode aprender sobre
muitas outras maneiras, como outras partes da página,
como se você só quisesse um desses h2.
Você pode ir longe com esses tipos de seletores básicos.
Veremos outro estilo CSS.
Desta vez para fazer a cor do fundo de céu azul.
Como poderíamos colorir o fundo em uma página?
Que 'tag' abrange toda a página?
Não são as tags 'h1'.
Não são os o P's, não é a imagem.
Lembre-se, tudo dentro dessa tag 'body' (corpo) é visível.
Se queremos mudar o estilo da página toda,
precisamos usar um seletor para selecionar essa tag.
Então, vamos escrever 'body' (corpo).
Agora, em vez de cor, escrevemos cor do fundo (background-color)
dois pontos e, em seguida, o "rgb( )".
Começamos o nosso seletor de cores e vou colocá-la para cima e escolher um azul
que me faz pensar em coelhos funky e nas nuvens cumulus.
Pronto!
Veja minha elegante página.
Existem mais de centenas de propriedades CSS
além da cor e cor de fundo
mas eles são mais divertidos de se usar.
Depois que eu terminar
brinque com as cores que escolhi
e personalize esta página para ser mais o seu estilo que o meu.
Certo? Então vamos lá!
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]