O que é CSS?
A maioria das páginas da web é feita de HTML ou linguagem de marcação de hipertexto. Esta é a maneira padrão de decorar texto simples da web com fontes, cores, adornos gráficos e hiperlinks (texto clicável que transporta magicamente o usuário para outro lugar). Mas os sites podem ficar muito grandes. Quando isso acontece, o HTML é uma maneira muito difícil de fazer algo muito fácil. CSS (folhas de estilo em cascata) pode tornar a decoração de sites fácil novamente!
Pense em CSS como uma espécie de código de vestimenta de computador. CSS faz principalmente uma coisa: descreve como as páginas da web devem ser. Melhor ainda, o CSS pode ser facilmente separado do HTML, de modo que o código de vestimenta seja fácil de encontrar, modificar e mudar rapidamente a aparência inteira do seu site. Como um código de vestimenta na escola, você pode mudar seu CSS e a aparência de seus alunos mudará com ele. As folhas de estilo permitem que você altere sites inteiros rapidamente como quiser, assim como uma mania da moda permite que as pessoas mudem com o tempo, mas permaneçam as mesmas.
Uma coisa realmente legal sobre CSS, é que ele cascata . Cada estilo que você define adiciona ao tema geral, mas você pode fazer com que o estilo mais recente substitua os anteriores. Por exemplo, com CSS, podemos começar dizendo que queremos todo o nosso texto com 12px (12 unidades) de altura. Mais tarde, podemos dizer que também queremos que seja vermelho. Ainda mais tarde, podemos dizer que queremos uma frase em negrito ou itálico, ou azul em vez de vermelho.
Três tipos de CSS
CSS vem em três tipos:
- Em um arquivo separado ( externo )
- No topo de um documento de página da web ( interno )
- Ao lado do texto que ele decora ( embutido )
As folhas de estilo externas são arquivos separados cheios de instruções CSS (com a extensão de arquivo .css). Quando qualquer página da web inclui uma folha de estilo externa, sua aparência e comportamento serão controlados por este arquivo CSS (a menos que você decida substituir um estilo usando um dos próximos dois tipos). É assim que você muda um site inteiro de uma vez. E isso é perfeito se você deseja se manter atualizado com as últimas novidades em páginas da web sem precisar reescrever todas as páginas!
Os estilos internos são colocados na parte superior de cada documento de página da web, antes que qualquer conteúdo seja listado. Essa é a segunda melhor coisa que a externa, porque eles são fáceis de encontrar, mas permitem que você «substitua» uma folha de estilo externa – para aquela página especial que deseja ser um não-conformista!
Os estilos embutidos são colocados exatamente onde você precisa deles, ao lado do texto ou gráfico que deseja decorar. Você pode inserir estilos embutidos em qualquer lugar no meio de seu código HTML, dando a você real liberdade para especificar cada elemento de página da web. Por outro lado, isso pode tornar a manutenção de páginas da web uma tarefa real!
Instruções CSS
Antes de introduzirmos o CSS, vamos revisar rapidamente o HTML. Uma página da web simples é feita de tags . Tudo deve ficar entre as tags <html> de abertura e fechamento. A seção <head> contém direções invisíveis chamadas meta informações . A seção <body> é onde colocamos todas as coisas visíveis. Aqui está um exemplo de HTML super simples:
 |
CSS Externo
Agora, aqui está um exemplo curto e simples de CSS usando um arquivo externo (vamos chamá-lo de ‘stylish.css’). Vamos dizer a nossa página da web para ser branca e fazer nosso cabeçalho h1, indicado em nosso exemplo HTML simples como ‘John Adams’, aparecer em vermelho com 24 unidades de altura:
 |
No arquivo de amostra, a linha superior é um comentário e não faz nada. A próxima parte (chamada de corpo) informa à página da web qual cor de fundo usar para a seção do corpo . Logo depois disso, a parte h1 diz que queremos que nosso cabeçalho maior (h1) seja da cor vermelha e que o tamanho da fonte tenha 24 unidades de altura.
Agora, para incluir este arquivo CSS externo (‘stylish.css’), temos que incluir um link para ele na seção <head> de nossa página da web em branco, conforme mostrado na tela:
 |
CSS Interno
Não precisamos incluir um arquivo CSS externo apenas para decorar uma página da web. Podemos apenas definir nossos estilos no topo da página, na seção <head>. Aqui está um exemplo rápido no qual estamos tornando nosso título (h1) azul com um tamanho de fonte de 28 px:
 |
CSS Inline
Para aqueles momentos especiais em que você tem algo em sua página que simplesmente não está de acordo com seu tema geral, bem, você pode ir em frente e mostrar sua verdadeira individualidade usando CSS embutido. Para mostrar como, vamos substituir nosso estilo h1, vamos? Assim, podemos mostrar a você o poder do CSS ao mesmo tempo.
 |
Como você pode ver no exemplo acima, na seção <head>, originalmente dissemos que o estilo h1 era azul e tinha 28 unidades de altura. Mas o CSS nos permite substituir isso em certos lugares. Nesse caso, incluímos instruções na seção <body> e nosso snippet embutido de CSS disse ao site para mostrar o cabeçalho h1 como ‘John Hancock’ em vermelho em uma fonte de 48 px de altura.
Mais alguma coisa de CSS?
Você achou que era muito fácil? Se você fez isso, está certo, há muito mais coisas em CSS se você quiser obter o poder dele. CSS oferece algo chamado seletores que permite especificar o que e quando decorar os elementos do site, mas não vamos fazer isso hoje. Apenas saiba que há muito mais!
Resumo da lição
Vamos revisar esses incríveis estilos em cascata que nos permitem vestir nossas páginas da web de maneira uniforme, sem alterar o conteúdo. Pense nas folhas de estilo como uma espécie de código de vestimenta do computador, uma maneira uniforme de exibir páginas da web com uma aparência consistente.
Aprendemos que as folhas de estilo vêm em três tipos: externo , interno e embutido . Os externos têm seu próprio arquivo e se aplicam a todas as páginas da web que os incluem. Os internos se aplicam a todo o documento, mas você deve colocá-los no topo da página, no cabeçalho. Os estilos embutidos permitem que pontos específicos realmente se destaquem e sejam diferentes, mas ao custo de serem difíceis de encontrar e modificar.
CSS também tem coisas chamadas seletores , que permitem especificar o que e quando decorar os elementos do site.