Coco Chanel uma vez disse: "A moda muda, mas o estilo permanece."
Embora Coco estivesse falando principalmente sobre as roupas que penduramos em nossos armários, eu diria também que estilo é mais do que apenas moda.
Por exemplo, você já visitou um site e pensou: "caramba, este é um site bonito"? As chances são de que esse site estiloso foi criado graças ao CSS.
O que é CSS?
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata) e descreve como os elementos HTML devem ser exibidos na tela, pois controla o layout de várias páginas da web ao mesmo tempo.
Você pode sentir que CSS e codificação podem ser assustadores, especialmente ao enfrentar a construção de sites em geral. Acredite, eu também pensei assim em um ponto. Continue lendo e aposto que você estará pronto para adicionar um estilo sério ao seu site antes que perceba.
Interessado em aprender algo específico sobre CSS? Pule para:
O que é CSS?
Para entender o que é CSS, é melhor explicar como CSS e HTML são usados juntos. HTML foi criado para descrever o conteúdo das páginas da web, como os títulos e parágrafos, permitindo a incorporação de imagens e vídeos. Por outro lado, o CSS especifica o estilo do documento, que inclui layouts de página, cores e fontes.
Se você pensar no seu site como uma casa que está construindo, o HTML é a parede de gesso e o CSS é a tinta brilhante e vívida que você usa nas paredes para adicionar um toque especial.
Como o CSS funciona?
O CSS interage com os elementos HTML nas páginas da web para fazê-los parecer de uma certa maneira. Por exemplo, se você quiser deixar um parágrafo em negrito e na cor roxa, você escreveria assim:
p {color:purple; font-weight:bold;}
O p neste caso se alinhará com o código HTML <p> e o mudará para que apareça em negrito e roxo.
Assim como o HTML, o CSS é escrito em texto simples, em um editor de texto ou em um documento de texto no computador. Você pode adicionar esse código às suas páginas HTML usando CSS externo, interno ou embutido.
Externo
O CSS externo é salvo como arquivos .css e pode ser usado para determinar a aparência de todo o site com apenas um arquivo. Para usar, seus arquivos .html precisam incluir uma seção de cabeçalho que vincule à folha de estilo externa. Ficaria assim:
<head>
<link rel=”stylesheet” type=”text/css” href=thestyleofmysite.css”>
</head>
Neste caso, thestyleofmysite.css é a folha de estilo externa. Externo é o método eficiente para implementar CSS em um site, além de ser fácil de acompanhar e implementar estilo.
Interno
Interno são instruções CSS escritas diretamente no cabeçalho da página .html. Você deve seguir esse caminho se uma página do seu site for ter uma aparência única separada do resto do seu site.
<head>
<style>
body {background-color:orange;}
p {font-size:24px; color:white;}
</style>
</head>
Esta página terá um fundo laranja com parágrafos de tamanho 24 pontos e fonte branca.
Embutido
Quando você usa embutido, trechos de CSS são escritos diretamente no código HTML e aplicados apenas a uma única linha de código.
<h2 style=”font-size:22px;color:green;”>Este é um título.</h2>
Esta linha de código faz com que um título específico em uma página .html fique verde e em fonte de 22 pontos.
| Relacionado: Confira estas dicas de codificação para iniciantes! |
Quer aprender mais sobre Software de Criação de Sites? Explore os produtos de Construtor de Sites.
Sintaxe do CSS
O código real do CSS é chamado de Sintaxe CSS, e consiste em um conjunto de regras composto por um seletor e um bloco de declarações.
Um seletor aponta para o elemento HTML que você deseja estilizar. No exemplo acima, é o h1.
O bloco de declarações contém uma ou mais declarações que são separadas por ponto e vírgula. Dentro do bloco há uma propriedade e um valor separados por dois pontos. Esses blocos são cercados por chaves.
Uma propriedade é o que detalha mudanças como o tamanho da fonte ou a cor. O valor é a configuração para a propriedade, então o tamanho e a cor específicos da fonte.
A sintaxe CSS acima definirá seu título H1 para ser da cor vermelha e tamanho de fonte 14.
Existem também sintaxes chamadas de seletores de agrupamento. Você usaria um seletor de grupo quando tiver vários elementos que deseja que tenham o mesmo estilo. Então, se você quiser que todos os seus títulos após o H1 sejam centralizados, azuis e com tamanho de fonte 12, você usaria um seletor de grupo que se parece com:
h2, h3, h4 {text-align:center; color:blue; font-size:12px;}
Propriedades comuns do CSS
Há uma longa lista de propriedades CSS que você pode usar para adicionar um toque especial às páginas da web. Abaixo estão as propriedades comuns do CSS que você se verá usando repetidamente.
Adicione um pouco de estilo com CSS
Garanta que seu site seja qualquer coisa menos básico quando você adicionar CSS à sua formatação. Desde mudar a cor da fonte até adicionar uma borda, você pode fazer sua página da web se destacar da multidão quando utilizar o CSS. Não tenha medo de arregaçar as mangas e mergulhar de cabeça para ver do que Coco Chanel estava falando.
Agora que você teve algumas perguntas respondidas sobre CSS, responda outras perguntas que estão na sua mente sobre construção de sites, como o que é JavaScript e por que você deve aprender a programar.
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
