O que é CSS e por que é tão importante?

Quem pensa em ingressar no mundo do desenvolvimento de sites e aplicações para a Web, em algum momento terá que lidar com um conceito importantíssimo – o CSS.

Ainda que os sites e tudo o que você acesse na rede mundial de computadores, estejam cada vez mais baseados em CMSs, plataformas e tecnologias que requerem cada vez menos conhecimento de código e programação, como low code e no code, pode haver momentos e situações em que conhecer e saber usar o CSS, seja essencial.

Com isso em mente, no post de hoje você será apresentado ao básico desse advento, que sem exagero, transformou radicalmente os primeiros sites naquilo que acessamos atualmente.

O que é CSS?

CSS é o acrônimo ou a sigla formada pelas primeiras letras de Cascading Style Sheets e que traduzido para o português, significa Folha de Estilo em Cascatas.

Isso não explica muito – ou nada – do que se trata.

No entanto, quando analisamos o termo, algumas pistas começam a nos ajudar a entender melhor.

Pense na palavra estilo, como estamos acostumados a usar para as pessoas.

Quando falamos em estilos de nos vestirmos, ele é alterado conforme a escolha da roupa usada, do corte de cabelo, da maquiagem, no caso das mulheres, além dos sapatos, bolsas e demais acessórios. Tudo isso ajuda a compor o estilo.

Quando a pessoa muda de roupa, de acessórios e o seu corte ou a cor do cabelo, ela acaba mudando seu estilo, parecendo mais séria ou mais descontraída. Mais formal ou informal. Quem sabe mais conservadora ou bem moderna e antenada com a moda.

A pessoa ainda é a mesma, mas a depender da mudança no estilo, sua aparência e o que ela transmite a quem a vê, também muda.

Outra analogia comum e que faz uso de algo que todos nós conhecemos, está presente nos editores de texto. Inclusive, alguns deles agrupam alguns recursos sob uma guia chamada de estilos.

É possível alterar a formatação do texto, clicando em diversos botões de recursos associados a aparência do conteúdo digitado. Se ele se apresenta como um parágrafo, ou um título, ou talvez uma lista de tópicos. Pode-se alinhar a esquerda, centralizar, colocar em negrito, em Itálico e fazer uso de diferentes fontes.

Mexer em todos os aspectos do estilo do texto, pode torná-lo mais legível, mais agradável de ler ou adequado ao propósito específico, como dividi-lo em duas colunas, um tipo de diagramação comum em revistas, por exemplo.

Fala-se em folhas, porque é possível ter várias folhas ou arquivos, cada qual contendo diferentes estilos ou mesmo estilos complementares.

E aqui voltamos a analogia do vestuário. Muda-se o vestuário, muda-se seu estilo. Ao usar diferentes folhas de estilo para um mesmo texto, pode-se ter textos que na aparência são bem diferentes.

Ao termos diferentes folhas de estilos, cada uma contribui para conferir um determinado estilo.

Por fim, o a palavra cascatas refere-se à hierarquia vertical, de cima para baixo, que prioriza as regras que devem ser seguidas para aplicação do estilo.

É justamente disso que trata o CSS. Ele altera a aparência do conteúdo HTML, ou se preferir, o estilo do conteúdo e que pode ser útil para estar em conformidade com o design e layout do site, para atender o tipo de conteúdo, ou "apenas" para tornar mais legível e agradável de consumir ao visitante.

Por que o CSS foi criado?

Quando o HTML foi criado, inicialmente não se previa formatação, para o conteúdo. Pelo menos não em níveis mais extensos.

Quando perceberam a utilidade de uma página em HTML e os sites na web começaram a se tornarem mais comuns, também viram que era conveniente ter recursos de formatação mais extensos. Que tal, por exemplo, mudar a fonte utilizada, o seu tamanho ou a sua cor? Talvez tudo isso, bem como outros elementos de texto e que fazem parte da página?

Foi então que foram criados os atributos correspondentes a essas propriedades (font-family, font-size, color, etc), por exemplo, para a tag parágrafo ("P").

Mostrou-se um passo importante, pois com isso as páginas passaram a ter estilos diferentes daquelas páginas “sem graça” produzidas nas primeiras versões do HTML e mais adequados à sua proposta e ou conteúdo que apresentavam.

Mas e se, de repente achássemos que era preciso usar uma fonte mais legível? Ou talvez, fosse importante aumentar o tamanho dessa fonte? Se tivéssemos páginas usando esse recurso de um atributo associado à tag do parágrafo, teríamos que promover a alteração em todas as tags de parágrafo do site inteiro.

Seria um trabalho razoavelmente fácil e rápido em um site de 4 ou 5 páginas e com meia dúzia de parágrafos em cada uma. Mas e se tivéssemos que fazer isso em 1000 páginas, cada uma com dezenas de parágrafos?

Foi então que Håkon Wium Lie idealizou o conceito de CSS, que viria a ser ajustado e lançado no ano de 1996 pelo W3C (World Wide Web Consortium) e que é a organização responsável pelos padrões na World Wide Web.

Ao usar o CSS, foi possível definir por exemplo, que todo parágrafo – o conteúdo compreendido pela tag “P” – presente em qualquer página, pudesse ter sua formatação (família de fonte, tamanho da fonte, cor, etc) definida em uma folha de estilo, na qual as suas propriedades estivessem descritas.

Na imagem a seguir, é possível ver como poderia parecer uma página lá na “pré-história da Internet” e sua versão mais “moderna”, já fazendo uso do CSS.

A partir de então, definia-se as propriedades de cada tag HTML que tivesse atributos configuráveis e cada vez que eles fossem usados, assumia-se o estilo definido na folha de estilo correspondente.

Fazer alterações quaisquer em um site de página única ou de 1000 páginas, passou a depender de editar apenas as folhas de estilo que tais páginas utilizam. Uma só alteração!

Quais os benefícios / vantagens de usar CSS?

Já seria motivo suficientemente bom tornar a edição dos estilos das páginas de um site mais simples e rápida, mas há outros benefícios / vantagens em usar o CSS:

1. Tamanho do site

É preciso lembrar que estamos falando da década de 1990 por ocasição da criação do CSS e mesmo alguns anos depois, a realidade dos poucos que já conseguiam se conectar à Internet, era bem diferente dos dias atuais.

A maioria das pessoas não sabe o que era uma conexão discada e que a depender do provedor e da placa de modem usada no PC, mal chegava a 10 Kbps. Por isso, economizar qualquer byte no código do site, fazia toda diferença.

Sim, porque em vez de repetir para cada parágrafo (tag p), cada título ( tags h1, h2, h3, …) e demais tags que permitem os atributos de estilo, utilizava-se a definição dos seus atributos, apenas uma vez no CSS correspondente.

Portanto, quanto menor fosse o tamanho dos arquivos que compunham o site, mais rapidamente – ou melhor, menos lentamente – ele era transferido do servidor no qual estivesse hospedado, para o PC do visitante do site.

E por falar em servidor de hospedagem, havia ainda outra boa razão relacionada. Se hoje qualquer plano de hospedagem possibilita ter vários Gigabytes de dados hospedados, nos primórdios da Web, contar com um plano de 50 Mb era para poucos e poderia custar bem mais do que custa atualmente um plano robusto.

Assim, ocupar pouco espaço em disco do plano, não era apenas uma questão de vontade, mas de necessidade.

Os tempos são outros, mas ainda se busca “economizar” tudo que é possível em termos de tamanho de site, a fim de privilegiar seu desempenho na hora de ser exibido no navegador web.

2. Recursos do usuário

A preocupação acima – tamanho do site – ainda tem outros desdobramentos para o usuário.

Se um site do passado pode abrir nos navegadores dos smartphones atuais, até os mais simples, em um piscar de olhos, nem sempre foi assim.

Mesmo hoje, sites sem preocupação com o usuário final e sem versões mobile, podem consumir grandes volumes de memória RAM e processamento. E tal como era com as conexões, os melhores PCs de então, eram equipados com processadores single core, frequência que não superava os 10 Mhz e memórias RAM da ordem de Kbytes!

Ou seja, sites “pesados” seriam um problema para quem tentasse acessá-los e poderia consumir boa parte dos seus recursos.

3. Codificação

Não demorou a aparecerem os primeiros editores WYSIWYG (What You See Is What You Get ou editores visuais) e que dispensavam digitar todo o código HTML, mas ainda assim, os atributos exigiam que se clicasse em algum botão e seus valores precisavam ser digitados.

Ao restringir ao CSS, o trabalho de codificação também tornou-se mais fácil e rápido.

Garante-se além disso, padronização de todas as páginas que devem usar o mesmo estilo e que nenhuma “fique de fora” ou seja esquecida.

Sintaxe e estrutura de um arquivo CSS

O CSS não é uma linguagem de programação, mas é uma linguagem de estilo. Todavia, tal como toda linguagem, ela tem uma sintaxe e uma estrutura, a fim de que qualquer pessoa que leia um arquivo seja capaz de compreendê-lo e alterá-lo, se necessário, mas principalmente para que os sistemas que façam uso dela, interpretem seu conteúdo corretamente.

A sua sintaxe é bastante simples, baseada em inglês e faz uso do que se conhece por seletores e blocos de declaração.

O seletor refere-se ao elemento HTML cujos atributos deseja-se definir. Já o bloco de declaração, é onde tais atributos são declarados com seus respectivos valores e que são separados por “:” (dois pontos). Por recomendação e para melhorar a legibilidade, cada atributo deve constar em uma linha – embora nada impeça de estarem em uma mesma linha – e o “:” (ponto e vírgula) determina o fim da declaração de cada atributo.

No exemplo a seguir, temos o arquivo CSS bem simples relativo à imagem anterior do nosso “site jurássico”.

Vê-se como cada tag HTML (body, h1, p, li, a) tem seus atributos declarados e valores que devem assumir.

Além das tags, há dois outros seletores (paragrafo-final e autor), com uma sintaxe ligeiramente diferente. Não são relativos à nenhuma tag. São uma classe e um id.

O que é classe e id no CSS?

A evolução do CSS teve que lidar com várias situações práticas, como por exemplo, quando se queria ou precisava que determinados parágrafos tivesses um estilo diferente dos demais. Ou quem sabe, apenas um elemento, tivesse uma característica própria e individualizada.

Para sanar tais demandas, existem a classe e o id no CSS.

A primeira – a classe – pode ser compartilhada e usada tantas vezes quantas vezes for necessário. Também podem ser usadas mais de uma classe para uma mesma tag HTML.

No caso do segundo – o id – ele é exclusivo do elemento para o qual foi criado. Inclusive id vem de identificador e, portanto, um nome que identifica ou individualizada algo, deve ser único. Essa é a principal diferença para as classes, além da sintaxe e da forma como são usados no HTML.

Em nosso exemplo, na imagem anterior, a classe aparece no arquivo CSS identificada por um ponto seguido de “paragrafo-final”. Já o id, é reconhecível pelo caractere da tralha (jogo da velha ou “#”) e de “autor”.

Como usar o CSS com o HTML?

O uso do CSS no HTML é bastante simples e segue os seguintes princípios:

• Todo arquivo que corresponde ao CSS ou à folha de estilos para ser usado, deve ser criado em um editor de texto / código e que pode ser o bloco de notas do Windows e salvo com extensão “css”;

• Os arquivos devem seguir a sintaxe e a estrutura vista nos exemplos que demos acima, de modo que o motor / engine do navegador interprete seu conteúdo e aplique os estilos corretamente;

• A incorporação de classes e ids no HTML, é feita incluindo a palavra “class” ou “id”, o sinal de igual “=” e o nome da classe ou id, entre aspas duplas e sem o ponto (“.”) ou a tralha (“#”), como pode ser visto na imagem do nosso HTML de exemplo;

• No arquivo HTML devem ser definidos todos os arquivos CSS que são usados pela respectiva página. Havendo mais de um, crie uma linha para cada, sendo que o valor do atributo href deve conter o path (caminho) relativo ao arquivo HTML, mas pode ser também o path absoluto, ou seja, a URL dele. Em nosso exemplo, como está na mesma pasta e optamos pelo path relativo;

• A linha correspondente ao CSS deve estar entre as tags head.

Ou seja, o nosso exemplo de folha de estilo, alterou a página em HTML acima e que sem o CSS, apareceria como vimos inicialmente.

A cor do fundo foi alterada, bem como diferentes aspectos das fontes tanto dos parágrafos, como da lista de tópicos.

Também foi criada uma classe para o último parágrafo e um id para o que contém informações do autor.

É um exemplo bastante simples e sem qualquer preocupação em ser bonito ou atraente, mas que é suficiente para ilustrar as possibilidades que o CSS oferece.

Conclusão

Compreender o que é CSS, sua importância e uso, é fundamental para todos que trabalham com criação e/ou manutenção de sites.