Os sites são compostos de várias peças individuais, incluindo imagens, texto e vários documentos. Esses documentos não incluem apenas aqueles que podem ser vinculados a várias páginas, como arquivos PDF, mas também os documentos 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 irá mergulhar no CSS, cobrindo o que é e onde é usado em sites hoje.
Uma lição de história CSS
O CSS foi desenvolvido pela primeira vez em 1997 como uma maneira 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 separassem o conteúdo e a estrutura do código de um site do design visual, algo que não era possível antes desse período.
A separação de estrutura e estilo permite que o HTML execute mais da função na qual foi originalmente baseado - a marcação de conteúdo, sem ter que se preocupar com o design e o layout da página em si, algo comumente conhecido como "aparência" da página.
O 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 suportam todo o nível 1 do CSS, a maioria do nível 2 do CSS e até mesmo a maioria dos aspectos do nível 3 do CSS. À medida que o CSS continua a evoluir e novos estilos são introduzidos, os navegadores da Web começaram a implementar módulos que trazem suporte ao novo CSS nesses navegadores e dar aos web designers novas e poderosas ferramentas de estilo para trabalhar.
Em (muitos) anos passados, havia designers de web selecionados que se recusavam a usar CSS para o design e desenvolvimento de sites, mas essa prática praticamente desapareceu da indústria hoje em dia. CSS é agora um padrão amplamente utilizado em web design e você seria duramente pressionado para encontrar alguém que trabalha na indústria hoje que não tenha pelo menos uma compreensão básica desta linguagem.
CSS é uma abreviatura
Como já mencionado, o termo CSS significa "Cascading Style Sheet". Vamos quebrar um pouco essa frase para explicar melhor o que esses documentos fazem.
A palavra "stylesheet" refere-se ao próprio documento (como HTML, os arquivos CSS são realmente apenas documentos de texto que podem ser editados com uma variedade de programas). Folhas de estilo foram usadas para design de documentos por muitos anos. São as especificações técnicas de um layout, seja impresso ou online. Os designers de impressão há muito tempo 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 exibido. Hoje, as folhas de estilo CSS também podem usar consultas de mídia para alterar a maneira como uma página procura 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 que está sendo usada para acessá-lo.
Cascade é a parte realmente especial do termo "folha de estilo em cascata". Uma folha de estilos da Web destina-se a uma cascata de uma série de estilos nessa folha, como um rio sobre uma cascata. A água no rio atinge todas as rochas da cachoeira, mas apenas as que estão no fundo afetam exatamente onde a água irá fluir. O mesmo acontece com a cascata nas folhas de estilo do site.
Cada página da web é afetada por pelo menos uma folha de estilos, 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 são sublinhados. Esses estilos vêm da folha de estilo padrão do 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 principais navegadores e versões.
Para outro exemplo de um navegador padrão, em nosso navegador, a fonte padrão é "Times New Roman" exibida no tamanho 16. Quase nenhuma das páginas que visitamos a exibição nessa família de fontes e tamanho, no entanto. Isso ocorre porque a cascata define as segundas folhas de estilo, definidas pelos próprios designers, para redefinir o tamanho e a família da fonte, sobrepondo-se aos padrões do 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 serão aplicados somente se a 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 site diz que os links devem ser verdes, essa cor substituirá o azul padrão. O sublinhado permanecerá neste exemplo, desde que você não especificou o contrário.
Onde o CSS é usado?
O CSS também pode ser usado para definir como as páginas da Web devem ser exibidas quando visualizadas em outras mídias que não um navegador da Web. Por exemplo, você pode criar uma folha de estilos de impressão que definirá como a página da Web deve ser impressa. Como itens de 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 orçamento de um site não exige que esse trabalho adicional seja feito ).
Por que o CSS é importante?
CSS é uma das ferramentas mais poderosas que um web designer pode aprender, pois com ele você pode afetar toda a aparência visual de um website. 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 valor e foco para os visitantes, sem necessidade de alterações na marcação HTML subjacente.
O principal desafio do CSS é que há muito o que aprender - e com os navegadores mudando a cada dia, o que funciona bem hoje pode não fazer sentido amanhã, à medida que novos estilos são suportados e outros abandonados ou abandonados por um motivo ou outro .
Como CSS pode cascatear e combinar, e considerando como navegadores diferentes podem interpretar e implementar as diretivas de forma diferente, CSS pode ser mais difícil do que o HTML puro dominar. O CSS também muda nos navegadores de uma forma que o HTML realmente não altera. Uma vez que você comece a usar o CSS, no entanto, você verá que aproveitar o poder das folhas de estilo dará a você uma flexibilidade inacreditável em como você planeja páginas da Web e define sua aparência. Ao longo do caminho, você acumulará um "pacote de truques" de estilos e abordagens que funcionaram para você no passado e aos quais você pode recorrer à medida que cria novas páginas da Web no futuro.
Artigo original de Jennifer Krynin. Editado por Jeremy Girard em 7/5/17
