Quiz de CSS para Iniciantes com Respostas e Explicações

Prepare-se para testar seus conhecimentos com este quiz completo de CSS para iniciantes. São 15 perguntas com gabarito e explicações claras para reforçar seus estudos.

CSS é a alma visual da web. E se você está começando a aprender como estilizar páginas, esse quiz é pra você.

Aqui estão 15 perguntas com alternativas, respostas corretas e explicações para entender o que realmente importa no CSS moderno.

🎨 Quiz de CSS para Iniciantes

1. Qual propriedade define a cor do texto em CSS?

• a) background-color
• b) text-style
• c) color
• d) font-color

✅ Resposta: c) color

Explicação:
A propriedade color altera a cor do texto. background-color altera o fundo.

2. Como se aplica uma cor de fundo a um elemento?

• a) color: blue;
• b) background-color: blue;
• c) text-color: blue;
• d) border-color: blue;

✅ Resposta: b) background-color: blue;

Explicação:
background-color define a cor do fundo de um elemento. É uma das propriedades mais básicas.

3. Qual seletor CSS seleciona todos os parágrafos?

• a) .p
• b) #p
• c) p
• d) *p

✅ Resposta: c) p

Explicação:
Seletor simples de tag. p { ... } estiliza todos os elementos <p> da página.

4. O que significa a propriedade margin?

• a) Cor do texto
• b) Espaço interno
• c) Espaço externo
• d) Largura da borda

✅ Resposta: c) Espaço externo

Explicação:
margin define o espaço do lado de fora de um elemento. Já o padding controla o espaço interno.

5. Qual unidade representa porcentagem da largura do elemento pai?

• a) em
• b) px
• c) %
• d) rem

✅ Resposta: c) %

Explicação:
Unidades relativas como % são ideais para responsividade e se ajustam ao tamanho do elemento pai.

6. Qual propriedade centraliza horizontalmente um elemento block com largura fixa?

• a) text-align: center;
• b) margin: 0 auto;
• c) align: center;
• d) float: center;

✅ Resposta: b) margin: 0 auto;

Explicação:
margin: 0 auto; centraliza blocos com largura definida no centro do contêiner.

7. Qual propriedade define o tamanho da fonte?

• a) text-size
• b) font-size
• c) size
• d) font-style

✅ Resposta: b) font-size

Explicação:
font-size altera o tamanho do texto. Pode ser definido em px, em, %, entre outros.

8. Qual é o seletor universal em CSS?

• a) *
• b) .
• c) #
• d) @

**✅ Resposta: a) * **

Explicação:
O seletor universal * aplica estilos a todos os elementos do documento.

9. O que a propriedade display: flex; faz?

• a) Esconde um elemento
• b) Aplica uma fonte especial
• c) Cria um layout flexível
• d) Alinha texto à direita

✅ Resposta: c) Cria um layout flexível

Explicação:
display: flex; transforma o contêiner em um flexbox, permitindo um controle poderoso de alinhamento e espaço entre elementos.

10. Como aplicar uma classe chamada botao a um botão em CSS?

• a) botao {}
• b) #botao {}
• c) .botao {}
• d) *botao {}

✅ Resposta: c) .botao {}

Explicação:
Seletor de classe usa ponto. .botao {} aplica estilos a todos os elementos com class="botao".

11. O que o position: absolute; faz?

• a) Faz o elemento ignorar o fluxo normal da página
• b) Centraliza o elemento automaticamente
• c) Aplica sombra
• d) Aplica negrito

✅ Resposta: a) Faz o elemento ignorar o fluxo normal da página

Explicação:
Com absolute, o elemento é posicionado em relação ao ancestral mais próximo com position: relative.

12. Qual propriedade remove o sublinhado dos links?

• a) font-decoration: none;
• b) text-decoration: none;
• c) no-decoration: true;
• d) link-style: none;

✅ Resposta: b) text-decoration: none;

Explicação:
Links são sublinhados por padrão. Para remover isso, use text-decoration: none;.

13. Qual valor de position fixa o elemento na tela ao rolar?

• a) absolute
• b) relative
• c) static
• d) fixed

✅ Resposta: d) fixed

Explicação:
fixed fixa o elemento na posição da tela. Ele não se move com o scroll.

14. Qual propriedade aplica sombra ao texto?

• a) box-shadow
• b) shadow-text
• c) text-shadow
• d) font-effect

✅ Resposta: c) text-shadow

Explicação:
text-shadow adiciona sombra a letras, aceitando valores como 2px 2px 4px #000.

15. Como criar um layout em colunas com Flexbox?

• a) display: column;
• b) display: flex; flex-direction: column;
• c) column: flex;
• d) layout: col;

✅ Resposta: b) display: flex; flex-direction: column;

Explicação:
Por padrão, Flexbox alinha em linha (row). Para colunas, defina a direção com flex-direction: column.

✅ Conclusão

CSS é prática e repetição. Esse quiz te ajudou a revisar os fundamentos que todo dev precisa saber pra aplicar estilo com confiança.

Vamos repetir com JavaScript no próximo post? Bora!

Se tiver alguma vaga, evento ou treinamento e quiser compartilhar, me chame na DM do Instagram @casadodev 🫡

Acompanhe as novidades no nosso canal do Casa do Dev no WhatsApp:

👉 Canal da Casa do Dev no WhatsApp

Até mais galera,
Cirino