1
resposta

[Dúvida] Projeto CSS - Duvida

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">
    <title>Potifolio de Stephanie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
      <h1>Bem-vindo ao meu site</h1>
      <p>Eleve seu negócio digital a outro nível com um Front-end de qualidade!</p>
    </header>
    <main>
        <h2>Stephanie Monteiro</h2>
        <img src="Imagem.png" alt="Foto profissional figma">
        <p>Olá! <strong>Sou Stephanie</strong>, designer e desenvolvedora Front-end com especialidade em React, HTML, CSS e Figma. Foco na criação de interfaces organizadas, responsivas e bem estruturadas. Tenho atenção aos detalhes e pensamento analítico, o que me permite evoluir rapidamente na área de tecnologia. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="http://127.0.0.1:5500/index.html">Instagram</a>
        <a href="http://127.0.0.1:5500/index.html">Github</a>
    </main>
    <footer>
        <p><strong>© 2026 - Desenvolvido por Stephanie</strong></p>
    </footer>
</body>
</html>

CSS:

body {
    background-color: rgb(48, 57, 87);
    color: white;
    
}
img {
    max-width: 100%;
    height: auto;
}

Como posso linkar a configuração da imagem no CSS para o HTML?

1 resposta

Olá, Stephanie, como você está?

Pelo que vi no seu código, você já fez o passo principal: a tag <link rel="stylesheet" href="style.css"> já está presente no seu HTML. Isso significa que qualquer estilo que você criar no arquivo style.css será aplicado automaticamente aos elementos correspondentes no seu HTML.

No seu caso, como você quer estilizar a imagem, você já criou um seletor direto para a tag img no CSS. Para garantir que tudo funcione corretamente, deixo aqui dois pontos importantes:

Certifique-se de que o arquivo de imagem na sua pasta se chama exatamente Imagem.png (com o "I" maiúsculo), conforme você escreveu no src da sua tag img.

Se você quiser que esse estilo se aplique apenas a essa imagem e não a todas as imagens que você venha a ter no site, você pode usar uma classe:

  • No HTML:
<img class="foto-perfil" src="Imagem.png" alt="Foto profissional de Stephanie">
  • No CSS:
.foto-perfil {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Exemplo de um novo estilo */
}

Dessa forma, o CSS "conecta" com o HTML através do nome da classe que você definiu.

Espero ter ajudado!

Bons estudos!

Sucesso

Imagem da comunidade