Ćndice do Curso
1. O que Ć© CSS3?
CSS3 (Cascading Style Sheets 3) Ć© a versĆ£o mais recente da linguagem usada para estilizar pĆ”ginas HTML. Ele controla o layout, cores, fontes, espaƧamento e muito mais, transformando estruturas simples em designs modernos e atraentes.
CSS3 trouxe novos recursos como arredondamentos, sombras, gradientes, animaƧƵes, Flexbox e Grid ā tudo sem precisar de imagens ou JavaScript.
Por que aprender CSS3?
Transforma pƔginas HTML em designs profissionais
Essencial para qualquer desenvolvedor web
Permite layouts responsivos (para celular, tablet, desktop)
Trabalha em conjunto com HTML5 e JavaScript
Suporte total em todos os navegadores modernos
2. Sintaxe e Seletores
A estrutura bƔsica do CSS Ʃ composta por seletores e declaraƧƵes :
selector {
property: value;
}
Exemplo PrƔtico:
/* Seleciona todos os h1 */
h1 {
color: blue;
font-size: 24px;
}
/* Seleciona elementos com classe "destaque" */
.destaque {
background-color: yellow;
}
/* Seleciona elemento com id "cabecalho" */
#cabecalho {
text-align: center;
}
Resultado:
Ver Estilo Aplicado
TĆtulo em Azul
Este parƔgrafo estƔ destacado!
Centro da PƔgina
3. Cores e Fundos
VocĆŖ pode definir cores de texto, fundo, bordas e gradientes:
body {
background-color: #f0f0f0;
color: #333;
}
.box {
background: linear-gradient(45deg, #ff9a9e, #fecfef);
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
}
Exemplo de Fundo Gradiente:
Ver Resultado
Caixa com fundo gradiente
4. Box Model
Toda caixa no CSS tem: conteĆŗdo, padding, borda e margin .
.caixa {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
box-sizing: border-box;
}
Use box-sizing: border-box; para incluir padding e borda no tamanho total da caixa.
5. EstilizaĆ§Ć£o de Texto
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.5;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
6. Layouts e Display
Controle como os elementos sĆ£o exibidos:
.block { display: block; } /* Ocupa toda a linha */
.inline { display: inline; } /* Fica na mesma linha */
.inline-block { display: inline-block; }
.none { display: none; } /* Esconde o elemento */
7. Flexbox
O Flexbox facilita o alinhamento e distribuiĆ§Ć£o de elementos:
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
gap: 10px;
}
8. CSS Grid
Grid permite layouts em duas dimensƵes (linhas e colunas):
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
9. Design Responsivo
Use @media para adaptar a pƔgina a diferentes telas:
@media (max-width: 768px) {
.container {
padding: 10px;
}
nav {
flex-direction: column;
}
}
Mobile-first Ʃ uma boa prƔtica: comece com estilos para celular e adicione regras para telas maiores.
10. TransiƧƵes e AnimaƧƵes
.botao {
background: #f093fb;
transition: all 0.3s ease;
}
.botao:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
11. Projeto Final
Vamos criar um card estilizado com CSS3:
Meu Card CSS3
Feito com gradientes, sombras e bordas arredondadas.
Ver Card Estilizado
Meu Card CSS3
Feito com gradientes, sombras e bordas arredondadas.
š ParabĆ©ns!
VocĆŖ completou o curso de CSS3! Agora vocĆŖ sabe:
ā
Sintaxe e seletores CSS
ā
Estilizar cores, textos e fundos
ā
Trabalhar com Box Model
ā
Criar layouts com Flexbox e Grid
ā
Tornar sites responsivos
ā
Adicionar transiƧƵes e animaƧƵes
ā
Criar designs modernos e profissionais
Combine HTML5 e CSS3 para criar pĆ”ginas incrĆveis. O prĆ³ximo passo? Aprenda JavaScript para adicionar interatividade!
PrĆ³ximos Passos:
Pratique com projetos reais (landing pages, cards, menus)
Aprenda frameworks como Bootstrap ou Tailwind CSS
Estude prƩ-processadores como SASS
Combine com JavaScript para efeitos dinĆ¢micos
Explore layouts modernos com Grid e Flexbox