O CSS controla o aspeto do teu site. Cores, tipos de letra, espaçamento, layout: tudo isso é CSS. Descobre o que é, como funciona e porque importa para a tua marca.
Alguma vez visitaste dois sites com quase o mesmo conteúdo, mas com um aspeto completamente diferente? Um é cuidado, limpo e fácil de ler. O outro parece desarrumado, antiquado e difícil de navegar. O conteúdo pode ser idêntico. O que os faz parecer tão diferentes é o CSS.
No capítulo anterior, aprendeste que o HTML dá estrutura a uma página web. Diz ao browser o que é cada coisa: um título, um parágrafo, uma imagem, um botão. Mas o HTML por si só não tem estilo. Sem CSS, todos os sites pareceriam um documento de texto simples. O CSS é o que transforma essa estrutura numa experiência visual.
O que é o CSS?
CSS significa Cascading Style Sheets (folhas de estilo em cascata). É uma linguagem que controla a apresentação visual de uma página web. Enquanto o HTML diz “isto é um título”, o CSS diz “este título deve ser azul-escuro, ter 32 píxeis de altura e usar este tipo de letra específico”. Enquanto o HTML diz “isto é um botão”, o CSS diz “este botão deve ser verde, ter cantos arredondados e ficar a 20 píxeis do texto que está acima”.
Todas as decisões visuais que vês num site, cores, tipos de letra, tamanhos, espaçamento, layouts, efeitos ao passar o rato, fundos, vêm do CSS. É a camada de design da web.
Como funciona o CSS?
O CSS funciona ao apontar para elementos HTML e aplicar-lhes regras de estilo. Dizes ao CSS que elemento estilizar e depois descreves como deve ficar. Estas regras são escritas num ficheiro separado que o browser carrega junto com o HTML. Quando o browser lê os dois ficheiros em conjunto, aplica os estilos aos elementos correspondentes e mostra a página final.
A parte “cascading” do nome refere-se à forma como o CSS trata os conflitos. Se várias regras de estilo se aplicarem ao mesmo elemento, o CSS segue uma ordem de prioridade específica para decidir qual a regra que vence. As regras mais específicas sobrepõem-se às mais gerais. Este sistema dá aos designers um controlo preciso sobre o aspeto de cada elemento em todo o site.
Tipos de CSS
O CSS pode ser escrito de três formas diferentes. Todas funcionam, mas não são igualmente adequadas a todas as situações.
1. CSS inline
O CSS inline é escrito diretamente num único elemento HTML. Só afeta esse elemento e sobrepõe-se a quaisquer outros estilos aplicados a ele. É útil para alterações rápidas e pontuais, mas torna-se um problema em maior escala. Se quiseres atualizar uma cor usada em 50 elementos, tens de a alterar em 50 sítios em vez de um.
2. CSS interno
O CSS interno é escrito dentro de uma etiqueta style no próprio ficheiro HTML, normalmente perto do topo da página. Aplica-se só a essa página. Serve para páginas isoladas ou projetos pequenos, mas num site completo significa repetir os mesmos estilos em todas as páginas. Se mudares uma coisa, tens de atualizar cada ficheiro individualmente.
3. CSS externo
O CSS externo fica num ficheiro separado, ligado às tuas páginas HTML. É a abordagem padrão de qualquer site a sério. Defines todos os teus estilos uma vez, num só ficheiro, e todas as páginas ligadas a ele herdam esses estilos. Mudas uma cor ou um tipo de letra num só lugar e atualiza-se em todo o lado, de imediato. É mais limpo, carrega mais depressa e é muito mais fácil de manter. Quase todos os sites bem feitos usam CSS externo como base.
O que o CSS controla no teu site
O CSS toca em quase todos os aspetos visuais do teu site. Estas são as principais áreas de que trata.
Cores e fundos
Todas as cores do teu site, a cor do texto, a cor de fundo, a cor dos botões, a cor das margens, são definidas através do CSS. As cores da tua marca são aplicadas de forma consistente no site ao defini-las uma vez no CSS e reutilizá-las em todo o lado.
Tipografia
O tipo de letra que o teu site usa, o tamanho dos títulos e do texto, o espaçamento entre linhas, se o texto está a negrito ou em itálico: tudo isto é CSS. Uma boa tipografia torna o conteúdo mais fácil de ler e reforça a identidade da tua marca.
Layout e espaçamento
Como as colunas estão dispostas, quanto espaço há entre secções, qual a largura da área de conteúdo, onde aparece a barra lateral: o CSS controla tudo isto. As regras de layout definem a estrutura geral de cada página, para além do que o HTML oferece.
Comportamento responsivo
O CSS é também o que faz o design responsivo funcionar. As media queries do CSS dizem ao browser para aplicar estilos diferentes consoante o tamanho do ecrã. Num computador, o conteúdo pode aparecer em três colunas. Num telemóvel, o CSS ajusta essas colunas para ficarem empilhadas na vertical, para que tudo caiba no ecrã mais pequeno.
Animações e efeitos
Efeitos ao passar o rato nos botões, transições suaves entre secções, conteúdo que surge com um efeito de aparecimento ao deslocar a página: tudo isto é CSS. Acrescentam movimento e acabamento à experiência sem exigirem qualquer JavaScript.
O que significa isto para o teu site como dono de uma marca
Não precisas de escrever CSS para ter um site bem desenhado. Os criadores de websites tratam disso por ti. Quando escolhes um modelo, defines as cores da tua marca e os teus tipos de letra, a plataforma traduz essas escolhas em regras CSS nos bastidores. Cada alteração que fazes no editor visual produz CSS que o browser lê e aplica.
O que importa é que o CSS que a tua plataforma produz seja limpo e eficiente. CSS pesado ou inchado atrasa o carregamento das tuas páginas. CSS bem escrito mantém o teu site rápido e consistente em todas as páginas. O criador de websites da WEMASY gera CSS otimizado automaticamente, para que as tuas escolhas de design se apliquem de forma limpa, sem acrescentar peso desnecessário às tuas páginas. Para perceberes como isto se liga ao desempenho, lê o que é a velocidade do site e porque importa.
Perguntas frequentes
Preciso de aprender CSS para criar um site?
Não. Um criador de websites permite-te controlar o aspeto e a sensação do teu site através de um editor visual. A plataforma escreve o CSS por ti. Conhecer o básico de CSS é útil se quiseres perceber porque as coisas têm o aspeto que têm, mas não precisas de escrever uma única linha para criar um site profissional com o criador de websites da WEMASY.
Qual é a diferença entre CSS e HTML?
O HTML define a estrutura de uma página web, o que é cada pedaço de conteúdo. O CSS define o seu aspeto. O HTML cria um título. O CSS dá a esse título uma certa cor, tamanho e tipo de letra. Trabalham em conjunto: o HTML fornece os elementos, o CSS dá-lhes estilo.
O CSS pode afetar a velocidade do site?
Sim. Ficheiros CSS grandes e ineficientes acrescentam peso a cada carregamento de página. CSS não otimizado também pode impedir o browser de mostrar a página até acabar de ler todos os estilos, o que atrasa a rapidez com que os visitantes veem o teu conteúdo. CSS limpo e mínimo carrega mais depressa. É uma das razões pelas quais criar numa plataforma bem programada importa para a velocidade do site.
O que é uma framework de CSS?
Uma framework de CSS é uma coleção de regras CSS já escritas que os programadores usam como ponto de partida, em vez de escreverem tudo de raiz. Acelera o desenvolvimento e oferece estilos consistentes e testados logo à partida. A maioria dos criadores de websites usa uma framework de CSS internamente, para que os modelos que produzem já sejam bem estruturados e fiáveis.
Posso usar o CSS para o meu site ter bom aspeto tanto no computador como no telemóvel?
Sim, e esse é na verdade um dos trabalhos mais importantes do CSS. Com as media queries, o CSS aplica estilos diferentes consoante o tamanho do ecrã. Num ecrã largo de computador, o conteúdo pode aparecer em várias colunas com imagens grandes. Num telemóvel, essas mesmas colunas ficam empilhadas na vertical, os tamanhos de letra ajustam-se e o espaçamento aperta para caber no ecrã mais pequeno. É assim que funciona o design responsivo, e tudo é tratado através do CSS, sem precisares de uma versão móvel separada do teu site.
O que acontece se o CSS não carregar numa página?
Se o ficheiro CSS não carregar, a página continua a aparecer, mas sem qualquer estilo. Vais ver texto simples e imagens, sem cores, tipos de letra nem layout. Tudo fica empilhado na vertical, pela ordem em que aparece no HTML. Parece estragado, mas o conteúdo tecnicamente continua lá. Isto é raro em plataformas bem mantidas, mas é um bom lembrete de quanto trabalho visual o CSS faz, discretamente, em cada página.