Voltar para o Blog Iniciante • 5 min

Guia Rápido: Introdução ao CSS

Aprenda os fundamentos do CSS e estilize suas primeiras páginas web. Um guia prático e direto para iniciantes.

Introdução ao CSS

CSS (Cascading Style Sheets) é a tecnologia usada para estilizar páginas HTML, permitindo modificar cores, fontes, layouts e muito mais.

Estilizando uma página HTML

Vamos criar um arquivo CSS e aplicá-lo a uma página HTML. Copie e cole o código abaixo:

Passo 1: Criando a estrutura

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Página Estilizada</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Olá, CSS!</h1>
  <p>Este é um exemplo básico de CSS.</p>
</body>
</html>

Passo 2: Criando o CSS

Agora, crie um arquivo chamado styles.css no mesmo diretório e adicione o seguinte código:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  text-align: center;
}
h1 {
  color: #007bff;
}
p {
  font-size: 18px;
}

Testando a estilização

Abra o arquivo index.html no navegador e veja como o CSS transforma a aparência da página.

Explorando mais

Experimente modificar cores, fontes e tamanhos. Para aprender mais sobre CSS, confira a documentação oficial do MDN.