Voltar para: Games com Phaser + Reactjs

Este material foi criado para ajudar alunos iniciantes a compreender CSS3 passo a passo, com explicações detalhadas, exemplos simples e referências para estudo.

Assim como o HTML define a estrutura de uma página, o CSS define a aparência visual.

Em outras palavras:

Tecnologia	Função
HTML	Estrutura da página
CSS	Aparência da página
JavaScript	Interatividade

1. O que é CSS

CSS significa:

Cascading Style Sheets

Ele controla elementos visuais como:

cores
fontes
espaçamentos
layouts
posicionamento
animações

Sem CSS, todas as páginas seriam visualmente simples.

2. O que é CSS3

CSS3 é a versão moderna do CSS e trouxe diversas melhorias importantes:

animações
gradientes
sombras
layouts modernos
media queries (responsividade)

Assim como o HTML5, o CSS é padronizado pela World Wide Web Consortium.

3. Como usar CSS em uma página

Existem três formas principais de aplicar CSS.

CSS Inline

Aplicado diretamente no elemento HTML.

<p style="color:red;">Texto vermelho</p>

Problema: difícil de manter.

CSS Interno

Colocado dentro da tag <style>.

<style>p{
color:red;
}</style>

CSS Externo (RECOMENDADO)

Arquivo separado.

<link rel="stylesheet" href="style.css">

Arquivo CSS:

p{
color:red;
}

Esse é o método usado em projetos profissionais.

4. Estrutura de uma regra CSS

CSS funciona através de regras.

Exemplo:

p{
color:blue;
font-size:20px;
}

Estrutura:

parte	significado
p	seletor
color	propriedade
blue	valor

5. Seletores CSS

Seletores definem quais elementos receberão estilo.

Seletor por tag

p{
color:red;
}

Aplica estilo em todos os parágrafos.

Seletor por classe

Classe é reutilizável.

HTML:

<p class="texto"></p>

CSS:

.texto{
color:green;
}

Seletor por id

ID é único.

HTML:

<p id="titulo"></p>

CSS:

#titulo{
font-size:30px;
}

6. Cores em CSS

Existem várias formas de definir cores.

Nome da cor

color:red;

HEX

color:#ff0000;

RGB

color:rgb(255,0,0);

RGBA

color:rgba(255,0,0,0.5);

Permite transparência.

7. Tipografia

CSS permite controlar fontes.

Fonte

font-family:Arial;

Tamanho

font-size:20px;

Negrito

font-weight:bold;

Alinhamento

text-align:center;

8. Espaçamento

Margin

Espaço externo.

margin:20px;

Padding

Espaço interno.

padding:10px;

Exemplo visual:

margin
 └ elemento
    └ padding
       └ conteúdo

9. Bordas

CSS permite criar bordas.

border:2px solid black;

Componentes:

propriedade	função
border-width	espessura
border-style	tipo
border-color	cor

10. Background

CSS controla fundo dos elementos.

Cor de fundo

background-color:blue;

Imagem de fundo

background-image:url("imagem.jpg");

Ajustar imagem

background-size:cover;

11. Layout com Flexbox

Um dos sistemas de layout mais importantes do CSS moderno.

display:flex;

Exemplo:

.container{
display:flex;
}

Itens ficam alinhados lado a lado.

Alinhamento horizontal

justify-content:center;

Alinhamento vertical

align-items:center;

12. CSS Grid

Outro sistema de layout poderoso.

display:grid;

Exemplo:

.container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}

Cria três colunas.

13. Responsividade

Responsividade permite que sites funcionem bem em celulares.

CSS usa Media Queries.

Exemplo:

@media (max-width:768px){body{
background:red;
}}

Isso muda o estilo em telas menores.

14. Sombras

CSS3 permite sombras.

Sombra em texto

text-shadow:2px 2px 5px black;

Sombra em elementos

box-shadow:2px 2px 10px gray;

15. Bordas arredondadas

border-radius:10px;

Muito usado em interfaces modernas.

16. Transições

CSS permite criar animações suaves.

transition:0.3s;

Exemplo:

button:hover{
background:red;
}

17. Animações

CSS3 possui animações.

@keyframes mover{from{left:0;}
to{left:100px;}}

Aplicando:

animation:mover 2s;

18. Estrutura recomendada de projeto

Organização de arquivos.

site
│
├── index.html
│
├── css
│   └── style.css
│
├── js
│   └── script.js
│
└── images

19. Boas práticas em CSS

✔ usar classes ao invés de ids
✔ organizar código
✔ usar indentação
✔ separar CSS do HTML
✔ reutilizar estilos

20. Ferramentas para praticar CSS

CodePen

https://codepen.io

Permite testar HTML, CSS e JavaScript online.

JSFiddle

https://jsfiddle.net

Editor de código online.

CSS Battle

CSSBattle

https://cssbattle.dev

Jogo para treinar CSS.

21. Documentação de CSS

Documentação completa

MDN Web Docs

https://developer.mozilla.org/pt-BR/docs/Web/CSS

Considerada a melhor referência técnica.

Referência para iniciantes

W3Schools

https://www.w3schools.com/css

22. Exercícios para iniciantes

Exercício 1

Criar uma página com:

fundo colorido
título centralizado
parágrafo estilizado

Exercício 2

Criar um botão com:

cor
borda arredondada
efeito hover

Exercício 3

Criar um layout com Flexbox.

23. Primeiro projeto recomendado

Crie uma página de perfil pessoal.

Ela deve conter:

foto
nome
descrição
redes sociais
lista de habilidades

Use CSS para:

centralizar conteúdo
adicionar cores
adicionar sombras

Conclusão

CSS3 é essencial para criar páginas modernas e profissionais.

Ele permite transformar uma página simples em uma interface visual completa e agradável.

Aprender CSS abre caminho para:

design de interfaces
desenvolvimento front-end
criação de sites responsivos