🎓CURSO DE <CSS>

🎯 Objetivo Geral

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.

O CURSO DE <CSS>

Será dividido em 5 módulos principais, cada um contendo várias aulas detalhadas.

📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos

📚Módulo 1

🎨 Fundamentos do CSS

💻 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.

💻 Aula 1: 👉 Introdução ao CSS: O que é, como funciona e formas de aplicar.

🎯 Objetivos da Aula

● 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.

🧠 1. O Que É CSS

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.

💡 Exemplo:

<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

🧩 Funcionamento Básico do CSS

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;

}

💡 Exemplo:

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

⚙️ Como o CSS Trabalha Junto com o HTML

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.)

🎨 As 3 Formas de Aplicar CSS no HTML

Agora vem uma parte essencial: como adicionar CSS ao seu documento HTML.

Existem 3 formas principais:

🟩 1. CSS Inline (na própria tag)

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>

✔️ Vantagens:

● 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.

🟨 2. CSS Interno (no mesmo arquivo, dentro da tag <style>)

Você pode declarar regras de estilo dentro da seção <head> do HTML, dentro da tag <style>.

<!DOCTYPE html>

<html>

<head>

<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>

✔️ Vantagens:

● Fácil de editar rapidamente;

● Ideal para pequenos projetos ou testes.

❌ Desvantagens:

● Mistura HTML com CSS (difícil em projetos grandes);

Afeta apenas essa página — não é reaproveitável.

🟦 3. 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>

<head>

<title>Página com CSS Externo</title>

</head>

<body>

<h1>Site com Estilo!</h1>

<p>O CSS dessa página está em um arquivo externo.</p>

</body>

</html>

📄 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.

🧠 5. A Hierarquia da “Cascata”

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!

🧩 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).

🧺 7. Seu Primeiro Exercício Prático

Crie os seguintes arquivos na sua pasta de projeto:

📄 index.html

<!DOCTYPE html>

<head>

<title>Meu Primeiro Site Estilizado</title>

</head>

<body>

<p>Este é o meu primeiro site com CSS externo.</p>

<p class="destaque">O CSS controla o visual da página!</p>

</body>

</html>

📄 style.css

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! 🎉

🚀 Próxima Aula 2: Sintaxe, Seletores e Propriedades Essenciais

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.

💻 Aula 2: 👉 Sintaxe, Seletores e Propriedades Essenciais.

🎯 Objetivos da Aula

● 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.

🧩 1. Revisão Rápida — Sintaxe CSS

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.

🧭 Tipos de Seletores

Seletores são a ponte entre o HTML e o CSS — eles dizem a quais elementos aplicar as regras.

Vamos ver os principais:

🔹 a) Seletor por Tipo (Tag)

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.

🔹 b) Seletor por Classe (.classe)

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.

🔹 c) Seletor por ID (#id)

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).

🔹 d) Seletor Combinado (agrupamento)

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.

🔹 e) Seletores Descendentes (elementos dentro de outros)

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:

<p>Este parágrafo fica verde!</p>

</section>

🔹 f) Seletor Universal (*)

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.

🔹 g) Seletor de Atributo

Seleciona elementos baseados em atributos HTML.

input[type="text"] {

border: 2px solid #0077ff;

}

Aplica estilo apenas aos inputs do tipo “texto”.

🧠 Herança e Cascata

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.

🎨 Propriedades Essenciais

Agora vamos ver as propriedades mais usadas no CSS — as que você precisa dominar bem desde o início.

🟢 a) color (cor do texto)

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)

🟠 b) background (fundo)

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;

}

🔵 c) font-family (tipo de letra)

Define a fonte usada pelo texto.

body {

font-family: 'Segoe UI', Arial, sans-serif;

}

Sempre é bom definir fontes de fallback (alternativas).

🟣 d) font-size (tamanho da fonte)

Define o tamanho da letra:

h1 {

font-size: 32px;

}

Unidades comuns:

● px (fixo)

● em/rem (relativo)

% (proporcional)

🟥 e) text-align (alinhamento de texto)

Centraliza, justifica ou alinha texto:

p {

text-align: justify;

}

h1 {

text-align: center;

}

🟤 f) margin e padding (espaçamentos)

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

⚫ g) border (borda)

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

⚪ h) width e height (largura e altura)

Define o tamanho dos elementos.

div {

width: 300px;

height: 150px;

background-color: lightblue;

}

Pode usar também porcentagens:

div {

width: 50%;

}

🧱 i) box-sizing (controle do tamanho real)

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;

}

🪄 j) cursor e transition (interatividade visual)

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.

🧮 5. Prática — Mini Projeto “Cartão de Apresentação”

Vamos fixar o aprendizado criando um pequeno cartão estilizado.

📄 index.html

<!DOCTYPE html>

<head>

<title>Meu Cartão</title>

</head>

<body>

<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 😍.

🧠 6. O Que Você Aprendeu Hoje

✔️ 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.

🚀 Próxima Aula 3: Box Model, Display, e Posicionamento

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.

💻 Aula 3: 👉 Box Model, Display e Posicionamento.

🎯 Objetivos da Aula

● 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.

🧱 1. O Que é o Box Model

Todo elemento HTML é tratado pelo CSS como uma caixa retangular.
Essa caixa é composta de 4 camadas:

+------------------------+

| MARGIN |

| +---------------------+ |

| | BORDER | |

| | +-----------------+ | |

| | | +-------------+ | | |

| | | +-------------+ | | |

| | +-----------------+ | |

| +---------------------+ |

+-------------------------+

💡 Explicando:

Camada Função

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

🎨 2. Box Model na Prática

Vamos ver um exemplo prático rápido de como cada camada funciona.

📄 index.html

<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;

}

⚙️ 3. Entendendo o Display

A propriedade display define como o navegador deve exibir o elemento.

Os mais importantes são:

Tipo Descriçã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).

🎬 Exemplo visual:

<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!

📐 4. Display Inline-block

O tipo inline-block é muito útil para colocar elementos lado a lado — como botões, cartões ou menus.

.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.

📍 5. Posicionamento (Position)

A propriedade position define como um elemento será posicionado em relação à página ou a outros elementos.

⚙️ Tipos principais:

Tipo Descrição

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.

🧩 Exemplo Prático:

</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.

📌 6. Z-index (Camadas e Profundidade)

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.

📎 7. Exemplo Prático: “Cartão com Botões Fixos e Layout Posicionado”

📄 index.html

<!DOCTYPE html>

<head>

<title>Box Model e Posicionamento</title>

</head>

<body>

<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>

</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.

🧠 8. O Que Você Aprendeu Hoje

✔️ 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.

💬 Próximo Módulo:

● 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.

📚 Módulo 2 → Fundamentos do CSS.

💻 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.

Módulo 2 Acesse Aqui

📚 Adquira Nosso Livro Impresso

A venda de livros e materiais didáticos é destinada exclusivamente à manutenção e expansão da Academy Code, permitindo que mais jovens tenham acesso à educação tecnológica de qualidade e preparação para o mercado de trabalho.

🛒 Adquira nossos livros