CSS: Básico

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]