Por: Cléber Maia

CSS é a sigla para cascading style sheets (folhas de estilo em cascata). A linguagem é, simplesmente, um código de onde são definidas regras de formatação ou de estilos, a serem aplicadas apara definir a aparecia de uma página na web.

Este é o principal recurso para estilos que define o layout de documentos HTML (Hyper Text Markup Language), enquanto o CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Atualmente, a grande maioria dos sites possui seu layout controlado diretamente no HTML, que além de estruturar a pagina ainda possui tags de estilo, permitindo configurar sua aparência. Por outro lado, o CSS proporciona mais opções e é mais preciso tendo o mesmo resultado para por todos os navegadores atuais.


Diferenças entre o CSS e o HTML:
Enquanto o HTML é usado para estruturar conteúdos, o CSS é usado para formatar conteúdos estruturados.

No começo da Internet, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho" ou "isto é um parágrafo" usando tags HTML tais como <H1>. No entanto, à medida em que a Internet começou a ganhar popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos on-line.

Para suprir estas necessidades, os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag <FONT size=+0> que se diferenciava das tags originais do HTML pelo fato de destinar-se ao layout — e não à estrutura.

Isto adicionalmente teve o efeito de desvirtuar o emprego de tags inicialmente projetadas para estrutura como, por exemplo, a que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag eram suportadas somente por um determinado tipo de navegador.

A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites, e a versatilidade do HTML, que, a principio, resolveu a necessidade dos designers e projetistas, acabou trazendo sérios problemas aos projetos criados.

Os documentos web publicados na Internet, cada vez mais sofisticados e extensos, estavam fugindo do controle de seus criadores.

Assim, o CSS foi inventado para solucionar esta situação, colocando à disposição dos webdesigners meios sofisticados de projetar layouts suportados por todos os navegadores. Ao mesmo tempo, a separação dos estilos de apresentação da marcação dos conteúdos tornou a manutenção dos sites bem mais fácil.


Conseqüências do uso de estilo no HTML:
Suponha o seguinte exemplo:

Imagine que seu site possui 20 páginas e com a chegada do fim de ano, a equipe de marketing decidiu mudar as cores dos títulos e subtítulos para vermelho e verde, respectivamente, devido ao espírito natalino.

Levando em conta que cada página possui pelo menos um título e em média três subtítulos. Você teria que alterar aproximadamente 80 tags, olhando página por página, caso o site tenha sido feito com estilo no HTML


A solução proposta pelo CSS:
Como falado anteriormente, uso dos elementos (tags) HTML deve ser adotado exclusivamente para marcar e estruturar o conteúdo do documento. Nenhum elemento HTML será usado para alterar a apresentação, ou seja, estilizar o conteúdo.

A tarefa de estilização fica a cargo do CSS, que nada mais é do que um arquivo independente do arquivo HTML, no qual são declaradas propriedades e valores de estilização para os elementos do HTML.

Estas declarações de estilo, quer sejam estruturadas em um arquivo externo com extensão .css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline), contêm todas as regras de estilo para os elementos do documento HTML. Ou seja: todo o estilo de todas as páginas estará centralizado em um único arquivo. Sendo que ao alterar os códigos de cores referentes ao "Título" e ao "Subtitulo", você está fazendo mudança em todas as páginas do site!

Voltando ao exemplo, agora você mudaria a cores dos itens solicitados em poucos segundos. Além disso, mesmo que o site tivesse 2.000 páginas e não as 20 da situação criada, você gastaria os mesmos segundos.

Esta técnica pode economizar uma grande quantidade de trabalho. Se você quiser, por exemplo, trocar a cor do fundo de um site com 2.000 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 20 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central.


Vantagens no uso de CSS:
•  Controle do layout de vários documentos a partir de uma simples folha de estilos. Em outras palavras, mudança da aparência simultânea de todas as páginas relacionadas com o mesmo estilo; 
•  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.