No final de 1996 foi criado os Cascading Style Sheets (folhas de estilo em cascata). Apenas o Internet Explorer 3.0 usava tal recurso, pouco conhecido e sem grande utilidade. Hoje, em sua segunda fase (Level 2), ele já é também recomendado pela W3C (The World Wide Web Consortium), entidade que dita os padrões das Web mundial.
Folhas de estilos nada mais são que alguns comandos HTML que são introduzidas no cabeçalho do código de um Web site. Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim de manter a mesma aparência, seguir um padrão. Por exemplo, um elemento de design Heading 1 é geralmente alguma fonte grande que identifica todas as principais divisões de tópicos de um capítulo, artigo ou página da Web. Um elemento de design Heading 2 identifica todos os títulos dos sub-tópicos. A HTML inclui uma tag para praticamente todos os elementos de design comumente utilizados, incluindo tags de título (<H1>, <H2>...), lista (a tag <OL> para lista ordenada, a tag <UL> para lista não ordenada) e assim por diante.
No passado, a tag <H1> em quase todos os Web sites parecia a mesma - texto preto era consideravelmente maior que o corpo do texto normal. Se houvesse o desejo de fazer seus próprios títulos diferenciados, tinha de formatar cada tag de título individualmente, utilizando tags <FONT> ou similares. Se mais tarde mudasse de idéias sobre a aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja: um processo lento e trabalhoso.
As folhas de estilo em cascata mudaram tudo isso. Com uma folha de estilo, você pode fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". Você precisa dizer isso somente uma vez e cada título <H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos <H1> sejam azuis" e pronto!
Obviamente, você não está limitado a títulos e nem a cor azul. É possível definir um estilo personalizado para cada elemento de design em seu Web site, incluindo títulos, lista, tabelas e imagens, para citar só alguns. E, além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante.
Veja abaixo as maneiras como as folhas de estilo podem ser úteis:
- Economizar o seu tempo;
- Diminuir o tamanho do código de seu site;
- Seu site irá carregar mais rapidamente;
- Mais facilidade de manter e fazer alterações no site;
- Mais controle no layout do site;
