Visão Geral CSS

O que é CSS?

O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.

Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada. Foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma a uma.

A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de uma página. Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de uma página enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. Isto é feito por meio da criação de um arquivo externo que contém todas as regras aplicadas e, com isto, é possível fazer alterações de estilo em todas as páginas de um site de forma fácil e rápida.
O CSS também permite que as mesmas marcações de uma página sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.

Sintaxe

A sintaxe CSS é constituida de três partes: um seletor (selector), um propriedade (property) e um valor (value):

selector {property: value}

O seletor é normalmente o elemento/tag HTML que você deseja definir, a propriedade é o atributo que você deseja mudar, e cada propriedade pode ter um valor. A propriedade e o valor são separados por dois pontos e circundadas por chaves:

body {color: black}

Se o valor contém múltiplas palavras, ponha aspas em torno do valor:

p {font-family: "sans serif"}

Observação: Se você deseja especificar mais de uma propriedade, você deve separar cada propriedade com um ponto e vírgula. O exemplo abaixo mostra como definir um parágrafo alinhado no centro, com uma cor de texto vermelha:

p {text-align:center;color:red}

Para tornar as definições de estilo mais legíveis, você pode descrever uma propriedade em cada linha, assim:

p { text-align: center; color: black; font-family: arial }

Agrupamento

Você pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos header (título). Todos os elementos header serão verdes:

h1,h2,h3,h4,h5,h6 { color: green }

O Seletor class (classe)

Com o seletor class você pode definir diferentes estilos para o mesmo tipo de elemento HTML. Digamos que você gostaria de ter dois tipos de parágrafos em seu documento: uma parágrafo alinhado à direita, e um parágrafo centralizado. Eis como você pode fazer isso com estilos:

p.right {text-align: right} p.center {text-align: center}

Você tem que usar o atributo class no seu documento HTML:
 

Este parágrafo será alinhado à direita. Este parágrafo será centralizado.

Observação: Somente um atributo class pode ser especificado para cada elemento HTML! O exemplo abaixo está errado:

Este é um parágrafo.

Você também pode omitir o nome da tag no seletor para definir um estilo que será usado por todos os elementos HTML que tem uma certa classe. No exemplo abaixo, todos os elementos HTML com class="center" serão centralizados:

.center {text-align: center}

Nocódigo abaixo tanto o elemento h1 quanto o elemento p tem class="center". Isto significa que ambos os elementos seguirão as regras do seletor ".center":

Este título será centralizado Este parágrafo será também centralizado.

O seletor id

O seletor id é diferente do seletor class selector! Enquanto um seletor class pode ser aplicado a VÁRIOS elementos numa página, um seletor id sempre se aplica a somente UM elemento.
Um atributo ID deve ser único dentro do documento.
A regra de estilo abaixo será aplicada a um elemento p que tem seu valor id como "para1":

p#para1 { text-align: center; color: red }

A regra se estilo abaixo será aplicada ao primeiro elemento que tiver o valor id de "wer345":

*#wer345 {color: green}

A regra de estilo abaixo será aplicada a este elemento h1:

Algum texto

A regra de estilo abaixo será aplicada a um elemento p que tiver o valor id de "wer345":

p#wer345 {color: green}

A regra acima não será aplicada a este elemento h2:

Algum texto

Comentários em CSS

Você pode inserir um comentário na CSS para explicar o seu código, o que pode ajuda-lo quando você editar o código fonte numa data posterior. Um comentário será ignorado pelo navegador. Um comentário em CSS começa com "/*", e termina com "*/" :

/* Este é um comentário */ p { text-align: center; /* Este é outro comentário */ color: black; font-family: arial }

Formas de utilização do CSS

Existem três formas diferentes na qual podemos associar estilos a elementos de uma página web:

1- Usar um arquivo CSS externo
Você pode colocar as suas regras de estilo em um arquivo externo e em seguida vincular este arquivo a qualquer página web na qual você deseja que as regras de estilo sejam aplicadas. Para referenciar um arquivo CSS externo a partir de um formulário web você deve incluir tag no elemento head da página:



No exemplo acima o recurso arquivo.css é um arquivo texto contendo as regras de folhas de estilo CSS definidas. Abaixo um exemplo de um possível conteúdo deste arquivo:

a { background: #ff9; color: #00f; text-decoration: underline; }

2- Usar um arquivo CSS embutido
Você pode colocar as regras de estilo para uma página no interior das tags

O problema da definição de estilos embutido na página é que você não pode reutilizar estes estilos em outra página sem ter que copiar/colar o código novamente. Se precisar alterar muitas páginas com estilos embutidos o trabalho será muito maior.

3- Usar regras de estilos inline
Utilizar estilos inline permite a você definir estilos para um único elemento usando um atributo style
Quando usados em um arquivo externo ou embutidos na página web , a primeira parte de qualquer regra de estilo precisa determinar os elementos para o qual a regra será aplicada; fazemos isto usando um seletor.

Unidades de medidas do CSS

As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direção). O formato para declarar o valor de uma unidade de medida CSS é um número com ou sem ponto decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos), sendo o sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidade identificadora (medida CSS válida - p.ex., px, em, deg, etc...). A unidade identificadora é opcional quando se declara um valor '0' (zero). Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos podem complicar a formatação do elemento e devem ser usados com cautela. Se valores negativos não forem suportados pela aplicação de usuário, eles serão convertidos para o valor mais próximo suportado (e isso pode tornar-se desastroso para um layout).

Unidades de medida de comprimento CSS válidas

São dois os tipos de unidade de medida de comprimento CSS:

UNIDADE RELATIVA

• em
• ex
• px - pixel
• % - percentagem

as unidades relativas são referenciadas a outras unidades como veremos a seguir.

UNIDADE ABSOLUTA

• pt - point :1/72 in;
• pc - pica :12 points ou 1/6 in;
• mm - milímetro :1/10 cm;
• cm - centímetro :1/100 m;
• in - polegada :2,54 cm;

Unidade relativa- é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).
O valor é tomado em relação:

• em: ...ao tamanho da fonte ('font-size') herdada;
• ex: ...a altura da letra x (xis) da fonte herdada;
• px: ...ao dispositivo (midia) de exibição;
• %: ... a uma medida previamente definida.

Unidade absoluta - é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos "centímetros, polegadas etc...). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.
Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:

div { margin: 1.5em; } 
h4 { margin: 2ex; } 
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; } 
h1 { margin: 1pc; } 
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }

Entendendo as unidades de medida CSS

Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos práticos.

A unidade de medida - pixel

A unidade de medida de comprimento pixel é relativa a resolução do dispositivo de exibição (p.ex: a tela de um monitor). Sem entrar em maiores considerações teóricas a mais simplista definição de pixel que encontrei é esta:
Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel atribuir-se uma cor.
Considere um dispositivo de exibição construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definição, a referência padrão para pixel é igual a um ponto no citado dispositivo. Daí pode-se concluir que 1 pixel naquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm
Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.

A unidade de medida - em

A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).

Os exemplos abaixo esclarecem as definições:
h1 { line-height: 1.2em }
 
line-height de

será 20% maior do que o tamanho das letras de

h1 { font-size: 1.2em } 
 
font-size de

será 20% maior do que o tamanho das letras herdado por

p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px

A unidade de medida - ex

A unidade de medida de comprimento ex é igual a altura da letra x(xis) minúscula).

A unidade de medida - percentagem, %

Valores em percentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai" (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).
p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/



Referências:
http://www.w3c.br/divulgacao/guiasreferencia/css2/
http://maujor.com/tutorial/medidascss.php
http://www.clem.ufba.br/tuts/css/c02.htm