Entrar Ainda não tem acesso?
3
respostas

[Dúvida] CSS

Referente ao curso JavaScript: validações e reconhecimento de voz

por Victor
| 16.2k xp | 27 posts

Boa tarde.

Estou tentando declarar variáveis no CSS mas o "root" abaixo está dando erro. Meu código está assim:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')

:root {
    --font-family: "Poppins", sans-serif;
    
}

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">

    <title>Número Secreto</title>

</head>

<body>
    <h1>Acerte o número secreto</h1>
    <h3>O número secreto está entre <span id="menor-valor">0</span> e <span id="maior-valor">100</span></h3>

    <div id="chute" class="mensagem">
        <div> Você disse: </div>
        <span class="box"> 20 </span>
        <div> O número secreto é maior <i class="fa-solid fa-arrow-up-long"></i></div>
         
    </div>
    
</body>
</html>
3 respostas
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, Victor! Como vai?

Parece que o problema pode estar relacionado ao local onde o arquivo CSS está sendo lido. No seu código HTML, você incluiu o arquivo CSS externo 'style.css' após outros dois arquivos CSS externos. Isso pode estar causando conflito, pois o navegador lê os arquivos CSS de cima para baixo e as regras definidas nos arquivos CSS posteriores podem sobrescrever as regras definidas nos arquivos anteriores.

Tente mover a linha que importa o 'style.css' para o topo da lista de arquivos CSS importados. Seu código ficaria assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <title>Número Secreto</title>

</head>

<body>
    <!-- Seu conteúdo aqui -->
</body>
</html>

Espero que essa sugestão possa resolver o seu problema. Espero ter ajudado e bons estudos!

por Victor
| 16.2k xp | 27 posts

Fala Luan, beleza cara e aí? Então, tentei fazer o que você disse e ainda não rolou. Mas percebi uma coisa diferente aqui.

Dá uma olhada no meu código CSS abaixo. A primeira tentativa de declarar ":root {}" não deu certo, mas a segunda vez que está logo abaixo da primeira, funcionou. E pior que se eu apago essa primeira tentativa que não deu certo, a segunda também não funciona. Ou seja, eu preciso deixar essa primeira tentativa errada pra que a segunda funcione. Nunca vi isso kkkkkk

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')

:root { --font-family: "Poppins", sans-serif; --bg-color: --primary-color: ; }

:root { --font-family: "Poppins", sans-serif; --bg-color: #9AD0C2; --primary-color: #265073; }

body { background-color: var(--bg-color); }

por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, Victor!

A sintaxe que você usou parece correta, então o problema pode estar em outro lugar.

Uma coisa que você pode verificar é se o arquivo CSS está sendo carregado corretamente. No seu código HTML, você está importando o arquivo CSS com o nome "style.css". Confere se este arquivo está no mesmo diretório do seu arquivo HTML e se o nome está correto por favor?

Outra possibilidade é que algum outro CSS esteja sobrescrevendo a sua declaração. Você pode verificar isso inspecionando o elemento no navegador e verificando se a fonte "Poppins" está sendo aplicada corretamente.

Se o problema persistir, salva o projeto no github e compartilha o link com a gente por favor, assim posso baixar e conferir aqui exatamente qual é o problema.

Espero ter ajudado e bons estudos!