O que é CSS e como ele funciona: guia básico para iniciantes

O CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996 por um motivo bastante simples: a linguagem HTML não foi projetada para ter tags que ajudassem a formatar a página — o objetivo era apenas escrever a marcação para o conteúdo da web.

Tags como <font> foram introduzidas na versão 3.2 do HTML e causaram muitos problemas para os desenvolvedores. Devido ao fato de as páginas da web terem fontes diferentes, fundos coloridos e vários estilos, reescrever o código era um processo longo, trabalhoso e caro. Desta forma, o CSS foi criado pelo W3C para resolver esse problema.

Tecnicamente, não é obrigatório usar CSS em uma página da web, mas eu te garanto que você provavelmente não gostará de navegar em uma página somente em HTML — porque ela será completamente básica e pouco atraente.

Baixe o Guia de Recursos CSS Completo

O que é CSS: tutorial em vídeo

Saiba mais sobre CSS e como ele funciona assistindo a este tutorial em vídeo.

Vantagens de usar CSS nas suas páginas

A diferença entre uma página da web que usa CSS e uma que não usa é enorme — e você certamente perceberá na mesma hora.

Você já deve ter se deparado com um site que não carregou completamente e apresentou apenas informações em texto preto no fundo branco. Isso significa que o CSS da página não foi carregado corretamente ou não existe.

É assim que ficam as páginas da web apenas com linguagens de marcação HTML — acho que todos concordamos que o resultado não é muito atraente.

Antes da criação do CSS, toda a estilização tinha de ser incluída na própria marcação HTML. Isso significa que os desenvolvedores da web tinham que descrever separadamente a cor de fundo, o tamanho da fonte, os alinhamentos e tudo mais em cada elemento HTML de suas páginas.

O CSS permite estilizar tudo em um arquivo diferente, estabelecendo as diretrizes de design nesse arquivo e, posteriormente, integrando os arquivos CSS à marcação HTML. Isso torna a marcação HTML muito mais limpa e fácil de manter.

Em resumo, com os recursos de CSS, você não precisa descrever repetidamente a aparência de cada elemento — o que economiza tempo, simplifica o código e o torna menos propenso a erros.

O CSS permite que você tenha vários estilos em uma página HTML, o que torna as possibilidades de personalização quase infinitas. Atualmente, isso está se tornando mais uma necessidade do que uma comodidade.

Como o CSS funciona?

O CSS usa uma sintaxe simples, baseada em inglês, com um conjunto de regras principais. Como mencionamos anteriormente, o HTML nunca foi planejado para usar elementos de estilo, apenas a marcação da página. Ele foi criado apenas para descrever o conteúdo. Por exemplo: <p>Isto é um parágrafo.</p>.

Mas como você estiliza o parágrafo? A estrutura de sintaxe do CSS é bastante simples. Ela tem um seletor e um bloco de declaração. Você seleciona um elemento e, em seguida, declara o que deseja fazer com ele. Bastante simples, certo?

No entanto, há regras que você precisa lembrar. As regras de estrutura são bastante simples, portanto, não se preocupe.

O seletor aponta para os elementos HTML que você deseja estilizar. O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.

Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos. Uma declaração CSS sempre termina com um ponto-e-vírgula e os blocos de declaração são cercados por chaves.

Vamos dar uma olhada em um exemplo:

Todos os elementos <p> serão coloridos em azul e em negrito.

<style>

p {
 color: blue;
 text-weight: bold;
}

<style>

Em outro exemplo, todos os elementos <p> serão alinhados ao centro, terão 16x de largura e serão cor-de-rosa.

<style>
p {

   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

Consulte nossa folha de dicas de CSS para obter mais exemplos.

Agora vamos falar sobre os diferentes estilos de CSS: interno, externo e inline.

Estilos CSS internos, externos e inline

Analisaremos cada estilo de forma rápida! Para uma explicação detalhada, acesse o link que vamos disponibilizar logo abaixo.

Vamos começar com o estilo interno. Estilos CSS feitos desta forma são carregados cada vez que um site é atualizado, o que pode aumentar o tempo de carregamento. Além disso, você não poderá usar o mesmo estilo CSS em várias páginas, pois tudo está contido em uma única página. Mas a vantagem disso é que ter tudo em uma página facilita o compartilhamento do modelo para uma visualização.

O método externo pode ser o mais conveniente: tudo é feito externamente em um arquivo .css. Isso significa que você pode fazer todo o estilo em um arquivo separado e aplicar o CSS a qualquer página desejada. O estilo externo também pode melhorar o tempo de carregamento.

Por fim, tem também o estilo inline do CSS. O inline trabalha com elementos específicos que possuem a tag <style> — cada componente deve ser estilizado, por isso talvez não seja o melhor ou o mais rápido para lidar com CSS. Mas ele pode ser útil, por exemplo, para alterar um único elemento, visualizar rapidamente as alterações ou se você não tiver acesso aos arquivos CSS.

Confira nosso artigo completo para conhecer mais informações sobre os diferentes estilos de CSS.

Conclusão

Vamos resumir o que aprendemos aqui sobre CSS e como ele ajuda no visual das páginas web:

• O CSS foi criado para trabalhar em conjunto com outras linguagens de marcação, como HTML. Ele é usado para estilizar uma página e acelera muito o desenvolvimento web.
• Há três estilos de implementação de CSS, e você pode usar o estilo externo para estilizar várias páginas ao mesmo tempo.
• Hoje em dia, você encontra o CSS em basicamente toda a internet, pois ele é um requisito tão importante quanto a própria linguagem de marcação usada para o conteúdo das páginas.

Esperamos que este artigo tenha sido útil — se você tiver alguma dúvida, deixe-a na seção de comentários abaixo.

Perguntas frequentes sobre CSS