2
respostas

Alterações no CSS não refletem no HTML

Terminei a parte de html e css no curso front-end e resolvi aplicar, nesse código está acontecendo o seguinte, quando aplico o css inline funciona, eu consigo reduzir o tamanho da minha capa do header normalmente, porém quando aplico no css a parte, documento do próprio css, o código não funcionar, não consigo fazer qualquer alteração de tamanho nas imagens, o que será que tem de errado? eu linkei o css no html mas não entendo, nada funciona. Agradeço a quem poder ajudar.

</head>
<body>
    <header>
        <div class="cabecalho">
            <img src="Capa site.png">
        </div>
    </header>
    <main>
        <div class="categorias">
            <li><img src="Categoria Action Figure fundo branco.png"></li>
            <li><img src="Categoria Pequenos objetos fundo branco.png"></li>
            <li><img src="Categoria Placas decorativas fundo branco.png></li>
        </div>
        <div class="tags">
            <img src="Tag One Piece.png">
            <img src="Tag Dragon Ball.png">
            <img src="Tag Naruto.png">
            <img src="Tag Boku no hero.png">
            <img src="Tag Pokémon.png">
            <img src="Tag ver todos.png">
        </div>

    </main>
    <footer>

    </footer>

</body>

CSS

.cabecalho{
 display:inline-block;
   width:60px;
   height: 60px;
}

.categorias { width:50px; }

2 respostas

Você precisa definir dentro do seu arquivo HTML que o arquivo CSS deverá ser lido e aplicado, isso está faltando no seu código atual. Um exemplo seria:

</head>
<link rel="stylesheet" href="meuarquivo.css">
    <header>
        <div class="cabecalho">
            <img src="Capa site.png">
[...]

Se certifique de que ao importar o seu css você está usando o caminho correto, que o nome também não possui erros e que você não está esquecendo a extensão de arquivo ".css" no final.

Ah, e nessa parte aqui

            <li><img src="Categoria Placas decorativas fundo branco.png></li>

você esqueceu de fechar as aspas!

obrigado já coloquei as aspas. Essa parte sobre o link para meu css está no html, eu copiei e colei na pergunta, não sei porque o início não aparece, mas o início é esse:

</head>
<body>
    <header>
        <div class="cabecalho">
            <img src="Capa site.png">
        </div>
    </header>

    aqui vai até a parte do header que aparece na pergunta inicial, e continua la, o link entre meu css e html está feito, meu css da página é o "style.css"
    mesmo assim as alterações de width não funcionam, só se for inline, mas a alteração de height no css próprio funciona.