CSS Erro no Background Color - CSS

kkcaio · 21 de maio de 2022

Olá pessoal,

Estou tendo problemas no meu código ao utilizar a função BACKGROUND COLOR do CSS

Sou novato em programação WEB, então todo meu código esta vindo de um tutorial do Youtube.

resumidamente, meu objetivo era que meu site ficasse desta forma (1), porém esse fundo preto, que seria o cabeçalho não sai (2):

(1)

(2)

Eu realmente não tenho palpites do erro, pois já refiz e o resultado foi o mesmo. Esses são os códigos (HTML & CSS)

HTML:

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

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1">
        <link rel="stylesheet" href="C:\Users\XXX\OneDrive\Área de Trabalho\bebop\css\main.css"/>
            <title>Bebop</title>
</head>
<body>
    <header class="menu principal">
        <div class="cabecalho">
            <div class="logo">
            <img src="https://images2.imgbox.com/e2/27/RvJteVIV_o.png" width="100"/>  
            </div>
                <div class="redes sociais"> <!--Não utilizado-->
                </div>
        </div>
    </header>
</body>
</html>

CSS:

.cabecalho {
    background-color: #747474;
}

Caso necessário, esse é a parte do tutorial onde que ele faz este cabeçalho: (até 23:42)

Grato desde já!

Matheus Dutra · 21 de maio de 2022

1-

<link rel="stylesheet" href="C:\Users\XXX\OneDrive\Área de Trabalho\bebop\css\main.css"/>

Se você salvar o arquivo do CSS na mesma pasta do seu arquivo HTML, você não precisa colocar o caminho para ele seguir, você pode simplesmente colocar o nome do arquivo.

Exemplo:

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

"style.css" é o nome que dei para o arquivo CSS.

Agora olhe:

Pronto. Está funcionando.

O problema estava no link do CSS, faça do jeito que eu falei, que é uma prática melhor.

Aliás, você pode ver os erros de compilação no console, apertando F12, na página web:

E, como você está programando no VSCode, acredito, instale a extensão "Live Server" e "Live Sass Compiler" no seu VSCode, e ative o auto save.

Também é interessante instalar a extensão "Dracula Theme", ela deixa uma aparência melhor, que ajuda principalmente códigos grandes.

kkcaio · 21 de maio de 2022

Funcionou! Obrigado amigo!!!

Entrar

CSS Erro no Background Color - CSS

Posts recomendados

kkcaio

Matheus Dutra

kkcaio

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos