Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

aplicando cor

por Jorge Henrique Nicolau da Silva
| 55.5k xp | 73 posts

Usando o html e o css eu consigui aplicar as cores no titulo e na lista mais não consigui no fundo, para entender melhor vou mostra estes dados

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>EU SOU UM numero</title>
</head>

<body class='fundo'>
    <header>
       <h1 class='titulo'>MAIORES BILHETERIAS MUNDIAIS</h1>
    </header>
    <h2 id='lista'>
        <ul>
            <P>1 Avatar 2.923.706.026</P>
            <p>2 Vingadores, utimato  2.799.439.100</p>
            <p>3 Avatar 2   2.320.250.281</p>
            <p>4 titarnique 2.264.743.305</p>
            <p>5 Guerra das estrela ep 7 2.071.310.218</p>

        </ul>
    </h2>
</body>

</html>

:root {
  --cor-de-fundo: Black;
  --cor-do-titulo: Red;
  --cor-da-lista: Blue;
}

.fundo {
  color: var(--cor-de-fundo);
}

.titulo {
  color: var(--cor-do-titulo);
  text-align: center;
}

#lista {
  color: var(--cor-da-lista);
  font-style: italic;
}
1 resposta
solução!
por Mike de Sousa
| 1568.6k xp | 2851 posts
Alura Scuba Team Suporte Educacional

Olá, Jorge, como vai?

Você fez um bom progresso com o uso de variáveis CSS e aplicação de cores. O que está faltando no seu código para colorir o fundo da página é o uso da propriedade background-color em vez de color, que muda apenas a cor do texto.

Você pode ajustar o código assim:

.fundo {
  background-color: var(--cor-de-fundo);
}

Outro ponto importante é que, pelo seu exemplo, o CSS está separado do HTML, mas o arquivo CSS não foi linkado no <head> do documento. Para que as regras de estilo funcionem, é necessário adicionar esse link. Supondo que seu arquivo CSS se chame style.css, você pode fazer assim:

<head>
  <meta charset="UTF-8">
  <title>EU SOU UM numero</title>
  <link rel="stylesheet" href="./style.css">
</head>

Além disso, há alguns detalhes no HTML que podem ser melhorados:

  • Evite aninhar listas dentro de elementos de título como <h2>. O ideal é que cada elemento tenha uma função clara. O <h2> pode ser usado separadamente como subtítulo e a <ul> deve estar fora dele.
  • Evite usar a tag <p> dentro de <ul>. O correto seria usar <li> para representar cada item da lista.
  • O id="lista" está em um <h2>, mas o ideal seria colocá-lo na <ul> se você quer estilizar a lista.

Um exemplo mais organizado seria:

<h2>Ranking dos Filmes</h2>
<ul id="lista">
  <li>1 Avatar – 2.923.706.026</li>
  <li>2 Vingadores: Ultimato – 2.799.439.100</li>
  <li>3 Avatar 2 – 2.320.250.281</li>
  <li>4 Titanic – 2.264.743.305</li>
  <li>5 Star Wars Ep 7 – 2.071.310.218</li>
</ul>

Com isso, além de aplicar o fundo corretamente, seu código fica mais semântico e fácil de manter.

Se precisar de mais ajuda, o fórum está à disposição.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado