CSS - HTML

CSS - Cascade Style Sheet - Folha de estilos em cascata

CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo,etc.

HTML pode ser (in)devidamente usado para definir o grafismo de websites. Contudo o uso de CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores actuais.

Diferença entre CSS e HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projectadas para estrutura como por exemplo a tag <table> que passaram a ser usadas para grafismo.
Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por alguns browsers.

Benefícios do uso de CSS?

Os benefícios concretos do uso de CSS incluem:

controle do layout de vários documentos a partir de uma simples folha de estilos;
maior precisão no controle do layout;
aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

Como funciona CSS

Muitas das propriedades usadas nas Cascading Style Sheets (CSS) são semelhantes ao HTML.
Assim, se está familiarizado com o uso de HTML para layout irá reconhecer muitos dos códigos que se usam nos css.
Por exemplo:

Usando HTML podemos fazer assim:

com o css podemos fazer o mesmo

body {background-color: #FF0000;}

Selecçao e propriedades de um folha CSS

Aplicar CSS a um documento HTML

O CSS pode-se aplicar a um documento de três formas distintas.

In-line (o atributo style)

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:

<html>
 <head>
 <title>Exemplo<title>
 </head>
 <body style="background-color: #FF0000;">
 <p>Esta é uma página com fundo vermelho</p>
 </body>
 </html>

Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:

<html>
 <head>
 <title>Exemplo<title>
 <style type="text/css">
 body {background-color: #FF0000;}
 </style>
 </head>
 <body>
 <p>Esta é uma página com fundo vermelho</p>
 </body>
 </html>

Externo (link para uma folha de estilos)

O método recomendado é o de colocar um link para uma folha de estilos externa. .

Uma folha de estilos externa é um simples arquivo de texto com a extensão .css.
Tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir:

A Dir "style" com o arquivo "style.css"

O "truque" é criar um link no documento HTML (default.htm, ou index ) para a folha de estilos (style.css). O link é criado numa simples linha de código HTML e colocado no header.

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

Notar que o caminho para a folha de estilos é indicado no atributo href.

Esta linha de código deve ser inserida na secção header do documento HTML, isto é, entre as tags <head> e </head>.

<html>
 <head>
 <title>Meu documento</title>
 <link rel="stylesheet" type="text/css" href="style/style.css" />
 </head>
 <body>
 ...

Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML.
Vários documentos HTML podem ligar a uma mesma folha de estilos. Por outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.

Vários documentos HTML ligados a uma única folha de estilos

Se necessitarmos de mudar a cor do fundo e a fonte de um site com 100 páginas, a folha de estilos evita que se edite manualmente uma a uma as páginas para fazer a alteração nos 100 documentos HTML. Usando CSS a mudança é efectuada em segundos trocando-se a cor ou a fonte na folha de estilos central.

Exemplo do uso do CSS

Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos — um arquivo HTML e um arquivo CSS — com os seguintes conteúdos:

teste.htm

<html>
 <head>
 <title>documento de teste de CSS</title>
 <link rel="stylesheet" type="text/css" href="estilo.css" />
 </head>
 <body>
 <h1>Folha de estilos</h1>
 </body>
 </html>

estilo.css

body {
 background-color: #FF0000;
 }

Guarde dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".htm")

Abra teste.htm no seu navegador e veja uma página com o fundo vermelho. Parabéns! construiu sua primeira folha de estilos!