CSS

A linguagem CSS (acrônimo para Cascading Style Sheet) (Folha de Estilos em Cascata) possibilita a separação entre o conteúdo e a aparência das informações exibidas para o usuário em uma aplicação para web.

O desenvolvedor da aplicação, via CSS, altera a aparência padrão das tags HTML usada pelos navegadores. Assim, conhecendo as linguagens HTML e CSS, o desenvolvedor consegue defir a aparência (interface com o usuário) das suas aplicações.

Outro benefício de CSS é possibilitar que um mesmo conteúdo possa ser exibido de formas diferentes em diferentes dispositivos (computador, tablet, celular), adaptando-se ao tamanho da tela.

Breve Histórico

A especificação da linguagem CSS está a cargo do W3C que, ao longo dos anos (entre 1996 e 2012) publicou várias versões (CSS1, CSS2 e CSS3).

A plena adoção de CSS sempre foi dificultada foi devido as incompatibilidades e inconsistências entre os diversos navegadores. Isso acontece por dois motivos principais:

• os navegadores não implementam 100% da especificação. Há diferenças inclusive para o mesmo navegador em diferentes plataformas (por exemplo, funciona no Windows e não funciona no Linux)
• diferenças na interpretação da especificação. Nem tudo está 100% claro sobre como proceder.

• nem toda a especificação está terminada (ver a seguir).

  A especificação da versão CSS3 foi dividida em diversos módulos (detalhes aqui). Cada módulo é independente dos demais e segue seu próprio ritmo de desenvolvimento. Assim, enquanto alguns módulos já estão prontos (e já são usados por todos os navegadores) outros ainda estão em diferentes etapas de desenvolvimento.

Assim, em termos práticos, ainda hoje é necessário informar o usuário em quais plataformas e versões a aplicação para web funciona corretamente. Por exemplo, site https://caniuse.com/ permite descobrir o que pode ser usado em cada navegador.

Apesar destas dificuldades, a adoção de CSS é um fato consumado e os benefícios compensam.

Seletor

O conceito fundamental de CSS é o de seletor. Um seletor é uma expressão textual que define quais partes de um texto HTML terão sua aparência alterada pelas definições CSS nele contidas.

No exemplo a seguir, o seletor .exemplo-seletor span define que o texto delimitado pela tag <span> dentro de uma classe exemplo-seletor deverá ser exibido em azul e o tamanho da fonte deve ser duas vezes maior que o tamanho da fonte atual.

 .exemplo-seletor span {
   color: blue;
   font-size: 2em;
 }

Assim, aplicando o seletor no texto HTML

 <div class="exemplo-seletor">
   <h3>Cotação do Dólar</h3>
   <p>O dólar fechou em <span>U$ 1 = R$3,24</span></p>
 </div>

este será exibido pelo navegador com a seguinte aparência: