Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Adicione Seus Primeiros Estilos | Introduction to CSS
CSS Fundamentals

Desafio: Adicione Seus Primeiros EstilosDesafio: Adicione Seus Primeiros Estilos

Nota

Todos os desafios incluem um exemplo de código com os arquivos index.html e index.css. Como o curso é focado no aprendizado de CSS, por favor, resolva os desafios no arquivo index.css. Após completar um desafio, clique no botão "Executar Código" para visualizar a página ao vivo e garantir que o desafio foi resolvido corretamente.

Além disso, cada desafio fornece botões de "Dica" e "Solução". Clicar no botão "Dica" exibirá dicas para a tarefa atual, enquanto o botão "Solução" revelará o exemplo de código com a aplicação correta do CSS.

Tarefa

Temos um site com duas seções, cada uma contendo um título (elemento h2) e uma descrição (elemento p). Seu objetivo é o seguinte:

  • Selecione todos os parágrafos (elementos p) no site e aplique a propriedade color com o valor orange.
html

index.html

css

index.css

js

index.js

Utilize o seletor de tag p para selecionar todos os parágrafos.

html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 1. Capítulo 4
course content

Conteúdo do Curso

CSS Fundamentals

1. Introdução ao CSS

O que é CSS?Conectando HTML e CSSSeletores para Estilizar Elementos HTMLDesafio: Adicione Seus Primeiros EstilosDesafio: Adicione os Estilos utilizando o Nome da ClasseClasses Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do UsuárioCores do TextoTrabalho Eficaz com CSSDesafio: Variáveis em CSS

2. Estilos de Texto

Estilização de TextoFormatação de TextoDesafio: Formatação de TextoAdicionar Fontes Personalizadas à Página WebPropriedades da FonteDesafio: Fontes

3. Modelo de Caixa e Espaçamento de Elementos

Modelo de CaixaDimensionamento de CaixaAdicionar Espaço aos ElementosDesafio: Box-SizingClasses Pseudoestruturais e FuncionaisDesafio: Pseudo-Classes EstruturaisTipos de ElementosTrabalhe com Elementos de Nível de BlocoTrabalhe com Elementos InlineDesafio: Prever o Layout da Página

4. Flexbox

O que é o Flexbox?Direção FlexívelAlinhar Conteúdo HorizontalmenteAlinhar Itens VerticalmentePropriedades de Item FlexívelDesafio: FlexboxDesafio: Trabalhar com Flexbox

5. Efeitos Decorativos

Cor de FundoImagem de FundoTrabalhe com ImagensElementos Pseudo-DecorativosSombrasDesafio: Efeitos DecorativosPróximos Passos

CSS Fundamentals

Desafio: Adicione Seus Primeiros EstilosDesafio: Adicione Seus Primeiros Estilos

Nota

Todos os desafios incluem um exemplo de código com os arquivos index.html e index.css. Como o curso é focado no aprendizado de CSS, por favor, resolva os desafios no arquivo index.css. Após completar um desafio, clique no botão "Executar Código" para visualizar a página ao vivo e garantir que o desafio foi resolvido corretamente.

Além disso, cada desafio fornece botões de "Dica" e "Solução". Clicar no botão "Dica" exibirá dicas para a tarefa atual, enquanto o botão "Solução" revelará o exemplo de código com a aplicação correta do CSS.

Tarefa

Temos um site com duas seções, cada uma contendo um título (elemento h2) e uma descrição (elemento p). Seu objetivo é o seguinte:

  • Selecione todos os parágrafos (elementos p) no site e aplique a propriedade color com o valor orange.
html

index.html

css

index.css

js

index.js

Utilize o seletor de tag p para selecionar todos os parágrafos.

html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 1. Capítulo 4
some-alt