Saudações Amigos da Oficina da Net vou apresentar um pequeno conceito dessa Linguagem tão usada: CSS ( ou a famosa: FOLHAS DE ESTILO ).

Assim como formatar um documento em Microsoft Office Word, o mesmo acontece em formatar uma página web.

Aí você pergunta: Mas Daniel para que serve realmente o CSS (Cascading Style Sheet)?

Resposta: É para a alteração de características como fonte, cores, peso, tamanho, margem, bordas, entre outros foge a filosofia do HTML, que tem a função de descrever apenas a estrutura do texto. A introdução das folhas de estilo permite que a formatação física da página seja separada da sua organização estrutural, tornando possível a manutenção de uma aparência uniforme em várias páginas de um site.

Por que utilizar CSS?

Resposta: A utilização de folhas de estilo facilita na futura manutenção e reaproveitamento de código gerado, pois se muda em apenas um lugar e as alterações são propagadas para todos os documentos que possuem vínculos com o documento CSS. Uma vez definido o local aonde o arquivo será colocado, deve-se criar o arquivo propriamente dito. (Ex.: .../estilos.css)

Essa vinculação é feita através do uso da tag <link>, que faz a inclusão de um arquivo externo no documento corrente. Dentro dos parâmetros desta tag, deverão ser colocados o tipo de arquivo externo e o caminho dos diretórios aonde o arquivo de folhas de estilo se encontra, fazendo com que o arquivo esteja disponível.

Atributos:

• rel: é usado o "stylesheet"

• type: a linguagem "text/css"

• href: caminho indicando o arquivo “... /formatos/arquivo.css"

Os parâmetros de uma tag

A partir deste ponto serão mostradas as maneiras de como se definir as formatações de uma tag, sempre levando em consideração um arquivo externo, pois é uma maneira melhor para se separar o conteúdo do formato, além de facilitar a explicação de como as definições devem ocorrer.

De modo geral, um arquivo CSS deve ter a seguinte forma:

nome_da_tag {
atributo_da_tag_1: valor_da_tag_1;
atributo_da_tag_2: valor_da_tag_2;
atributo_da_tag_3: valor_da_tag_3;
}


Para cada tag que se deseja modificar, deve ser aberto e fechado um grupo de chaves. Entre essas chaves devem vir os parâmetros possíveis da tag e os valores que esses parâmetros devem assumir, separados por dois pontos. O exemplo acima é genérico, mas veja o exemplo a seguir, onde os parâmetros da tag <p> são redefinidos:

p {
font-size : 10pt;
font-family : “verdana”, “arial”;
text-align : center;
}


Esta indicando o tamanho da Fonte, Família de Fonte e alinhamento.

A continuação dessa explicação está na próxima coluna: "Introdução ao CSS – Parte II".

Abraços,
Daniel Guimarães.