Estilizando uma lista de compras

Descrição:

Neste exercício, você irá criar uma página web que exibe uma lista produtos e utilizará CSS para aplicar alguns estilos nessa lista.

O objetivo deste exercício é praticar o uso de alguns seletores mais básicos de CSS.

Instruções:

  1. Crie uma página web com uma lista de produtos
    • Cada produto deve ter:
      • Nome,
      • Descrição
      • Preço

Para facilitar você pode usar o código a seguir e alterá-lo:

<ul>
  <li>
    <h2>Produto 1</h2>
    <p>Descrição do produto 1.</p>
    <p class="price">$10.00</p>
  </li>
  <li>
    <h2>Produto 2</h2>
    <p>Descrição do produto 2.</p>
    <p class="price">$20.00</p>
  </li>
  <li>
    <h2>Produto 3</h2>
    <p>Descrição do produto 3.</p>
    <p class="price">$30.00</p>
  </li>
</ul>

Usando seletores CSS, aplique os estilos a seguir:

  • Todos os elementos h2 devem ter o font-size igual a 1.2em.
  • Todos os elementos p devem ter o color igual a #333.
  • Todos os elementos p.price devem ter o font-weight igual a bold.

Certifique-se de validar seu código HTML usando um validador como o W3C Markup Validation Service, para garantir que seu código esteja sem erros e bem formado.

Experimente validar o seu código CSS em sites como:

Gostou? Não esqueça de avaliar o exercício:

Abra o formulário de avaliação