Introdução às CSS

O nascimento da HTML

A linguagem de marcação HTML (Hyper Text Markup Language) foi desenvolvida e aperfeiçoada até tornar-se tal como a conhecemos nos dias atuais a partir de uma "invenção" devida a um pesquisador físico, para trafégo de textos e informações de natureza científica.

Assim, o embrião da HTML surgiu para servir a uma comunidade bastante restrita, a comunidade de cientistas e com funcionalidades bem limitadas.

A HTML atual

Com a introdução gradativa de novas tags, atributos e aplicações específicas, HTML transformou-se em um padrão mundial de apresentação de conteúdo na Web.

A evolução vinha atropelando tudo com uma avalanche de novas facilidades, funcionalidades, softwares, hardware etc. E, a HTML que limitava-se a ser uma linguagem puramente de marcação carecia de funcionalidades destinadas a manipular visualmente os conteúdos.

Para suprir tal carência novas tags e atributos foram inventados, tais como a tag font e o atributo color que permitiam alterar a aparência dos textos.

Nascia assim a estilização dos conteúdos.

Com a evolução trazendo novas descobertas com um dinamismo alucinante que estamos testemunhando até os dias de hoje, novas tags e novos atributos de estilização foram criados. Com isso, a velha linguagem de marcação passou a exercer uma dupla função. A função de estruturar o conteúdo com uso da marcação e a função de apresentá-lo, ou seja, de dar a aparência final ao conteúdo.

Os problemas criados

Mas, esta dupla função da HTML, se por um lado resolveu necessidades de designers e desenvolvedores na área da apresentação por outro trouxe sérios problemas aos projetos web. Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo do controle de seus criadores.

Para ilustrar suponha o seguinte cenário.

Seu melhor cliente telefona às 17:00h da tarde de uma sexta-feira (sempre ligam nesta hora para solicitar alguma coisa não é mesmo?) e diz o seguinte;

Teremos uma reunião aqui na empresa, na segunda-feira às 0800h com um potencial comprador e é nossa intenção fazer uma apresentação dos nossos produtos através do site que você criou e mantém. Seguindo uma sugestão do nosso departamento de marketing precisamos mudar a cor de todos os títulos no site de verde para vermelho, pois que esta é a cor principal da marca do nosso comprador e com isso pretendemos fixar uma cumplicidade subliminar. Isto é bem simples de fazer, não é? Afinal é só mudar a cor! Dá para você 'botar no ar' até às 19:30h? Quero dar uma olhadinha antes de encerrar o expediente. OK?

Claro que você concorda e responde que vai providenciar rapidinho, afinal é só para mudar a cor. Mas, são 180 páginas no site. E os títulos são tags de cabeçalho marcadas com linguagem HTML como mostrado a seguir.

<hn>
  <font color="#0f0">Título</font>
</hn>

Supondo uma média de 3 títulos por página, você tem um total de 540 tags font para editar e mudar o atributo color. E se o seu cliente tivesse pedido para mudar a cor dos textos, e do fundo? Bem, este exemplo simples dá uma dimensão de um dos problemas criados com a mistura de marcação com apresentação (estilização).

A solução proposta

Cada vez mais ficava evidente que esta mistura que maravilhou os desenvolvedores web no início, tornara-se uma grande dor de cabeça. E é claro, a solução passava por dissociar linguagem de marcação da estilização.

Desta necessidade nasceu as CSS, sigla em inglês para Cascading Style Sheet que em português foi traduzido para Folha de Estilo em Cascata.

CSS criou o conceito que preconiza o uso dos elementos HTML exclusivamente para marcar e estruturar o conteúdo do documento. Nenhum elemento ou atributo HTML deve ser usado para alterar a apresentação, ou seja, para estilizar o conteúdo.

A tarefa de estilização fica a cargo das regras CSS que são gravadas em um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os elementos da HTML.

As regras de estilos poderãso ser escritas em um arquivo externo com extensão .css ou incorporadas ao documento HTML com uso do elemento style - consulte o tutorial Vinculando folhas de estilos à documentos).

Voltando ao cenário anterior, e supondo que estamos usando um arquivo CSS separado, seria possível alterar a cor de TODOS os cabeçalhos em TODO o site em CINCO SEGUNDOS. Às 19:28h você retorna a ligação do cliente e pede para a secretária avisá-lo de que "já está no ar", sem maiores traumas, correrias e estresses. Ah e mais, mesmo que o site tivesse 1.800 páginas e não as 180 da situação criada, você gastaria os mesmos cinco segundos.

As restrições

A tendência do projeto web aponta para uso amplo das CSS, ainda não explorada em toda sua potencialidade por razões de incompatibilidades de certas propriedades CSS com navegadores mais antigos e com as interpretações diferentes das CSS por parte das aplicações de usuários criadas por fabricantes distintos.

Contudo, é quase certo que as novas tecnologias voltadas para o desenvolvimento, não só das variadas aplicações de usuário como também de softwares e hardwares, atendam e se enquadrem dentro das recomendações e especificações dos órgãos normatizadores, notadamente as web standards do W3C.

Quando o projeto web em todas as suas incontáveis variantes, seguir a normatização e padronização recomendada pelo W3C, teremos uma web muito mais fácil de projetar, dinâmica, acessível e agradável.

O efeito cascata

Que estilo será aplicado, quando há conflito de estilos especificados (por exemplo: uma regra de estilo determina que os parágrafos serão na cor preta e outra que serão na cor azul) para um mesmo elemento HTML?

Aqui entra o efeito cascata, que nada mais é, do que o estabelecimento de uma prioridade para aplicação da regra de estilo a um elemento.

Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.

A prioridade para o efeito cascata em ordem crescente é a seguinte:

1. folha de estilo padrão do navegador do usuário;
2. folha de estilo do usuário;
3. folha de estilo do desenvolvedor;
   • estilo externo (importado ou linkado).
   • estilo incorporado (definido na seção head do documento);
   • estilo inline (dentro de um elemento HTML);
4. declarações do desenvolvedor com !important;
5. declarações do usuário com !important;

Assim, uma declaração de estilo com a diretiva !important definida pelo usuário prevalece sobre todas as demais, é a de mais alta prioridade. Entre as folhas de estilo definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto é, prevalecerá sobre a folha de estilo definida na seção head, e, esta prevalecerá sobre uma folha de estilo externa. A prioridade mais baixa é para estilos padrão do navegador.

Agora você já sabe o porquê de "cascata" no nome Folha de estilo em cascata, consulte os diversos tutoriais deste site para saber mais sobre o efeito cascata.

Compartilhe essa matéria com seus amigos