Domine os estilos CSS e deixe suas páginas bonitas

Introdução

CSS (Cascading Style Sheets) é usado para estilizar páginas HTML. Aprenda a criar designs atraentes e responsivos.

1

O que é CSS?

CSS é a linguagem usada para estilizar páginas web. Ela controla cores, fontes, espaçamentos e layout.

Exemplo de Código

/* Exemplo de CSS */
h1 {
  color: blue;
  font-size: 24px;
}

2

Seletores básicos

Seletores permitem aplicar estilos a elementos específicos.

Exemplo de Código

/* Seleciona todas as tags p */
p { color: gray; }

/* Seleciona elemento com id */
#titulo { font-weight: bold; }

/* Seleciona elementos com classe */
.destaque { background: yellow; }

3

Cores e backgrounds

CSS oferece várias formas de definir cores e fundos.

Exemplo de Código

.box {
  color: #333;
  background-color: #f0f0f0;
  background-image: url("imagem.jpg");
}

4

Tipografia

Controle fontes, tamanhos e espaçamentos de texto.

Exemplo de Código

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

5

Box Model

Todo elemento HTML é uma caixa com margem, borda, padding e conteúdo.

Exemplo de Código

.elemento {
  margin: 20px;
  padding: 15px;
  border: 2px solid black;
  width: 300px;
}

6

Layout com Flexbox

Flexbox facilita a criação de layouts flexíveis e responsivos.

Exemplo de Código

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}