Os sites são compostos por várias peças individuais, incluindo imagens, texto e vários documentos. Esses documentos não incluem apenas aqueles que podem estar vinculados a várias páginas, como arquivos PDF, mas também os documentos que são usados para construir as próprias páginas, como documentos HTML para determinar a estrutura de uma página e documentos CSS (Cascading Style Sheet) para ditar a aparência de uma página. Este artigo se aprofundará em CSS, cobrindo o que é e onde é usado em sites hoje.
Uma lição de história CSS
CSS foi desenvolvido pela primeira vez em 1997 como uma forma de os desenvolvedores da web definirem a aparência visual das páginas da web que estavam criando. A intenção era permitir que os profissionais da web separassem o conteúdo e a estrutura do código de um site do design visual, algo que não era possível até então.
A separação de estrutura e estilo permite que o HTML execute mais da função em que foi originalmente baseado – a marcação de conteúdo, sem ter que se preocupar com o design e layout da página em si, algo comumente conhecido como “aparência e comportamento” da página.
CSS não ganhou popularidade até cerca de 2000, quando os navegadores da web começaram a usar mais do que os aspectos básicos de fonte e cor dessa linguagem de marcação. Hoje, todos os navegadores modernos oferecem suporte a todos os CSS de nível 1, a maioria dos CSS de nível 2 e até mesmo a maioria dos aspectos de CSS de nível 3. Conforme o CSS continua a evoluir e novos estilos são introduzidos, os navegadores da web começaram a implementar módulos que trazem novo suporte a CSS nesses navegadores e fornecem aos web designers novas ferramentas de estilo poderosas para trabalhar.
Em (muitos) anos atrás, alguns web designers selecionados se recusaram a usar CSS para o design e desenvolvimento de sites, mas essa prática quase desapareceu da indústria hoje. CSS é agora um padrão amplamente usado em web design e você teria dificuldade em encontrar alguém que trabalhe na indústria hoje que não tenha pelo menos um conhecimento básico dessa linguagem.
CSS é uma abreviação
Como já mencionado, o termo CSS ou Cascading Style Sheet significa “Folha de estilo em cascata”. Vamos quebrar essa frase um pouco para explicar mais completamente o que esses documentos fazem.
A palavra “folha de estilo” refere-se ao próprio documento (como HTML, os arquivos CSS são apenas documentos de texto que podem ser editados com uma variedade de programas). As folhas de estilo têm sido usadas para design de documentos há muitos anos. São as especificações técnicas de um layout, impresso ou online. Os designers de impressão há muito usam folhas de estilo para garantir que seus designs sejam impressos exatamente de acordo com suas especificações. Uma folha de estilo para uma página da web tem o mesmo propósito, mas com a funcionalidade adicional de também informar ao navegador da web como processar o documento que está sendo visualizado. Hoje, as folhas de estilo CSS também podem usar consultas de mídia para alterar a forma como uma página procura por diferentes dispositivos e tamanhos de tela. Isso é extremamente importante, pois permite que um único documento HTML seja renderizado de maneira diferente de acordo com a tela usada para acessá-lo.
Cascade é a parte realmente especial do termo “folha de estilo em cascata”. Uma folha de estilo da web tem como objetivo cascatear através de uma série de estilos nessa folha, como um rio sobre uma cachoeira. A água do rio atinge todas as rochas da cachoeira, mas apenas as que estão no fundo afetam exatamente para onde a água irá fluir. O mesmo é verdade para a cascata nas folhas de estilo do site.
Cada página da web é afetada por pelo menos uma folha de estilo, mesmo que o web designer não aplique nenhum estilo. Esta folha de estilo é a folha de estilo do agente do usuário – também conhecida como os estilos padrão que o navegador da web usará para exibir uma página se nenhuma outra instrução for fornecida. Por exemplo, por padrão, os hiperlinks são estilizados em azul e sublinhados. Esses estilos vêm da folha de estilo padrão de um navegador da web. Se o web designer fornecer outras instruções, no entanto, o navegador precisará saber quais instruções têm precedência. Todos os navegadores têm seus próprios estilos padrão, mas muitos desses padrões (como os links de texto sublinhados em azul) são compartilhados entre todos ou a maioria dos navegadores e versões principais.
Para outro exemplo de um navegador padrão, em nosso navegador da web, a fonte padrão é “Times New Roman” exibida no tamanho 16. Quase nenhuma das páginas que visitamos é exibida nessa família e tamanho de fonte, no entanto. Isso ocorre porque a cascata define que as segundas folhas de estilo, que são definidas pelos próprios designers, para redefinir o tamanho da fonte e família, substituindo os padrões de nosso navegador. Quaisquer folhas de estilo que você criar para uma página da web terão mais especificidade do que os estilos padrão de um navegador, portanto, esses padrões só se aplicarão se sua folha de estilo não os substituir. Se você quiser que os links sejam azuis e sublinhados, não é necessário fazer nada, pois esse é o padrão, mas se o arquivo CSS do seu site diz que os links devem ser verdes, essa cor substituirá o azul padrão. O sublinhado permanecerá neste exemplo, pois você não especificou o contrário.
Onde o CSS é usado?
CSS também pode ser usado para definir a aparência das páginas da web quando visualizadas em outra mídia que não seja um navegador da web. Por exemplo, você pode criar uma folha de estilo de impressão que definirá como a página da web deve ser impressa. Como os itens da página da web, como botões de navegação ou formulários da web, não terão nenhum propósito na página impressa, uma folha de estilo de impressão pode ser usada para “desligar” essas áreas quando uma página é impressa. Embora não seja uma prática comum em muitos sites, a opção de criar folhas de estilo de impressão é poderosa e atraente (em nossa experiência – a maioria dos profissionais da web não faz isso simplesmente porque o escopo do orçamento de um site não exige que esse trabalho adicional seja feito )
Por que CSS é importante?
CSS é uma das ferramentas mais poderosas que um web designer pode aprender, pois com ela você pode afetar toda a aparência visual de um site. Folhas de estilo bem escritas podem ser atualizadas rapidamente e permitem que os sites alterem o que é priorizado visualmente na tela, o que, por sua vez, mostra o valor e o foco para os visitantes, sem que nenhuma alteração precise ser feita na marcação HTML subjacente .
O principal desafio do CSS é que há muito a aprender – e com os navegadores mudando todos os dias, o que funciona bem hoje pode não fazer sentido amanhã, à medida que novos estilos são suportados e outros são abandonados ou caem em desuso por um motivo ou outro .
Como o CSS pode cascatear e combinar, e considerando como diferentes navegadores podem interpretar e implementar as diretivas de maneira diferente, o CSS pode ser mais difícil de dominar do que o HTML simples. CSS também muda nos navegadores de uma maneira que o HTML realmente não muda. Depois de começar a usar CSS, no entanto, você verá que aproveitar o poder das folhas de estilo lhe dará uma flexibilidade incrível em como você faz o layout das páginas da web e define sua aparência. Ao longo do caminho, você acumulará uma “sacola de truques” de estilos e abordagens que funcionaram no passado e aos quais você pode recorrer à medida que construir novas páginas da web no futuro.