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. O objetivo era permitir que os profissionais da web separar o conteúdo e estrutura do código de um site a partir do design visual, algo que não era possível até então.
A separação da estrutura e do 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 a "aparência" do página.
A evolução do CSS
CSS não ganhou popularidade até por volta 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 são compatíveis com CSS de nível 1, a maioria de 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 CSS para esses navegadores e fornecem aos designers da web novas ferramentas de estilo poderosas para trabalhar com.
Em (muitos) anos atrás, alguns designers da web 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 significa "Folha de estilo em cascata". Vamos quebrar essa frase um pouco para explicar mais detalhadamente 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 o 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 a mesma finalidade, mas com a funcionalidade adicional de também informar ao navegador da web como renderizar o documento que está sendo visualizado. Hoje, as folhas de estilo CSS também podem usar consultas de mídia para mudar a forma como uma página procura diferentes dispositivos e tamanhos de tela. Isso é extremamente importante, pois permite que um único documento HTML seja renderizado de forma diferente de acordo com a tela usada para acessá-lo.
Cascata é a parte realmente especial do termo "folha de estilo em cascata". Uma folha de estilo da web destina-se a 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 é verdadeiro para a cascata nas folhas de estilo do site.
As folhas de estilo do designer substituem as folhas de estilo padrão do navegador
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 conhecido 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"exibido 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 da web. 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, você não precisa 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 como as páginas da web devem ficar quando visualizadas em outra mídia que não 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 nosso 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 esse trabalho adicional para ser 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 permitir que os sites alterem o que é priorizado visualmente no tela, que por sua vez mostra valor e foco para os visitantes, sem que nenhuma alteração precise ser feita no subjacente Marcação HTML.
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 se tornam compatíveis e outros são abandonados ou caem em desuso por um motivo ou outro.
A curva de aprendizado CSS vale a pena
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 aprender do que o HTML simples. CSS também muda nos navegadores de uma maneira que o HTML realmente não muda. Assim que 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á um "saco de truques" de estilos e abordagens que funcionaram para você no passado e aos quais você pode recorrer enquanto construir novas páginas da web no futuro.