O que é CSS e qual sua importância?

CSS é o acrônimo de Cascading Style Sheets que em português seria algo como “folhas de estilo em cascata”. É uma especificação que define como os elementos que compõem uma página, um documento ou aplicação Web serão exibidos.

Quando falamos de acessibilidade, performance e manutenção, tem-se como princípio fazer separação do conteúdo, da interatividade e da apresentação de um site ou aplicação web. O CSS desempenha um grande papel na camada da apresentação.

A forma certa de publicar um documento web é seguindo uma estrutura semântica. O CSS traz toda a informação do layout, isto é, cores, posicionamento, fontes, tamanhos e imagens de fundo, enquanto o HTML deve fornecer uma “arquitetura” para o conteúdo. O suporte a CSS pelos navegadores de hoje é bem sólido, mas teve um início tímido, sendo inicialmente suportado pelo navegador Netscape.A primeira versão da especificação foi lançada em 1996 e uma segunda versão publicada em 1998 mas até 2009 nem todos os navegadores em uso suportavam plenamente seus recursos. Uma nova versão da especificação está em desenvolvimento e felizmente os navegadores mais recentes já estão testando-a.

Como o navegador Internet Explorer demorou a suportar todos os recursos do CSS, web developers e web designers utilizavam tabelas para montar a estrutura das páginas e toda a informação de estilo ficava junto do conteúdo. Com a melhoria das velocidades de internet (em tempos de conexão discada), foi possível adotar layouts mais complexos e modernos, ainda usando tabelas. Criou-se um mito de que projetos utilizando CSS eram muito simples, limpos e  “quadrados”. Este mito foi desvendado quando outros navegadores entraram em uso e o suporte às novas especificações foi implementado no Internet Explorer. Outro fator que contribuiu muito para a adoção das novas tecnologias para CSS foi o crescimento no uso de internet mobile em que as páginas precisam ser leves e o conteúdo apresentado de forma correta em diferentes dispositivos, o que não seria possível com tabelas.

Como funciona? Por que “cascata”?

A palavra “cascata” no nome se dá pela modularidade da especificação: Em um documento você pode ter vários arquivos CSS, carregando diferentes regras que se referem a múltiplos ou aos mesmos elementos.

Um conceito importante para o funcionamento do CSS é o modelo de blocos e elementos “inline”. Um elemento dentro de um documento HTML formatado em CSS é constituído por um bloco, um retângulo. Dentro deste bloco existe uma margem, uma borda e um preenchimento ao redor do conteúdo e através de algumas propriedades podemos alterar seus tamanhos, cores, imagens de fundo e estilos. Quando um elemento de bloco é colocado ao lado de outro, por padrão cada elemento utiliza toda a sua largura disponível e quebra a linha antes e depois de si próprio. Dentro dos elementos de bloco podem existir outros elementos de bloco ou elementos “inline”, aqueles que ocupam somente sua largura necessária e não criam linhas antes e depois de si (links, abreviações, um rótulo ou elemento de formulário por exemplo).

Talvez por conta deste conceito o mito de que os layous feitos com CSS sejam apenas “quadrados” tenha
persistido por tanto tempo.

Quais os benefícios?

CSS foi uma revolução para o desenvolvimento web. Seus benefícios mais concretos são:

  • Controle de interface em diferentes documentos em um único arquivo;
  • Controle de diferentes interfaces para diferentes dispositivos (responsive design);
  • Precisão para manter a mesma interface para diferentes navegadores;
  • Melhorias na acessibilidade com a possibilidade de “esconder” elementos da tela para usuários sem problemas de visão, mas manter os mesmos elementos acessíveis para leitores de tela;
  • Formulários com look and feel diferente do padrão do sistema operacional;
  • Menor consumo de banda para usuário e servidor;
  • Inúmeras técnicas dinâmicas que não poderiam ser utilizadas em tabelas;

Nas imagens abaixo podemos ver como os elementos de bloco e inline estão organizados em diferentes layouts:

[nggallery id=1]

Por MATERA SYSTEMS

Postado em: 25 de julho de 2012

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário