Levar o aluno a compreender de forma teórica e prática todos os aspectos da linguagem de códigos, desde a criação de páginas simples até o desenvolvimento de estruturas completas e frameworks modernos.
💻 Aula 1: 👉 O que é CSS e como ele funciona.
💻 Aula 2: 👉 Formas de aplicar CSS (inline, interno e externo).
💻 Aula 3: 👉 Sintaxe, seletores e propriedades.
● Entender o que é CSS e sua importância;
● Aprender a sintaxe básica;
● Compreender a relação entre HTML e CSS;
● Aprender as 3 formas de aplicar estilo (inline, interno e externo);
● Criar seu primeiro arquivo CSS organizado.
CSS vem de Cascading Style Sheets, ou seja, Folhas de Estilo em Cascata.
É ele quem dá cor, forma, tamanho, espaçamento, design e até movimento à sua página HTML.
👉 Enquanto o HTML estrutura o conteúdo (texto, imagem, botões…), o CSS é o “artista visual” que transforma o esqueleto da página em algo bonito e usável.
<h1>Olá, mundo!</h1>
Com CSS:
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
Resultado: um título azul, grande e centralizado — muito mais agradável!
🔎 VScode
🔎 Live Server
O CSS trabalha através de regras que dizem:
“Selecione esse elemento do HTML e aplique essas propriedades de estilo”.
Cada regra CSS tem três partes:
seletor {
propriedade: valor;
}
p {
color: red;
font-size: 20px;
}
Interpretação:
● p = seletor (alvo: todos os parágrafos <p> do HTML)
● color = propriedade
● red = valor da propriedade
● font-size: 20px = tamanho da fonte em pixels
Imagine o HTML como a estrutura de um corpo humano (ossos, órgãos e músculos).
O CSS é o que dá aparência e visual (roupas, cores, formato).
O navegador pega o HTML, aplica o CSS em "camadas" (a cascata) e renderiza tudo visualmente.
💡 “Cascata” significa que o navegador decide quais regras têm prioridade, caso existam várias conflitantes.
(Veremos isso em detalhes na Aula 3 — Seletor e Especificidade.)
Agora vem uma parte essencial: como adicionar CSS ao seu documento HTML.
Existem 3 formas principais:
Você coloca o estilo diretamente dentro da tag HTML, usando o atributo style.
<p style="color: blue; font-size: 18px;">Texto azul direto na tag</p>
● Rápido de testar;
● Útil para ajustes rápidos.
● Deixa o HTML poluído;
● Difícil de dar manutenção;
● Repetitivo, se usado em muitos elementos.
⚠️ Use apenas para testes rápidos ou correções pontuais.
Você pode declarar regras de estilo dentro da seção <head> do HTML, dentro da tag <style>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Teste CSS Interno</title>
<style>
body {
background-color: lightgrey;
}
h1 {
color: darkblue;
text-align: center;
}
</style>
</head>
<body>
<h1>Bem-vindo!</h1>
<p>Esse estilo está dentro do mesmo arquivo HTML.</p>
</body>
</html>
● Fácil de editar rapidamente;
● Ideal para pequenos projetos ou testes.
● Mistura HTML com CSS (difícil em projetos grandes);
Afeta apenas essa página — não é reaproveitável.
A forma profissional e mais usada é manter o CSS em um arquivo separado e vinculá-lo ao HTML com a tag <link>.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página com CSS Externo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Site com Estilo!</h1>
<p>O CSS dessa página está em um arquivo externo.</p>
</body>
</html>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #0077ff;
text-align: center;
}
p {
color: #333;
font-size: 18px;
}
● Arquivo CSS separado — limpo e organizado;
● Pode ser usado em várias páginas diferentes;
● Facilita manutenção e escalabilidade do projeto.
Sempre use o CSS externo em projetos reais.
Quando há várias regras sobre o mesmo elemento, o navegador precisa decidir qual aplicar.
Exemplo:
<p style="color: red;">Texto colorido</p>
p {
color: blue;
}
➡️ Aqui, o texto ficará vermelho, pois o CSS inline tem mais prioridade.
A ordem de prioridade é:
1️⃣ Inline (dentro da própria tag);
2️⃣ Interno (<style> na página);
3️⃣ Externo (arquivo .css separado);
4️⃣ Última regra escrita (em caso de empate de tipo).
💬 Veremos especificidade e hierarquia de forma completa na Aula 3!
● Sempre inicie um projeto com HTML limpo e um CSS separado.
● Use nomes de classes descritivos, como .botao-principal ou .menu-lateral.
● Evite usar inline CSS em projetos reais.
● Use um arquivo CSS único e mantenha a ordem visual clara (cores, tipografia, layout).
Crie os seguintes arquivos na sua pasta de projeto:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Primeiro Site Estilizado</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>👋 Olá, CSS!</h1>
<p>Este é o meu primeiro site com CSS externo.</p>
<p class="destaque">O CSS controla o visual da página!</p>
</body>
</html>
body {
background-color: #fafafa;
font-family: 'Segoe UI', Arial, sans-serif;
color: #333;
margin: 40px;
}
h1 {
text-align: center;
color: #0066cc;
font-size: 36px;
}
p {
font-size: 18px;
margin-top: 10px;
}
.destaque {
color: #d6336c;
font-weight: bold;
}
Abra o arquivo index.html no navegador, e pronto: você verá uma página simples, limpa e estilizada — o seu primeiro site com CSS! 🎉
Na próxima aula, você vai mergulhar fundo em:
● Como selecionar qualquer elemento do HTML (por tag, classe, id e atributos);
● Como aplicar múltiplas propriedades ao mesmo tempo;
● As propriedades essenciais: color, background, font, margin, padding, border, text-align.
● Aprender a sintaxe padrão do CSS;
● Entender seletores (por tag, classe, id e atributos);
● Compreender herança e agrupamento de seletores;
● Conhecer as propriedades mais utilizadas: cores, fontes, tamanhos, espaçamentos, bordas e fundo;
● Criar um mini projeto prático aplicando tudo.
Uma regra CSS é sempre assim:
seletor {
propriedade: valor;
}
Exemplo:
h1 {
color: blue;
text-align: center;
}
● h1 → Seletor (define o alvo: todos os <h1>)
● color, text-align → Propriedades
● blue, center → Valores
O ponto e vírgula (;) é colocado no final de cada linha para separar as propriedades.
Seletores são a ponte entre o HTML e o CSS — eles dizem a quais elementos aplicar as regras.
Vamos ver os principais:
Afeta todas as tags daquele tipo no HTML.
p {
color: #333;
font-size: 18px;
}
Aplica a todos os <p> do documento.
💡 Ideal para aplicar estilos globais.
Afeta todos os elementos que tiverem o atributo class no HTML.
⚙️ Classes são precedidas por um ponto (.):
.destaque {
color: #d6336c;
font-weight: bold;
}
HTML:
<p class="destaque">Texto destacado!</p>
<p>Texto normal.</p>
📘 Você pode aplicar a mesma classe em vários elementos.
Classes são reusáveis e ideais para padronizar estilos.
Afeta um elemento específico, identificado com id.
#titulo {
color: #0077ff;
text-align: center;
}
HTML:
<h1 id="titulo">Bem-vindo!</h1>
💡 Um ID deve ser único na página (somente um elemento por id).
Você pode aplicar as mesmas regras a vários seletores:
h1, h2, h3 {
color: darkblue;
font-family: Arial, sans-serif;
}
💬 A vírgula (,) separa seletores diferentes.
Permitem atingir elementos apenas dentro de uma área específica.
section p {
color: green;
}
Isso aplica cor verde somente aos <p> dentro de <section>.
HTML:
<section>
<p>Este parágrafo fica verde!</p>
</section>
<p>Este não muda de cor.</p>
Aplica regra a todos os elementos da página.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Esse estilo é muito usado no início dos projetos para resetar padrões automáticos do navegador.
Seleciona elementos baseados em atributos HTML.
input[type="text"] {
border: 2px solid #0077ff;
}
Aplica estilo apenas aos inputs do tipo “texto”.
O CSS “herda” propriedades: se você aplicar uma regra a um elemento pai, os elementos filhos geralmente herdam automaticamente.
Exemplo:
body {
color: #333;
font-family: 'Segoe UI', Arial, sans-serif;
}
Isso faz com que todos os textos da página usem essa fonte e cor, sem precisar repetir em cada tag.
Mas nem todas as propriedades são herdadas — por exemplo, bordas e margens não são.
Agora vamos ver as propriedades mais usadas no CSS — as que você precisa dominar bem desde o início.
Define a cor do texto.
p {
color: #333333; /* hexadecimal */
}
Formatos mais comuns:
● Nome: red, blue, green
● Hexadecimal: #ff0000
● RGB: rgb(255, 0, 0)
● RGBA (com transparência): rgba(255, 0, 0, 0.5)
Controla o plano de fundo de um elemento.
body {
background-color: #fafafa;
}
Você pode usar imagens também:
div {
background-image: url('fundo.jpg');
background-size: cover;
background-position: center;
}
Define a fonte usada pelo texto.
body {
font-family: 'Segoe UI', Arial, sans-serif;
}
Sempre é bom definir fontes de fallback (alternativas).
Define o tamanho da letra:
h1 {
font-size: 32px;
}
Unidades comuns:
● px (fixo)
● em/rem (relativo)
% (proporcional)
Centraliza, justifica ou alinha texto:
p {
text-align: justify;
}
h1 {
text-align: center;
}
Dois conceitos cruciais 🎯
● margin = espaço fora do elemento
● padding = espaço dentro (entre o conteúdo e a borda)
div {
margin: 20px;
padding: 10px;
}
💡 Você pode usar:
margin-top, margin-right, margin-bottom, margin-left
Desenha bordas ao redor de elementos.
p {
border: 2px solid #0077ff;
border-radius: 8px;
}
Explicando:
● 2px = espessura
● solid = estilo (pode ser dotted, dashed, double etc.)
● #0077ff = cor
● border-radius arredonda os cantos
Define o tamanho dos elementos.
div {
width: 300px;
height: 150px;
background-color: lightblue;
}
Pode usar também porcentagens:
div {
width: 50%;
}
Por padrão, width e height não incluem bordas nem padding.
Com box-sizing: border-box;, tudo é incluído — muito mais previsível! 💡
* {
box-sizing: border-box;
}
button {
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0077ff;
color: white;
}
👆 Assim criamos efeitos suaves e profissionais com apenas duas linhas.
Vamos fixar o aprendizado criando um pequeno cartão estilizado.
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Cartão</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cartao">
<h1 id="nome">Ana Costa</h1>
<p class="titulo">Desenvolvedora Front-End</p>
<p class="descricao">Amo transformar ideias em interfaces modernas e eficazes 💻✨</p>
<button>Entrar em contato</button>
</div>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #a2d2ff, #cdb4db);
font-family: 'Segoe UI', Arial, sans-serif;
}
.cartao {
background-color: #fff;
border-radius: 12px;
padding: 24px;
width: 320px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#nome {
color: #0077ff;
font-size: 28px;
}
.titulo {
color: #333;
font-weight: bold;
margin: 10px 0;
font-size: 16px;
}
.descricao {
color: #555;
font-size: 14px;
margin-bottom: 20px;
}
button {
background-color: #0077ff;
color: white;
border: none;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005fd4;
}
Abra o resultado no navegador e observe:
● Tipografia alinhada,
● Cores harmônicas,
● Bordas suaves e
● Efeito hover no botão 😍.
✔️ Sintaxe do CSS: seletor + propriedade + valor;
✔️ Tipos de seletores: tag, classe, id, descendentes, atributos, agrupamento e universal;
✔️ Conceitos de herança e cascata;
✔️ As propriedades mais usadas no mundo real (color, background, font, margin, padding etc.);
✔️ Como criar um cartão com design moderno e limpo.
Na próxima aula, você vai dominar o Modelo de Caixa (Box Model) — o conceito mais importante do CSS moderno —
e aprender como posicionar, alinhar e criar layouts profissionais usando display, position, overflow, z-index, e muito mais.
● Entender o conceito do Box Model (modelo de caixas do CSS);
● Aprender a usar margin, border, padding, content;
● Dominar o comportamento dos elementos com a propriedade display;
● Aprender os tipos de posicionamento (static, relative, absolute, fixed, sticky);
● Compreender camadas (z-index) e controle de sobreposição;
● Criar um exemplo prático completo com layout e posicionamento.
Todo elemento HTML é tratado pelo CSS como uma caixa retangular.
Essa caixa é composta de 4 camadas:
+------------------------+
| MARGIN |
| +---------------------+ |
| | BORDER | |
| | +-----------------+ | |
| | | PADDING | | |
| | | +-------------+ | | |
| | | | CONTENT | | | |
| | | +-------------+ | | |
| | +-----------------+ | |
| +---------------------+ |
+-------------------------+
Content → O conteúdo real (texto, imagem, botão...)
Padding → Espaço interno entre o conteúdo e a borda
Border → A linha que envolve o elemento
Margin → Espaço externo, separando um elemento do outro
Vamos ver um exemplo prático rápido de como cada camada funciona.
📄 index.html
<div class="caixa">
<p>Sou uma caixa CSS</p>
</div>
📄 style.css
.caixa {
background-color: lightblue;
color: #333;
width: 300px;
padding: 20px;
border: 5px solid #0077ff;
margin: 30px;
}
💬 Nesse exemplo:
● A largura total da caixa não será apenas 300px —
ela soma: width + padding + border + margin.
Dica Profissional:
Para que o valor da width inclua padding e borda, use:
* {
box-sizing: border-box;
}
A propriedade display define como o navegador deve exibir o elemento.
Os mais importantes são:
block → Ocupa toda a largura disponível; começa em nova linha. (ex: <div>, <p>, <section>)
inline → Ocupa apenas o espaço do conteúdo; não quebra linha. (ex: <span>, <a>, <strong>)
inline-block → Mistura dos dois: mantém em linha, mas aceita largura/margem/padding.
none → Esconde totalmente o elemento.
flex → Transforma o elemento num contêiner flexível (veremos na Aula 7).
grid → Transforma o elemento num contêiner de grade (veremos na Aula 8).
<p>Texto normal com <span>um span inline</span> dentro!</p>
<div class="bloco">Sou um elemento block</div>
span {
background: yellow;
display: inline;
}
.bloco {
background: lightgreen;
display: block;
width: 200px;
padding: 10px;
}
💡 inline não respeita width/height, mas block sim!
O tipo inline-block é muito útil para colocar elementos lado a lado — como botões, cartões ou menus.
<div class="botao">Sim</div>
<div class="botao">Não</div>
.botao {
display: inline-block;
background: #0077ff;
color: white;
padding: 10px 20px;
margin: 10px;
border-radius: 8px;
}
🟢 Resultado: os botões ficam lado a lado, mas continuam respeitando largura, altura e padding.
A propriedade position define como um elemento será posicionado em relação à página ou a outros elementos.
static → Padrão (segue o fluxo normal da página).
relative → Mantém posição original, mas pode ser deslocado usando top, left, right, bottom.
absolute → Sai do fluxo normal; é posicionado relativamente ao seu elemento pai posicionado.
fixed → Fixa o elemento na tela (mesmo rolando a página).
sticky → Mistura relative e fixed: fica parado até certa rolagem.
<div class="container">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
.container {
position: relative;
background: #f0f0f0;
width: 300px;
height: 200px;
}
.box {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: bold;
}
.a { background: #0077ff; }
.b { background: #ff0077; position: absolute; top: 20px; left: 80px; }
.c { background: #33cc33; }
💡 .b fica sobreposta às outras caixas, pois está position: absolute dentro de um contêiner position: relative.
Quando elementos se sobrepõem, o z-index decide qual fica na frente.
.caixa1 {
position: absolute;
top: 20px;
left: 20px;
background: orange;
z-index: 2;
}
.caixa2 {
position: absolute;
top: 40px;
left: 40px;
background: purple;
z-index: 1;
}
👉 Aqui, .caixa1 ficará por cima da .caixa2.
📘 Só funciona se o elemento tiver position diferente de static.
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Box Model e Posicionamento</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="painel">
<h1>Caixas e Posições no CSS</h1>
<p>Aprender o Box Model é entender a alma do design!</p>
<button class="btn">Continuar</button>
</div>
<div class="botao-flutuante">💬</div>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #a2d2ff, #fcbf49);
height: 100vh;
font-family: 'Segoe UI', sans-serif;
}
.painel {
width: 400px;
background-color: #fff;
border: 3px solid #0077ff;
border-radius: 12px;
padding: 20px;
margin: 60px auto;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
h1 {
color: #0077ff;
margin-bottom: 10px;
}
p {
color: #333;
margin-bottom: 20px;
}
.btn {
background: #0077ff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
.btn:hover {
transform: scale(1.1);
}
/* Botão fixo */
.botao-flutuante {
position: fixed;
right: 30px;
bottom: 30px;
width: 50px;
height: 50px;
background: #ff0077;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
box-shadow: 0 3px 12px rgba(0,0,0,0.3);
transition: transform 0.3s;
}
.botao-flutuante:hover {
transform: scale(1.2);
}
💥 Pronto! Você tem:
● Um painel centralizado com bordas, margens e padding bem definidos;
● Um botão fixo no canto inferior direito (simulando o botão do WhatsApp ou “Fale Conosco”);
● E todos os elementos perfeitamente organizados pelo Box Model e posicionamento CSS.
✔️ Como funciona o Box Model (Content, Padding, Border, Margin);
✔️ Diferenças entre display: block, inline, inline-block;
✔️ Como usar position (relative, absolute, fixed, sticky);
✔️ O que é z-index e como controlar camadas;
✔️ Criação de layout prático com elementos posicionados e botão flutuante.
● Aprender a dominar tipografia com estilo profissional;
● Trabalhar com cores, gradientes e transparências;
● Usar backgrounds avançados (múltiplos fundos, imagens e efeitos);
● Criar um exemplo visual refinado de página de perfil elegante.
💻 Aula 4: 👉 Cores, unidades, bordas e fontes.
💻 Aula 5: 👉 Box Model: margin, border, padding e content.
⚙️ Layout e Posicionamento
💻 Aula 6: 👉 Display, width, height, overflow e position.