duvidas recorrentes 3 | Front-end | Alura - Cursos online de tecnologia

1
resposta

por Jorge Henrique Nicolau da Silva

| 61.4k xp | 87 posts

Eu decidi que iria aplicar um padrão de cores no meu css, mais o por algum motivo esse padrão não esta no meu html vocês sabem como resolve este problema?


<!DOCTYPE html>
<html>
  <head>
    <tetle>Grandes Civilização</tetle>
    <meta charset="UTF-8">
    <html lang="pt-br">
  </head>
  <body>
    <h1>Grandes Civilização</h1>
    <p></p>
  </body>
</html>  
    
    :root {
  --branco: #FFFFFF;
  --preto: #000000;
  --azul-escuro: #041832;
  --vermelho-caro: #FF0000;

  --cor-principal: var(--preto: #000000);
  --cor-secundaria: var(--branco: #FFFFFF);
  --cor-tercearia: var(--azul-escuro: #041832);
  --cor-quatenaria: var(--vermelho-caro: #FF0000);
  
}

body {
  background: --cor-principal;
}

1 resposta

por Victor Costa Santos

| 2379.4k xp | 4774 posts

Alura Scuba Team

2 dias atrás

Oi Jorge!

O motivo das cores não aparecerem é que o HTML não está conectado ao CSS.
No <head>, adicione:

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

Corrija também:

<tetle> → <title>
lang="pt-br" na tag <html>

Para usar variáveis CSS, declare com --nome e use com var(--nome).

Exemplo:

:root {
  --preto: #000;
  --branco: #fff;
  --cor-principal: var(--preto);
}

body {
  background-color: var(--branco);
  color: var(--cor-principal);
}

Com isso, seu padrão de cores funcionará corretamente.

Espero ter ajudado! Bons estudos!

Sucesso ✨