O CSS (Cascading Style Sheets) é uma linguagem para formatação de páginas HTML e outras linguagens de marcação. Com ela podemos definir tamanhos, cores, fontes e outros relacionados a apresentação desses documentos ao usuário. A versão 3 do CSS ainda possui suporte a sombras, efeitos de transição, animações, que podem deixar o site mais apresentável, sem a necessidade de flash ou outross artifcios.
Vamos tomar como exemplo o código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Página com CSS</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Página do Zico</h1>
</header>
<main>
<h1>Bem Vindo!</h1>
<p>Esta éa Página do Zico!</p>
<p>
<a href="sobre.html" title="Sobre">Clique aqui"</a> para saber mais sobre mim!
</p>
</main>
<aside>
<h2>Agenda</h2>
<p>30/04 - Aula de História</p>
<p>01/04 - Aula de Matemática</p>
</aside>
<footer>
<p>Desenvolvido por Zico - 2017</p>
</footer>
</body>
</html>
Os códigos CSS podem ser adicionados a um site basicamente de 3 maneiras: no HEAD do HTML por meio da tag style, inline na Tag HTML ou adicionada por meio da tag link no HEAD, desta maneira, mantendo o código em um arquivo .css separado, o mais utilizado.
Para formatar uma tag no css, utilizamos a seguinte sintaxe:
body {
atributo: valores;
}
No caso acima vamos formatar a Tag body, o corpo do HTML. Nele modificamos tudo o que aparece na página. Os atributos css normalmente a tradução da palavra em inglês. Por exemplo, gostaria de modificar o fundo, utilizamos o background, queremos modificar a fonte, utilizamos o font ou font-family e assim por diante.
Vamos modificar a cor de fundo e fonte da página:
body {
background: #CCC;
font-family: verdana, arial, tahoma;
}
As cores no CSS podem ser definicas pelo seu código RGB (Misturas do Red, Green e Blue), hexadecimal (exemplo do código) ou pelo nome da cor em inglês. Acesse aqui uma tabela de cores para conhecer seus códigos. O font-family modifica a fonte da página, podemos passar mais de uma fonte, assim, se uma fonte não existir ele poder tentar carregar com uma das outras adicionadas. O padrão é mostrar o site com a Times New Roman. Qualquer tag pode ser modificada, como a header, aside, main e assim por diante. Existem vários atributos que podem ser modificados e seus valores. Abaixo vamos listar os mais utilizados e seus significados:
- background cor, imagem de fundo e posicionamento da imagem
- font define estilo, tamanho e fonte
- font-family somente a fonte
- font-size somente o tamanho
- color cor da fonte
- text-decoration define sublinhado (underline), overline, line trought ou nenhum (none)
- text-align alinhamento do texto (right, left, center ou justify
- font-weight grossura da fonte em valores, ou bold para negrito
- margin margem externa de um elemento ou tag
- padding margem interna de um elemento
- float como o elemento flutuará na página (left, right ou none)
- border borda do objeto
- width largura de um elemento
- height altura de um elemento
- display determina visibilidade de um objeto
Para conhecer mais atributos visite o Guia de Referência da W3C.
Os tamanhos dos atributos podem ser em pixels, porcentagem, em, ou viewport units, um exemplo com este último pode ser visto aqui.
Tendo como base as descrições acima, vamos formatar nosso site, deixando o header com 100% da tela, com fundo cinza, a fonte exibida com tamanho de 36px, amarela e centralizada. O Main terá o tamanho de 70% e o aside de 30%, ficando um a esquerda e o outro a direita. Já o footer tera 100% do tamanho da tela, com cor de fundo cinza e cor da letra branca, tamanho 16px e centralizada.
Vamos trabalhar utilizando um arquivo estilo.css. Para que ele funcione uma tag link devera ser adicionada ao Head do seu HTML:
<link rel="stylesheet" href="estilo.css">
Agora mão na massa no arquivo estilo.css:
header {
width: 100%;
background: #333;
padding: 10px;
}
h1 {
text-align: center;
color: #FF0;
font-size: 36px;
}
main {
width: 70%;
float: left;
}
aside {
width: 30%;
float: right;
}
footer {
width: 100%;
background: #333;
}
p {
text-align: 16px;
color: #FFF;
text-align: center;
}
Ao salvar e executar o HTML você deve ter notado que nem tudo ficou muito bom, como deveria. Todos os H1 ficaram com a mesma configuração, assim como os P, além do fato do rodapé ter se deslocado e você deve ter percebido uma margem na pagina, impedindo que os objetos tenham o tamanho da tela toda.
Vamos por partes: o BODY do Html possui por padrão uma margem, e é preciso retirá-la se necessário. Para isso adicionamos o margem com tamanho 0 no body:
body {
margin: 0;
font-family: arial;
}
Além da margin, adicionei o font-family para mudar todas as fontes utilizadas no corpo pela Arial. O site já vai começar a ficar mais bonito. Salve e teste.
O footer acabou ficando errado, preenchendo um espaço acima e deixando tanto main quanto aside com a cor de fundo e o footer com o p deslocado. Isso acontece por causa do uso do float. Os elementos abaixo dos que o utilizam abacam preenchendo espaços entre os flutuantes. Para isso utilizamos uma propriedade chamada clear que faz com que o próximo objeto possa limpar um float a esquerda, direita ou em ambos os lados. Ou podemos utilizar um display dizendo ao objeto como se comportar. Neste exemplo utilizaremos o display.
footer {
width: 100%;
background: #333;
display: table;
}
Adicionando este ao footer, podemos ver que o site começa a melhorar, porém os textos sumiram! Isso por que todas as fontes de todos os parágrafos estão com cor branca. Quando determinamos as configirações do P e do H1 acabamos dizendo para o CSS que todos os elemtnos H1 e P teriam a mesma configuração. E agora? Podemos definir configuraçes diferentes para as mesmas tags.
main p {
color: #000;
}
main h1 {
color: #F00;
font-family: verdana;
font-weight: bold;
}
aside p {
color: #333;
}
O exemplo acima diz que todos os Ps do Main ficarão com letras pretas, enquanto os demais objetos terão letras brancas. O main h1 modifica os H1s que ficam dentro do main, colocando a fonte em vermelho, negrito e tipo de letra verdana. Portanto, podemos modificar mais de uma propriedade em uma configuração e determinar que algumas tags tenham configuraçes diferentes.