.jpg)
Seja muito bem-vindo à Academy Code Christ!
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
📚 Continue sua jornada de aprendizado
%20-%20Copia.png)
A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.
📋 Menus correspondentes:
.png)
💻 Pratique o que você aprende
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
🎨 Etapa 01
O que você vai aprender nesta aula?
Mesmo que você nunca tenha programado antes, não se preocupe! Vamos aprender passo a passo, com explicações simples, exemplos práticos e atividades para colocar o conhecimento em prática.
🎨 Introdução
Aprender CSS (Cascading Style Sheets) é dar o primeiro passo em direção a transformar ideias em beleza digital.
Na trilha “Do Zero ao Avançado em CSS” Tem a missão de ensinar de forma simples, didática e com propósito, levando o conhecimento técnico de qualidade.
Para pessoas que talvez não tenham acesso a cursos caros, internet rápida ou mentores experientes.
A ideia é mostrar que todos podem aprender e dominar CSS, independentemente de onde venham ou de quais recursos tenham disponíveis.
🎨 O nascimento do CSS
CSS significa Cascading Style Sheets, ou, em português, Folhas de Estilo em Cascata.
Ele surgiu nos anos 1990, quando os desenvolvedores perceberam que o HTML a linguagem usada para estruturar as páginas da web. Não era suficiente para definir estilos visuais de forma organizada.
O nome "Folhas de Estilo em Cascata" indica que o navegador segue uma hierarquia. Se você der duas ordens diferentes, o CSS segue uma prioridade:
Os criadores da web tiveram uma ideia genial: separar o conteúdo do estilo.
O HTML ficaria responsável pelo conteúdo e pela estrutura da página (títulos, parágrafos, imagens, links etc.), enquanto o CSS ficaria responsável pelo visual e pela apresentação (cores, tamanhos, espaçamentos, fontes, alinhamentos, etc.).
🎨 O que exatamente o CSS faz
O CSS tem uma função simples, mas poderosa: controlar a aparência dos elementos no navegador.
Ele permite dizer ao navegador como cada parte de uma página deve ser exibida.
Por exemplo:
● O título deve ser azul e centralizado.
● O fundo da página será cinza claro.
● Os botões terão bordas arredondadas e mudarão de cor quando o mouse passar por cima.
● As imagens devem se ajustar automaticamente ao tamanho da tela do celular.
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.
Pense assim:
- HTML = esqueleto
- CSS = aparência
Exemplo:
HTML:
<button>Enviar</button>
CSS:
button {
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
Essas instruções são escritas por meio de regras CSS, que seguem uma estrutura básica:
👉 Em resumo: Com CSS, você controla:
- cores
- fontes
- tamanhos
- espaçamentos
- alinhamentos
- layouts
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página com CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Olá, mundo!</h1> ⇽ No Css fica assim → h1 {
</body>
</html>
📄 style.css
h1 { ⇽ Esse é o <h1> do HTML
color: blue;
font-size: 32px;
text-align: center;
}
Interpretação:
O CSS “Seleciona esse elemento do HTML e aplique essas propriedades de estilo”.
Cada regra CSS tem três partes:
seletor {
propriedade: valor;
}
seletor → É toda tag do HTML
No CSS o seletor vai ser: h1 { Que é a tag de título do HTML
● h1 = seletor (alvo: Do título <h1> do HTML)
● color = propriedade da cor
● font-size: 32px = tamanho da fonte em pixels
● text-align: center; = alinhamento de texto: centralizado.
Resultado: um título azul, grande e centralizado — muito mais agradável!
O CSS também tem essa função → * { Resumindo: O * { é muito usado no início de um arquivo CSS para fazer uma configuração inicial geral da página, chamada de reset CSS.
Por exemplo:
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Isso significa:
- * { → seleciona todos os elementos.
- margin: 0; → remove as margens padrão.
- padding: 0; → remove os espaçamentos internos padrão.
- box-sizing: border-box; → faz com que o padding e a borda sejam incluídos no cálculo da largura e altura dos elementos.
💳 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>
Editor de códigos Mr. Digitals
O id="nome": identifica um elemento específico. No CSS, você seleciona esse elemento usando #nome.
O class="titulo": define uma classe que pode ser usada em vários elementos. No CSS, você seleciona essa classe usando .titulo.
Guarde esta regra:
# → seleciona um id.
. → seleciona uma class.
* → seleciona todos os elementos.
. → seleciona uma class.
* → seleciona todos os elementos.
📄 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 😍.
Editor de códigos Mr. Digitals
🧩 As principais propriedades tipográficas: Proprieda e Função
font-family → Define a fonte usada
font-size → Tamanho da fonte
font-weight → Espessura da fonte (normal, bold, 300, 700 etc.)
font-style → Define estilos como itálico
text-transform → Transforma texto (uppercase, lowercase, capitalize)
text-decoration → Sublinhado, linha sobre o texto etc.
line-height Altura da linha (espaçamento vertical entre linhas)
letter-spacing → Espaçamento entre letras
word-spacing → Espaçamento entre palavras
text-shadow → Cria sombras no texto
font-size: 20px → tamanho da fonte em pixels
background-color → Define a cor de fundo.
background-image → Define uma imagem de fundo.
background-repeat → Define se a imagem de fundo deve se repetir.
background-position → Define a posição da imagem.
background-size → Define o tamanho da imagem de fundo.
background → Forma abreviada para configurar várias propriedades de fundo.
🎨 Existem três maneiras principais de aplicar CSS a uma página HTML:
- Inline (dentro da tag HTML)
- Interno (<style> dentro do HTML)
- Externo (style.css separado)
- Inline (dentro da tag HTML)
- Interno (<style> dentro do HTML)
- Externo (style.css separado)
Cada método tem suas vantagens e desvantagens. Vamos analisá-los com calma.
🎨 CSS Inline: Aplicado diretamente na tag HTML:
<p style="color: blue;">Olá, mundo!</p>
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo CSS Inline</title>
</head>
<body>
<h1 style="color: blue; font-size: 32px;">Olá, mundo!</h1>
<p style="color: red; background-color: yellow;">
Este é um parágrafo com CSS inline.</p>
</body>
</html>
<p style="color: blue;">Olá, mundo!</p>
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo CSS Inline</title>
</head>
<body>
<h1 style="color: blue; font-size: 32px;">Olá, mundo!</h1>
<p style="color: red; background-color: yellow;">
Este é um parágrafo com CSS inline.</p>
</body>
</html>
Interpretação:
color: blue; — deixa o texto azul.
font-size: 32px; — define o tamanho da fonte.
color: red; — deixa o texto vermelho.
background-color: yellow; — coloca um fundo amarelo.
✔ Vantagem: rápido para testes
❌ Desvantagem: desorganiza o código
🎨 CSS interno (dentro da tag HTML)
O estilo inline é quando você escreve o CSS diretamente dentro da tag HTML, usando o atributo <style>Css aqui!</style>.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Primeiro Estilo</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Olá, mundo com estilo interno!</p>
</body>
</html>
● Rápido de testar;
● Útil para ajustes rápidos.
❌ Desvantagens:
● 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..
🎨 CSS Externo (em outro arquivo)
A forma profissional e mais usada é manter o CSS em um arquivo separado e vinculá-lo ao HTML com a tag <link>.
💡 Exemplo completo:
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página com CSS Externo</title>
<link rel="stylesheet" href="style.css"> ⇽ O link do CSS
</head>
<body>
<h1>Site com Estilo!</h1>
<p>O CSS dessa página está em um arquivo externo.</p>
</body>
</html>
🔎 Veja como fica no VScode
Com CSS:
📄 style.css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #0077ff;
text-align: center;
}
p {
color: #333;
font-size: 18px;
}
✔️ Vantagens:
● Arquivo CSS separado — limpo e organizado;
● Pode ser usado em várias páginas diferentes;
● Facilita manutenção e escalabilidade do projeto.
💡 Regra de ouro: Sempre use o CSS externo em projetos reais.
👣O passo a passo para linkar o CSS no HTML no head
1. Primeiro você tem que linkar o CSS no Html no <head>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página com CSS</title>
</head> ⇽ Dentro da head
<body>
<h1>Olá, mundo!</h1>
</body>
</html>
Com CSS:
📄 style.css
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
Veja como fazer no VScode
👣Passo 7
🔎 O resultado no Live Server da parte do Html vai ficar dessa forma👇
👣Passo 8
🔎 O resultado no Live Server da parte do CSS vai ficar dessa forma👇
 |
🎨 Por que aprender CSS é importante?
Tudo na web usa CSS.
Você pode criar portfólios e projetos.
É uma das habilidades mais importantes do front-end.
Você transforma ideias em interfaces reais.
CSS melhora leitura e experiência do usuário.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
🧺 Seu Primeiro Exercício Prático
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! 🎉
🧩 Boas Práticas Desde o Início
● 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).
🚀 Conclusão
O CSS é uma das tecnologias mais importantes da web moderna.
Ele permite transformar páginas simples em interfaces bonitas, organizadas e responsivas.
Nesta etapa, você aprendeu:
- o que é CSS
- como ele funciona
- como usar com HTML
- formas de aplicar CSS
- conceito de cascata
- primeiro projeto prático
❓ Perguntas Frequentes (FAQ)
A melhor forma de usar CSS no HTML é através de um arquivo externo (.css), vinculado com a tag <link> dentro do <head>. Esse método mantém o código organizado, facilita a manutenção e permite reutilizar o mesmo estilo em várias páginas.
O CSS inline pode ser usado em casos específicos, como testes rápidos ou ajustes pontuais. Porém, não é recomendado em projetos reais, pois deixa o código desorganizado, difícil de manter e repetitivo.
O CSS inline é aplicado diretamente na tag HTML, o interno fica dentro da tag <style> no próprio arquivo HTML, e o externo é escrito em um arquivo separado. Entre eles, o CSS externo é o mais indicado para projetos profissionais por ser mais organizado e escalável
📚 Continue aprendendo CSS:
🎨 Etapa 3 👉 Box Model, Display e Posicionamento
🎨 Etapa 4 👉 Tipografia, Cores e Fundos Avançados
🎨 Etapa 5 👉 Bordas, Sombreamentos e Efeitos Visuais
🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos
🎨 Etapa 7 👉 Flexbox: Layouts Flexíveis e Responsivos
🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados
🎨 Etapa 9 👉 Responsividade e Media Queries
🎨 Etapa 10 👉 Transições e Animações no CSS
🎨 Etapa 11 👉 Gradientes, Sombras e Estilo Translúcido
🎨 Etapa 12 👉 Variáveis e Funções (CSS Custom Properties)
🎨 Etapa 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries
🎨 Etapa 14 👉 Boas Práticas, e Estrutura Profissional de Projeto CSS
🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS
.png)
.png)
Postar um comentário