O que é CSS? Guia Completo para Iniciantes

Se você já mexeu com HTML, provavelmente já ouviu falar de CSS. Mas o que exatamente é isso? CSS (Cascading Style Sheets) é a linguagem que dá estilo às páginas web. Imagine um site sem CSS: apenas um amontoado de texto e imagens sem organização. Nada atrativo, né? Com CSS, podemos definir cores, fontes, espaçamentos e muito mais para criar layouts bonitos e responsivos.

Como o CSS Funciona?

O CSS trabalha lado a lado com o HTML. Enquanto o HTML estrutura o conteúdo, o CSS determina como ele será apresentado. Quando um navegador carrega uma página, ele interpreta tanto o HTML quanto o CSS, aplicando as regras de estilo para exibir tudo de forma organizada e visualmente atraente.

O CSS segue três princípios fundamentais:

• Herança: Algumas propriedades, como fontes e cores, são herdadas de elementos pai para seus filhos. Isso ajuda a manter um design consistente com menos código.

• Cascata: Quando existem várias regras aplicadas a um elemento, o navegador segue uma hierarquia para decidir qual usar. Regras mais específicas ou definidas por último tendem a prevalecer.

• Especificidade: Algumas regras têm mais “força” do que outras. Por exemplo, um estilo aplicado diretamente a um elemento no HTML (inline) tem prioridade sobre regras gerais definidas em um arquivo CSS externo.

Sintaxe e Seletores CSS

O CSS funciona por meio de regras de estilo aplicadas aos elementos HTML. Cada regra é composta por um seletor e um bloco de declarações, onde definimos as propriedades visuais do elemento. Veja um exemplo:

p {
  color: blue;
  font-size: 16px;
}

Aqui, o seletor p indica que queremos estilizar todos os parágrafos da página. No bloco de declarações {}, especificamos duas propriedades: color, que define a cor do texto como azul, e font-size, que define o tamanho da fonte em 16 pixels.

Mas os seletores não se limitam a elementos específicos. O CSS oferece várias maneiras de escolher quais elementos serão estilizados:

Tipos de seletores mais comuns

1. Seletor de Elemento
   Esse tipo de seletor aplica estilos diretamente a todas as ocorrências de um elemento HTML. No exemplo acima, o p estiliza todos os parágrafos.
2. Seletor de Classe (.)
   Com classes, podemos aplicar o mesmo estilo a vários elementos sem afetar outros do mesmo tipo.

CSS:

.destaque {
  color: red;
  font-weight: bold;
}

HTML:

<p class="destaque">Este parágrafo ficará vermelho e em negrito.</p>
<span class="destaque">Este span também usará o mesmo estilo.</span>

Resultado na web:

3. Seletor de ID (#)
IDs são únicos e devem ser usados para estilizar um único elemento por página.

CSS:

#titulo {
  font-size: 24px;
  text-align: center;
}

HTML:

<h1 id="titulo">Título Centralizado</h1>

Resultado na web:

4. Seletores Múltiplos
Podemos aplicar o mesmo estilo a diferentes elementos separando-os por vírgula.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

5. Seletores Descendentes
Permitem estilizar elementos que estão dentro de outro elemento específico.

article p {
  line-height: 1.5;
}

6. Pseudo-classes
As pseudo-classes são seletores que alteram um elemento em determinado estado. Um dos mais comuns é :hover, que modifica um botão quando o mouse passa por cima.

button:hover {
  background-color: lightgray;
  cursor: pointer;
}

Esses são apenas alguns exemplos de seletores que o CSS oferece. Combinando diferentes tipos, podemos criar estilos flexíveis e reutilizáveis para deixar nossas páginas mais organizadas e atraentes.

Propriedades CSS Comuns

CSS oferece uma ampla variedade de propriedades para estilizar elementos. Aqui estão algumas das mais utilizadas:

Cores e Fundos

• color: Define a cor do texto. Exemplo: color: red;
• background-color: Define a cor de fundo de um elemento. Exemplo: background-color: blue;
• background: Propriedade mais versátil que permite definir imagens e gradientes como fundo. Exemplo: background: url('imagem.jpg') no-repeat center/cover;

Fontes e Texto

• font-family: Define o tipo de fonte do texto. Exemplo: font-family: 'Arial', sans-serif;
• font-size: Ajusta o tamanho da fonte. Exemplo: font-size: 16px;
• font-weight: Controla a espessura da fonte (negrito). Exemplo: font-weight: bold;
• text-align: Define o alinhamento do texto. Exemplo: text-align: center;

Espaçamentos

• margin: Define a margem externa de um elemento, criando espaço ao redor dele. Exemplo: margin: 20px;
• padding: Define o espaçamento interno, separando o conteúdo da borda do elemento. Exemplo: padding: 10px;

Bordas

• border: Define a largura, o estilo e a cor da borda de um elemento. Exemplo:border: 2px solid black;
• border-radius: Arredonda os cantos das bordas. Exemplo: border-radius: 10px;

Essas propriedades são fundamentais para qualquer projeto web, permitindo controle total sobre o design da página.

O Modelo de Caixa (Box Model)

Todo elemento em uma página web segue um conceito chamado Modelo de Caixa, composto por:

• Conteúdo: O texto ou a imagem dentro do elemento.
• Padding: Espaço entre o conteúdo e a borda.
• Borda: A linha ao redor do elemento.
• Margem: Espaço externo entre um elemento e outro.

Isso influencia diretamente como os elementos se organizam na tela e é essencial para criar layouts harmoniosos.

Criando Layouts com CSS

Atualmente, os métodos mais usados para criar layouts são o Flexbox e o CSS Grid.

• Flexbox: Ideal para organizar elementos em linha ou coluna. Ele ajusta os espaços automaticamente, facilitando a responsividade.
• CSS Grid: Perfeito para criação de layouts mais complexos, pois permite organizar elementos em linhas e colunas simultaneamente.

Exemplo básico de Flexbox:

.container {
  display: flex;
  justify-content: space-between;
}

Isso distribui os elementos dentro de .container, deixando espaço igual entre eles.

Conclusão

Dominar CSS é essencial para qualquer desenvolvedor web. Com ele, você pode transformar uma página simples em algo incrível, responsivo e funcional. Agora que você tem uma boa base, que tal colocar a mão na massa e experimentar algumas regras CSS no seu próximo projeto?

Quer aprender um pouco sobre Flexbox no CSS? Assista esse vídeo: