Quer ajudar o projeto? Você pode doar na tela Sobre mim!

CSS: Do Básico ao Avançado

Guia visual e prático sobre CSS, com exemplos interativos e avançados para dominar estilos e layouts.

Tipos de dados

Sintaxe Básica

style.css
h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}
  • Seletor: h1
  • Propriedade: color
  • Valor: blue
  • Declaração: color: blue;
  • Regra: todo o bloco

Seletores CSS

style.css
/* Classe */
.classe { color: purple; }

/* ID */
#id { font-size: 24px; }

/* Hierarquia */
p strong { background: yellow; }

/* Pseudo-classe */
a:hover { text-decoration: underline; }

/* Pseudo-elemento */
p::first-line { font-weight: bold; }

Dica:

Prefira classes em vez de IDs para estilizar, pois são mais reutilizáveis e mantêm o CSS organizado.

.classe { color: purple; }
#id { font-size: 24px; }
p strong { background: yellow; }
a:hover { text-decoration: underline; }

Dica:

Use seletores de classe para reutilizar estilos e mantenha nomes descritivos.

Box Model

Box Model CSS

style.css
.caixa {
  margin: 16px;
  border: 2px solid #7c3aed;
  padding: 8px;
  background: #f3f3f3;
}

Atenção:

O box-sizing: border-box; é muito usado para que padding e border não aumentem o tamanho total do elemento.

Unidades de Medida

  • px: pixels
  • em/rem: relativo ao tamanho da fonte
  • %: porcentagem
  • vw/vh: largura/altura da viewport

Formas de Aplicar CSS

1

CSS Inline

Texto com estilo inline

2

CSS Interno

style.css
<style>
  h1 { color: blue; font-size: 32px; text-align: center; }
  p { color: blue; font-size: 18px; }
</style>
3

CSS Externo (Recomendado)

index.html
<link rel="stylesheet" href="styles.css">

Responsividade e Media Queries

O media query permite adaptar o layout para diferentes tamanhos de tela, como celulares, tablets e desktops, garantindo uma boa experiência de usuário em todos os dispositivos:

um exemplo prático:

style.css
h1 {
  font-size: 32px;
}

/* Exemplo de media query */
@media (max-width: 600px) {
  h1 { font-size: 18px; }
}

Aqui temos uma regra CSS que define o tamanho da fonte do título <h1>. Por padrão, o tamanho é 32px. No entanto, quando a largura da tela é igual ou menor que 600px (como em dispositivos móveis), o tamanho da fonte é reduzido para 18px, tornando o texto mais legível em telas menores.

Isso se aplica a qualquer propriedade CSS, permitindo criar layouts flexíveis e adaptáveis.

E importante lembrar que o uso de unidades relativas como em, rem e % também ajuda na responsividade, pois elas se ajustam conforme o tamanho da tela ou do elemento pai. E também importante considerar que o tamanho da fonte aqui usada de exemplo vai depender da regra aplicada a media query.

Responsivo:

Use media queries para adaptar o layout a diferentes dispositivos e tamanhos de tela.

Boas Práticas

  • Prefira CSS externo
  • Use nomes de classes descritivos
  • Evite !important
  • Organize o código por seções
  • Comente trechos importantes

Exemplo de Animação Simples

style.css
.botao {
  background: #7c3aed;
  color: #fff;
  transition: background 0.3s;
}
.botao:hover {
  background: #a78bfa;
}

Passo a Passo: Criando um Layout com CSS

1

1. Estruture o HTML

index.html
<header>...</header>
<main>...</main>
<footer>...</footer>
2

2. Defina o CSS Base

style.css
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
3

3. Adicione Estilos aos Elementos

style.css
header {
background: #7c3aed;
color: #fff;
padding: 16px;
}
4

4. Torne Responsivo

style.css
.container { padding: 8px; }

Pronto para praticar?:

Experimente modificar os exemplos acima e veja o resultado ao vivo!