Manual básico sobre CSS

Há pouco tempo passei a estudar um pouco sobre HTML/XHTML. Daí, acredito que como todos que fazem isso, dei de cara com as CSS, folhas de estilo em cascata. Encontrei boas matérias, mas uma única fonte, com boa referência para CSS "em geral", demorei um pouco ver. Com um pouco de pesquisa, encontrei.

Neste artigo estou trazendo mais uma tradução livre de bom material disponível apenas em inglês. Para quem quiser se aventurar no original, o link é [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e possui material não apenas sobre CSS, mas sobre HTML, XHTML, XML, ASP, PHP, Javascript, e sei lá mais o quê! É muita coisa mesmo.

Vamos ver uma compilação sobre os principais pontos das folhas de estilo, e você só precisa saber o básico sobre HTML. Acredito que será útil tanto para os iniciantes como para os mais avançados, estes últimos podendo utilizar o artigo como fonte de referência rápida. Portanto, mãos à obra.

O que é CSS

• CSS significa Cascading Style Sheets, algo como Folhas de Estilo em Cascata;
  
• Estilos definem como mostrar elementos HTML na tela;
  
• Estilos normalmente são guardados em "folhas de estilo";
  
• Estilos foram adicionados ao HTML 4.0 para resolver um problema;
  
• Folhas de Estilo Externas podem evitar um bocado de trabalho;
  
• Definições de estilo múltiplas serão usados em cascata.
  

O uso de estilos resolveram um grande problema

O HTML nunca teve o objetivo de conter tags para a formatação de um documento. Tags HTML deveriam ser destinadas a definir o conteúdo de um documento.

Quando tags como e atributos como "color" foram adicionadas à especificação HTML 3.2, começou um pesadelo para os desenvolvedores web. Desenvolvimento de grandes sites, onde fontes e cores tiveram de ser organizados a cada página do site, acabou sendo um processo longo, caro e indevidamente tortuoso.

Para resolver este problema, a World Wide Web Consortium (W3C) - responsável pela padronização do HTML - criou as CSS em adição ao HTML 4.0. Com o HTML 4.0, toda a formatação pode ser removida do documento HTML e armazenada em um arquivo CSS separado. Todos os navegadores atuais suportam CSS.

Usar estilos economiza um monte de trabalho

Folhas de estilos definem como elementos HTML devem ser exibidos. Os estilos normalmente são salvos em arquivos ".css" diferentes dos arquivos HTML. Tais folhas de estilo salvos assim nos permitem alterar a aparência e o layout de todas as páginas em um site, editando apenas um documento CSS.

Vários estilos "cairão" em cascata sobre um único objeto

Folhas de estilo permitem que o estilo das informações possam ser indicados de diversas maneiras.

Estilos podem ser indicados:

• Dentro de um elemento HTML;
  
• Dentro da seção head de uma página HTML;
  
• em um arquivo CSS externo.
  

Dica: Múltiplas folhas de estilo externas podem ser usadas no interior de um único documento HTML.

Sintaxe

A sintaxe das CSS é composta por três partes: um seletor, uma propriedade e um valor, da forma abaixo:

selector { propriedade: valor }

O selector é normalmente o elemento HTML, ou tag, 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 cercado por chavetas, por exemplo:

body { color: black }

Nota: Se o valor possui mais de uma palavra, devemos colocar aspas em torno do valor:

p {font-family: "sans serif"}

Se você quiser especificar mais de uma propriedade, deve separar cada propriedade com um ponto e vírgula. O exemplo abaixo mostra como definir um parágrafo centralizado, com texto de cor vermelha:

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

E para tornar as definições de estilo mais legíveis, podemos descrever uma propriedade por linha, como visto abaixo:

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

Agrupamento

Você também pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos de cabeçalho. Todos os elementos de cabeçalho serão exibidos com texto de cor verde:

H1, H2, H3, H4, H5, H6 {
color: green
}

Seletores

As classes

Com as classes é possível definir diferentes estilos para o mesmo tipo de elemento HTML. Suponha que você gostaria de ter dois tipos de parágrafos em seu documento: um alinhado à direita, e um centralizado. Aqui está como fazer usando CSS:

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

A partir daí, para inserir esses estilos, precisaremos usar o atributo class no documento HTML:

<p class="right"> Este parágrafo será alinhado à direita. </p>
<p class="center"> Este parágrafo será centralizado. </p>

Para aplicar mais de uma classe em um mesmo elemento,, a sintaxe é:

<p class="center bold"> Este é um parágrafo. </p>

O parágrafo acima terá os estilos indicados da classe "center" e da classe "bold". Você também pode omitir o nome da tag ou do elemento quando escrever a definição de sua classe. Isso servirá para definir um estilo utilizado por todos os elementos HTML que possuem uma determinada classe. No exemplo abaixo, todos os elementos HTML com class = "center" serão centralizados:

.center {text-align: center}

No código abaixo tanto o elemento h1 como o elemento p possuem o seletor class = "center". Isto significa que ambos os elementos seguirão as regras do ".center" indicado acima:

<h1 class="center"> Este cabeçalho será centralizado</h1>
<p class="center"> Este parágrafo também será centralizado. </p>

Lembre-se: Não comece o nome de uma classe com um número! Não funcionará no Mozilla / Firefox.

Adicionar estilos a elementos com atributos particulares

Você também pode aplicar estilos para elementos HTML com atributos particulares. A regra de estilo abaixo irá funcionar com todos os elementos de input do tipo "text":

input [type = "text"] {background-color: blue}

O seletor id

Você também pode definir estilos para elementos HTML com o seletor id. O seletor id é definido com um "#". O exemplo do uso de estilos visto abaixo mostra a definição de um atributo ao seletor id com um valor "green":

#green {color: green}

Já a regra de estilo seguinte vale para o elemento p com um id com um valor "para1":

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

Lembre-se: não inicie um ID com um número! Não funcionará no Mozilla / Firefox.

Inserindo comentários

Comentários em CSS

Como em qualquer linguagem, comentários são usados para explicar o seu código, e podem ajudar quando você editar o código-fonte em uma data posterior. Um comentário será ignorado pelos browsers, e em CSS começa com "/*" e termina com "*/", como este:

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

Exemplos

O arquivo HTML abaixo utiliza uma folha de estilos externa com a tag "link". Veja:

<html>
<link rel="stylesheet" type="text/css" href="ex1.css" />
<h1>Este cabeçalho tem 36 pt</h1>
<h2>Este cabeçalho é azul</h2>
<p>Este parágrafo tem uma margem esquerda
de 50 pixels</p>

Este é o conteúdo do arquivo com a folha de estilo (ex1.css) indicado na tag "link" visto acima:

body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

Outro exemplo no uso de folhas de estilo externa:

<html>
<link rel="stylesheet" type="text/css" href="ex2.css" />
<h1>Este é um cabeçalho do tipo h1</h1>
<hr />
<p>Você pode ver que a folha de estilo
formata o texto</p>
<p><a href="http://www.w3schools.com" target="_blank">Este é um link</a></p>

Abaixo, como ficaria o conteúdo do arquivo com a folha de estilo indicado acima (ex2.css):

body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}

Teste em seu [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e veja as mudanças que a folha de estilo causam na aparência da página.

Salve os arquivos HTML e os .css na mesma página, e depois acesse os arquivos HTML normalmente como você sempre faz. Você verá como o uso de folhas de estilo alteram a formatação dos elementos.

Inserindo as folhas de estilo

Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ela. Existem três maneiras de inserir uma folha de estilo:

Folha de estilo externa

Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilos externa, você pode mudar a aparência de um site inteiro, alterando um único arquivo. Cada página deve indicar a folha de estilo usada como base por meio da tag "link", como já vimos anteriormente. A tag link deve estar dentro da seção "head" do arquivo HTML. Veja:

<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>

O browser lerá as definições de estilo a partir do arquivo meuestilo.css e formatará o documento de acordo.

Uma folha de estilos externa pode ser escrita em qualquer editor de texto. Porém, sugiro os editores bem "simples", como nano, gedit ou mesmo o vim ou emacs. Nada de OpenOffice e companhia, pois esses editores mais sofisticados alteram o conteúdo do arquivos para melhorar sua aparência e seu uso pelo programa. O arquivo .css não deve conter quaisquer tags HTML. E, obviamente, a folha de estilo deve ser salva com extensão .css. Veja um exemplo de folha de estilo:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}

Lembre-se: Não deixe espaços entre o valor da propriedade e as unidades! Por exemplo, usar "margin-left: 20 px" (e não usar "margin-left: 20px") só irá funcionar no IE, mas não funcionará no Firefox ou Opera.

Folha de estilo interna

Uma folha de estilo interna deve ser utilizada quando um determinado documento tem um estilo único.

Você define os estilos internos na seção "head" usando a tag <style>, como neste exemplo:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}
</style>
</head>

O browser agora lê as definições de estilo e formata o documento de acordo com elas.

Lembre-se: Um browser normalmente ignora tags desconhecidas. Isto significa que um browser que não suporta estilos, vai ignorar a tag "style", mas seu conteúdo será exibido na página. É possível evitar que um browser antigo faça isso, ou seja, não exibir o conteúdo das definições de estilo. Para isso incluímos as definições entre comentários do HTML. Veja:

<head>
<style type="text/css">
<! --
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}
->
</style>
</head>

Estilos em linha

Um estilo "em linha" perde muitas das vantagens das folhas de estilo, misturando conteúdo com apresentação. Use este método o mínimo possível, por exemplo quando um estilo será aplicado uma única vez em um elemento.

Para utilizar estilos "em linha" usar o atributo "style" na respectiva tag. Este atributo style pode conter qualquer propriedade CSS. Veja um exemplo de como alterar a cor e a margem esquerda de um parágrafo:

<p style="color:sienna;margin-left:20px"> Este é um parágrafo. </p>

Múltiplas folhas de estilo

Se algumas propriedades foram indicadas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdadas da folha de estilo mais específica. Por exemplo, uma folha de estilos externa tem estas propriedades para o seletor h3:

h3 {
color: red;
text-align: left;
font-size: 8pt
}

E uma folha de estilo interna tem estas propriedades para o seletor h3:

h3 {
text-align: right;
font-size: 20pt
}

Se a página com a folha de estilo interna também tem links para a folha de estilo externa, as propriedades de h3 serão:

color: red;
text-align: right;
font-size: 20pt

O que aconteceu? A cor foi herdada da folha de estilos externa, mas o alinhamento do texto e o tamanho da fonte foram substituídos pela folha de estilo interna. Traduzindo, o que estiver indicado na folha de estilos mais específica será utilizado, depois a segunda folha de estilos mais específica é usada, e assim por diante.

Conclusão

É isso, pessoal. Para os iniciantes, já serviu como uma boa base para começar. E para os avançados, aí está uma referência rápida. No próximo artigo veremos pontos mais específicos: como aplicar estilos de background (cor, imagem, etc), de texto, de fonte, e o importante conceito do modelo da caixa.