Este post é voltado para você que não tem ideia do que é HTML, CSS ou JavaScript, mas gostaria de realizar um hello world em web.
Continuando com CSS3
Você concluiu o hello world do post anterior? Se não, dá uma olhadinha lá! Só acessar aqui!
Bom, como fazer para adicionar algum estilo visual para o seu site?
Para esta tarefa, você pode usar CSS3 para o seu recém criado HTML.
Testando com a tag style
Para testarmos alguns conceitos de CSS, crie um arquivo com extensão html de acordo com código abaixo.
Ao renderizar o código acima, veremos que algum estilo foi adicionado para os textos de h1, e dos conteúdos das divs.
Aqui temos uma tag nova, dentro da tag head. É a tag style. Essa tag pode receber código escrito em CSS.
O CSS tem basicamente duas estruturas. O seletor, logo em seguida se abre chaves e em seguida, você pode por uma série de chaves e valores, sendo a chave composta por um atributo (no exemplo, color), e o valor sendo qual valor você quer que esse atributo passe a ter (no exemplo, red, green e blue).
Seletores
Os seletores usados foram o h1, #meu-id e .div-com-classe.
O seletor nos indica qual elemento html será modificado. No caso do h1, quer dizer que todas as tags h1 do documento vão adquirir a cor vermelha.
O seletor #meu-id tem uma característica especial. Ele irá mudar as características de qualquer tag que contenha o id igual a meu-id. No exemplo, a primeira div contém o atributo id como meu-id (note que é necessário um # para diferenciar esse seletor no CSS).
O seletor .div-com-classe mudará o estilo para todas as tags que contenham a classe div-com-classe na tag (note que é necessário um . para diferenciar esse seletor no CSS).
Refatorando
A ideia do CSS era de retirar a aplicação de estilos do HTML. Nas versões anteriores do HTML, o estilo era aplicado diretamente nas tags, e refatorar e replicar código de estilo era complicado e trabalhoso (imagine que cada texto em html em uns 20 arquivos html diferentes tenham a cor em verde, e de um dia para outro você tenha que muda-las para vermelho!).
Abaixo um exemplo de como era feito a mudança de cor, tamanho de fonte e estilo de fonte no HTML
Então, podemos extrair o CSS que está dentro da tag style, do primeiro exemplo, e passa-lo para um arquivo com extensão css, que é o que faremos agora.
Crie um arquivo com extensão .css, no mesmo nível de pasta do seu arquivo html. Extraia o código css de dentro da tag style. Ele deverá ficar da seguinte forma.
Perfeito, agora você pode apagar a tag style, e todo seu conteúdo, e substituir por uma tag link que fará referência ao arquivo css que você criou (eu nomeei no exemplo como estilo.css, utilize o nome que você deu ao arquivo css).
Recarregue o seu html no navegador, e verifique se os estilos de cor de texto continuam a ser aplicados no html.
Pratique adicionar mais estilos a seu html agora, o importante é praticar.