Enquanto HTML tem tags, CSS tem seletores. Seletores são os nomes dados a estilos em folhas de estilo internas e externas. O que nós chamamos de “estilo” é um conjunto de regras que vai definir como um elemento vai ser apresentado.
Nesse Tutorial Iniciante de CSS nós iremos nos concentrar nos seletores HTML, que são simplesmente o nome das tags HTML e são usados para mudar o estilo de todos os elementos de uma tag específica.
Pra cada seletor existem propriedades dentro de chaves, que são apenas palavras como color (cor), font-weight (peso da fonte) ou background-color (cor do background).
Cada propriedade tem um valor, definido após um sinal de “:” (dois-pontos, não um sinal de igual, e “;” (ponto-e-vírgula) separam as propriedades em um seletor.
body {
font-size: 0.8em;
color: blue;
}
Isso vai aplicar os valores dados às propriedades font-size e color do seletor body.
Basicamente, quando isso é aplicado a um documento HTML, todo texto entre as tags body (todo o conteúdo da janela) vai ter 0.8 ems de tamanho e cor azul. Abra o arquivo “web.css” que você criou na lição anterior e digite o código aí de cima. Salve, e abra o arquivo HTML em seu navegador. Brinque com os valores – mude a cor, aumente e diminua o tamanho – e atualize o HTML a cada mudança, pra ver o que acontece.
Tamanhos e Porcentagens
No CSS, existem muitas unidades para valores que são específicas de alguma propriedade, mas existem também unidades gerais que são usadas em inúmeras propriedades, e é melhor ir se acostumando com elas antes de continuar.
As unidades se dividem em dois grupos: relativas, que estão ligadas a outras unidades, e as absolutas, que possuem um tamanho fixo.
em (como em font-size: 2em) é a uma unidade relativa, e o tamanho da fonte é calculado. Então, por exemplo, “2em” quer dizer 2 vezes o tamanho atual (o tamanho que ia ser aplicado se você não mudasse pra “2em”). Dois elementos que possuem “font-size: 2em” podem ter tamanhos diferentes, dependendo do contexto, já que essa unidade é relativa.
% (como em font-size: 80%) é a unidade para… deixa eu me lembrar… porcentagens. É relativa, assim como em, e está ligada a um valor anterior.
px (como em font-size: 12px) é a unidade para pixels. É uma unidade absoluta, assim como todas abaixo. Por isso, dois elementos com “font-size: 12px” vão ter sempre o mesmo tamanho relativa ao tamanho do dispositivo de exibição. Dois elementos com “font-size: 12px” vão ter o mesmo tamanho em dispositivos com a mesma resolução, e tamanhos diferentes em resoluções diferentes.
pt (como em font-size: 12pt) é a unidade para pontos.
Existem ainda outras unidades como pc (picas), cm (centímetros), mm (millímetros) e in (polegadas).
Exercite. Copie o seguinte código:
body {
font-size: 2em;
}
p {
font-size: 4em;
}
Mude as unidades e os valores. Veja o que acontece quando:
1. A unidade do parágrafo é relativa e você dobra o tamanho da fonte do body.
2. A unidade do parágrafo é absoluta e você dobra o tamanho da fonte body.
Quando o valor é zero você não precisa especificar uma unidade (qual a diferença entre 0cm e 0mm?). Por exemplo, se você não quiser qua a página tenha bordas, pode fazer border: 0
Uma página web não é um meio estático, absoluto. Ela é feita pra ser flexível e o usuário deve ter o direito de ver a página do jeito que ele quiser, o que inclui o tamanho da font e o tamanho da tela.
Por causa disso, “em” e “%” são consideradas as melhores unidades pra usar com tamanhos de fonte (e possivelmente toda largura e altura como nós veremos no Tutorial Avançado de CSS), já que são relativas. Unidades absolutas, como “px”, que na maioria dos navegadores faz com que o texto não seja redimensionado, devem ser usados raramente, como em tamanhos de bordas.
Recomendo que você leia o artigo do Maujor sobre medidas css, que se aprofunda um pouco mais no assunto.
Páginas Relacionadas
- Próxima Página: Cores
- Página Anterior: Aplicando CSS
Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
