O que é CSS e para que serve?

O que é CSS e para que serve?

CSS é a linguagem usada para dar estilo às páginas da web. Quando uma pessoa abre um site no navegador, ela não vê o código: vê cores, letras de tamanhos diferentes, botões, menus, imagens bem posicionadas e espaços organizados. Toda essa aparência visual não é decidida pelo acaso nem pelo navegador por conta própria, mas por um conjunto de regras escritas em CSS, a sigla em inglês de Cascading Style Sheets, que em português pode ser traduzida como folhas de estilo em cascata. Junto com o HTML, o CSS faz parte da base sobre a qual é construída a grande maioria dos sites da internet, e compreendê-lo é indispensável para quem quer criar, manter ou analisar uma página web.

Neste artigo se explica o que é CSS, em que ele se diferencia do HTML, de que maneiras ele pode ser aplicado a uma página, qual é a sua sintaxe básica, quais são as propriedades mais usadas, o que significa design responsivo e qual papel os frameworks como o Bootstrap desempenham.

O que significa CSS

A sigla CSS vem de Cascading Style Sheets, expressão que pode ser traduzida como folhas de estilo em cascata. Cada parte do nome descreve uma característica da linguagem. Uma folha de estilo é um conjunto de regras que indica como um documento deve se parecer. A palavra "cascata" se refere à forma como o navegador combina e resolve as regras quando várias delas atingem o mesmo elemento: as declarações são herdadas dos elementos superiores, combinam-se entre si e, quando entram em conflito, são aplicadas segundo uma ordem de prioridade bem definida, parecida com o percurso de uma cascata. É por isso que o valor definido por uma regra pode ser modificado por outra regra mais específica escrita mais adiante.

Vale deixar claro desde o início que CSS não é uma linguagem de programação. Com ela não se escrevem condições, loops nem cálculos, como se faz com JavaScript ou Python. O CSS é uma linguagem de estilo, também chamada de linguagem de apresentação: sua única tarefa é descrever como o conteúdo de uma página se parece e como ele é organizado. Essa distinção é útil para quem está começando, porque define expectativas realistas sobre o que cada tecnologia permite fazer.

O que o HTML faz e o que o CSS faz

Para entender o que é CSS, convém compará-lo com o HTML, a linguagem usada para escrever o conteúdo das páginas. O HTML cuida da estrutura e do significado: define os títulos, os parágrafos, as listas, as imagens, os links e os formulários. Ele informa ao navegador, por exemplo, que uma frase é um título e que outra é um parágrafo. O CSS, por sua vez, cuida da apresentação: define como esses títulos e parágrafos se parecem, com qual cor, com qual tipo de letra, com qual tamanho, com quais margens e em que posição da tela eles aparecem.

Uma analogia simples ajuda a fixar a ideia. Pense em uma casa: o HTML seria a estrutura, ou seja, as paredes, as colunas, os telhados e a distribuição dos cômodos, porque sem essa estrutura a casa não existe. O CSS seria a decoração: a tinta das paredes, o piso, a iluminação e os móveis, porque tudo isso define como a casa se parece, embora não sustente a construção. Também é possível comparar o HTML ao esqueleto de uma pessoa e o CSS à roupa: o esqueleto sustenta o corpo e define sua forma básica, enquanto a roupa é o que as outras pessoas notam primeiro. Uma página moderna precisa das duas linguagens: uma página com HTML mas sem CSS é exibida como um documento de texto simples, sem cores nem distribuição, muito parecido com os primeiros sites da década de 1990.

Como o CSS é aplicado a uma página web

Existem três formas de aplicar CSS a uma página, e cada uma ocupa um lugar diferente dentro do projeto. As três produzem o mesmo resultado visual no navegador, mas mudam a organização do código e a facilidade de manutenção no futuro.

• CSS em linha: as regras são escritas diretamente dentro da tag HTML, por meio do atributo style. Por exemplo, um parágrafo pode conter style="color: blue;" e esse parágrafo específico será exibido com texto azul. Serve para mudanças muito pontuais, mas mistura a apresentação com o conteúdo e torna o código difícil de manter conforme a página cresce.
• CSS interno: as regras são colocadas dentro de um bloco style localizado na seção head do documento HTML, ou seja, na parte superior do arquivo. Dessa forma, todo o estilo de uma página fica reunido em um só lugar, embora continue dentro do mesmo arquivo e se aplique apenas àquela página.
• CSS externo: as regras são salvas em um arquivo separado com extensão .css, por exemplo estilos.css, e esse arquivo é vinculado ao documento HTML por meio de uma tag link. Assim, um único arquivo de estilos pode controlar a aparência de muitas páginas ao mesmo tempo.

Em projetos reais, quase sempre se recomenda o CSS externo, porque ele separa o conteúdo da apresentação: as mudanças de design são feitas em um único arquivo e se refletem em todo o site, o código fica mais organizado e o navegador pode guardar o arquivo em seu cache para que as páginas carreguem mais rápido. Os três métodos convivem na prática, mas o externo é a base das boas práticas de desenvolvimento web.

A sintaxe básica do CSS

A unidade fundamental do CSS é a regra, e todas as regras seguem a mesma estrutura. Primeiro se escreve um seletor, que indica a quais elementos da página o estilo será aplicado. Depois se abrem chaves e, dentro delas, escreve-se uma ou mais declarações separadas por ponto e vírgula. Cada declaração é formada por uma propriedade, dois pontos e um valor. Escrita em texto simples, a forma geral é esta: seletor { propriedade: valor; }.

Por exemplo, a regra p { color: blue; } indica que todos os parágrafos da página devem exibir seu texto na cor azul. Nessa regra, a letra p é o seletor e aponta para as tags de parágrafo do HTML; color é a propriedade, que define a cor do texto; e blue é o valor escolhido. Se também fosse desejado um texto maior, bastaria acrescentar outra declaração dentro das mesmas chaves: p { color: blue; font-size: 20px; }.

Os seletores podem nomear diretamente uma tag, como nos exemplos anteriores, mas também podem ser mais específicos. Uma classe é escrita com um ponto antes do nome, como .destaque, e serve para aplicar o mesmo estilo a vários elementos que compartilham essa classe. Um id é escrito com o sinal de sustenido, como #menu, e serve para apontar para um único elemento dentro da página. Graças a essa flexibilidade, o CSS pode estilizar desde uma única palavra até seções inteiras de um site.

As propriedades de CSS mais usadas

O CSS oferece centenas de propriedades, mas a maior parte dos designs do dia a dia se resolve com um pequeno grupo delas. A tabela a seguir resume as mais comuns, indica o que cada uma faz e mostra um exemplo de valor que elas podem receber:

As propriedades margin e padding fazem parte do chamado modelo de caixa, uma ideia central do CSS segundo a qual cada elemento de uma página se comporta como uma caixa retangular composta por quatro partes: o conteúdo, o espaço interno chamado padding, a borda e o espaço externo chamado margin. Entender esse modelo ajuda a prever por que um elemento ocupa mais ou menos espaço do que o esperado e facilita o ajuste preciso da distribuição de uma página.

O que é design responsivo

Hoje as páginas são visitadas a partir de telas de muitos tamanhos: celulares, tablets, notebooks e monitores grandes. O design responsivo é a prática de criar páginas que se parecem bem e funcionam bem em todos esses dispositivos, ajustando automaticamente a distribuição, o tamanho das letras e a visibilidade dos elementos de acordo com a largura da tela. Sem design responsivo, uma página feita para computador fica minúscula, desorganizada ou com barras de rolagem laterais quando é aberta em um celular.

A principal ferramenta que o CSS oferece para alcançar esse comportamento são as media queries, também chamadas de consultas de mídia. Uma media query é uma regra especial que aplica determinados estilos somente quando uma condição sobre o dispositivo é atendida, quase sempre relacionada à largura da tela. Em texto simples, uma media query é escrita assim: @media (max-width: 768px) { seletor { propriedade: valor; } }. Isso significa que os estilos dentro das chaves só são aplicados quando a tela tem 768 pixels de largura ou menos, que é o caso típico de um tablet ou de um celular na posição vertical. Graças a essa técnica, um mesmo documento HTML pode exibir um menu horizontal amplo no computador e um menu compacto e empilhado no celular, sem precisar criar duas versões da página.

Além das media queries, o design responsivo se apoia em outras ferramentas do CSS, como as unidades de medida relativas, que são calculadas a partir do tamanho da tela ou da letra base, e os sistemas de layout flexbox e grid, que permitem reorganizar linhas e colunas conforme o espaço disponível. Em conjunto, essas ferramentas fazem o conteúdo se adaptar ao dispositivo em vez de obrigar o usuário a dar zoom ou a rolar a tela para os lados para conseguir ler.

O que são frameworks de CSS e qual o papel do Bootstrap

Conforme um site cresce, escrever todas as regras do zero pode ficar lento e repetitivo. Por isso existem os frameworks de CSS: conjuntos de estilos já prontos que oferecem classes e componentes prontos para usar, como botões, formulários, menus, cartões e sistemas de colunas. Em vez de escrever o estilo de cada elemento, o desenvolvedor adiciona às tags HTML as classes oferecidas pelo framework e o design aparece imediatamente, com uma aparência consistente em todo o projeto.

O Bootstrap é o framework de CSS mais conhecido e mais usado do mundo. Ele nasceu como um projeto interno do Twitter e foi publicado como ferramenta livre em 2011. Entre os seus pontos fortes estão o sistema de grade de doze colunas, que facilita distribuir o conteúdo em linhas e colunas que se reorganizam sozinhas em telas pequenas, e a sua coleção de componentes prontos para usar, como botões, formulários, barras de navegação e janelas modais. Como ele é construído sobre o CSS, tudo o que se aprende sobre essa linguagem também se aplica dentro do Bootstrap.

Usar um framework acelera o desenvolvimento e garante consistência, mas tem desvantagens: se os estilos que não são usados não forem removidos, a página pode carregar mais peso do que o necessário; os sites construídos com o mesmo framework tendem a se parecer entre si, e o controle fino do design fica limitado ao que a ferramenta oferece. Por isso, a recomendação habitual é aprender primeiro o CSS puro, para entender o que acontece por trás de cada classe do framework, e depois escolher de acordo com o projeto: CSS direto para páginas simples e muito personalizadas, e um framework quando o prazo é curto ou o site precisa de muitos componentes padrão.

Conclusão

O CSS é a linguagem que transforma a estrutura nua do HTML nas páginas visuais que os usuários veem todos os dias. Saber o que é CSS, diferenciá-lo do HTML, conhecer as três formas de aplicá-lo, dominar a sua sintaxe de seletor { propriedade: valor; }, lidar com propriedades como color, background, font-size, margin, padding e display e compreender o design responsivo e as media queries são os primeiros passos de qualquer pessoa que queira trabalhar com desenvolvimento web ou simplesmente entender como um site funciona. O próximo passo prático é abrir as ferramentas de desenvolvimento de qualquer navegador, inspecionar um elemento e observar ao vivo quais regras de CSS dão forma a ele. Essa curiosidade pelo que acontece por trás da tela é, no fundo, a melhor maneira de aprender essa linguagem.