TUTORIAL CSS INTRODUÇÃO    1 de 8

Definição: CSS é a abreviação de Cascading Style Sheets. Em português foi traduzido para Folhas de Estilo em Cascata, que é um documento no qual são definidas regras de formatação ou de estilos a serem aplicados nos elementos estruturais de marcação. A definição oficial é aquela encontrada no site do W3C - http://www.w3.org/Style/CSS/.

Abandonando qualquer pretensão de precisão técnica ou acadêmica podemos afirmar que as CSS constituem uma poderosa ferramenta de formatação e apresentação conjuntural de conteúdo na internet, enquanto a HTML (ou XHTML) é utilizada como ferramenta de formatação e apresentação estrutural dos conteúdos propriamente ditos.

Para tornar ainda mais simples nossa explicação valemo-nos de uma comparação figurativa. Imagine um carro como sendo um documento Web. O HTML (ou XHTML) é o chassi e as CSS são o seu acabamento.  Enquanto a HTML (ou XHTML) é utilizada para marcação estrutural do documento, as CSS preocupam-se com aspectos relacionados à sua apresentação, como posicionamento do texto, cores e tamanhos de fontes e outros conteúdos de estilo.

Parte do nome - Folhas de Estilo - está justificada no parágrafo acima. Por que, todavia, em Cascata ? Simplesmente por que as regras de estilo fluem de forma hierarquizada, obedecendo uma cadeia ordenada pré-estabelecida. Por fugir ao escopo deste tutorial introdutório, não entraremos em detalhes em relação à composição desta ordem, mas creia-me, o tema é simples e de fácil compreensão.

Benefícios: Acreditamos que, entre inúmeros outros, o maior benefício encontrado no das CSS relaciona-se ao aspecto da acessibilidade. Ao separar a estrutura dos documentos de sua apresentação passa-se a ter um controle preciso - independente da marcação - do espaçamento de caracteres, alinhamento de texto, posicionamento de objetos na página, características de fontes, etc. Separando os estilos da marcação podemos ter documentos com códigos HTML limpos e, portanto, significativamente mais leves, inteligíveis para manipulação e, o que é mais importante, mais acessíveis.

Outro benefício de suma importância é aquele relacionado à manutenção de web sites, principalmente aqueles de maior porte. O uso das CSS deixou de ser recomendável e passou a ser imprescindível, uma vez que permite, através de procedimentos relativamente simples, promover alterações de estilo de 10 ou 10.000 páginas em alguns poucos minutos.

Por fim, não há dúvida que o desenvolvimento de documentos web através de códigos limpos e bem estruturados é fator relevante para que o seu site seja bem classificado pelos principais buscadores. Além disto, uma das conseqüências naturais da utilização das CSS é a diminuição de peso e tempo de upload (carregamento) da página.

Teste as suas páginas no W3C: Seja você um desenvolvedor, proprietário ou usuário que utiliza a internet com finalidade profissional (vendedor ou comprador de serviços na Web), é altamente recomendável que você verifique a "qualidade estrutural" e não apenas a "qualidade conjuntural" de páginas da internet, como normalmente se faz. É bastante razoável a proposição de que tal análise qualitativa de caráter mais geral e elementar deve preceder o exame de outros aspectos relevantes específicos, consideradas as prioridades e finalidades respectivas. Melhor explicando: antes de analisar o conteúdo deste tutorial, seria bastante inteligente examinar a estrutura interna deste documento, pois, imaginem seu valor do ponto de vista qualitativo se for reprovado neste exame preliminar. Seguem então, os links para validação de páginas do W3C: HTML - http://validator.w3.org/ e CSS - http://jigsaw.w3.org/css-validator/.

Estilos desta Página: Este documento web (tutorial) tem algumas características de estilo que servirão para demonstrar, em medida simbólica, quase insignificante, o poder das chamadas Folhas de Estilo em Cascata. Observe atentamente o formato da fonte de cada um dos tópicos deste nosso tutorial. Utilizamos uma propriedade CSS chamada font-variant, que admite entre outros, o valor utilizado por nós, small-caps, que faz com que as letras minúsculas sejam "transformadas em maiúsculas", porém, com uma altura um pouco menor do que as maiúsculas normais.

Você deve ter percebido, também, que o espaçamento entre as letras é um pouco maior do que o espaçamento normal (padrão) e, é claro, pode atender, entre outras, à finalidade prática de tornar mais fácil a leitura de um texto. A propriedade CSS utilizada é denominada letter-spacing com o valor de 1px (um píxel).

Um convite: vamos aprender CSS ? Esta introdução será para muitos o primeiro contato com uma ilustre desconhecida, as Folhas de Estilo em Cascata. Sendo esta a sua condição, será perfeitamente compreensível que ao concluir esta leitura tenha permanecido no mesmo ponto em que começou e, ainda pior (ou melhor), tenha multiplicado de maneira expressiva as interrogações que existiam antes de iniciá-la. No próximo tutorial - Lições preliminares - Parte I - que será publicado no dia 29/02/2008, procuraremos lhe apresentar informações e ferramentas que permitirão à você, em um relativamente curto espaço de tempo, utilizar esta poderosa ferramenta na construção de documentos web. Forneceremos em endereço de e-mail que será utilizado para o recebimento e análise de dúvidas, críticas e sugestões que contribuirão para orientar a edição de conteúdo e esclarecimento das dúvidas mais comuns e freqüentes, através de um sistema de perguntas e respostas.

 Publicado: 22/02/2008  

 1 de 8