Criando e linkando o arquivo CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Darth Vader</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./estilo.css">
    <link rel="stylesheet" href="./estilo2.css">
</head>
<body>
    <header>
        <h1><strong>Darth Vader</strong></h1>
    </header>
    
    <h2>Bem-vindo ao lado  da tecnológico da força!</h2>
    <p>Olá, eu sou Darth Vader, programador Front-end em treinamento. Após abandonar o Império (e o capacete por alguns instantes), decidi explorar os mistérios do desenvolvimento web.</p>
    <p>Agora estou mergulhando no universo de <strong>HTML</strong> e <strong>CSS</strong>, dominando as melhores práticas para construir interfaces que são tão poderosas quanto a Estrela da Morte.</p>
    <h2><strong>Minha Missão</strong></h2>
    <p>Eliminar a resistência, à má usabilidade! Com código limpo, acessibilidade e design responsivo, estou pronto para transformar a galáxia digital.</p>
    <h3><strong>Conecte-se Comigo</strong></h3>
    <button><a href="mailto:darth.vader@imperio.com"><strong>Email</strong></a></button>
    <button><a href="https://www.linkedin.com/in/seu-perfil" target="_blank"><strong><strong>Meu LinkedIn</strong></a></button>
    <button><a href="github.com/seu-usuario" target="_blank"><strong>Meu GitHub</strong></a></button>
    <img src="./DarthVander.jfif" alt="Darth Vader">
    <footer>
        <p><strong>&copy; 2025 Darth Vader. Todos os direitos reservados. Que o código esteja com você!</strong></p>
    </footer>
</body>
</html>

style.css

body {
   background-color: black;
    color: darkgray;

}

h1{
    color: black;
    text-shadow: 2px 2px 4px black;
    text-align: center;
    font-size: 40px;
}

button {
    background-color: darkred;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 15px;
    cursor: pointer;
    border: 2px solid black;
    box-shadow: 2px 2px 4px black;
    transition: background-color 0.3s, color 0.3s;
}

h2 {
    color: darkred;
    text-shadow: 2px 2px 4px black;
}

h3 {
    color: darkred;
    text-shadow: 2px 2px 4px black;
}

estilo.css

header {
    background-color: darkred;
    color: black
}

footer {
    background-color: darkred;
    color: black;
    text-align: center;
    padding: 3px ;
    border-top: 0px solid black;

}

estilo2.css

a {
    color: black;
    text-decoration: none;
    font-weight: bold;


}

a:hover {
    text-decoration: none;
    color: red;
}

img {
    width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Oi, Helena, tudo bem?

Que projeto incrível e divertido! Adorei a temática do Darth Vader se tornando um programador Front-end. Sua evolução desde o último projeto é super nítida!

Fico muito feliz em ver que, já nesse tópico tenha já aplicado! A estilização dos links (<a>) para parecerem botões ficou perfeita. Além disso, a estrutura do seu HTML está cada vez melhor, com o uso correto de tags como <header> e <footer>.

A ideia de separar o CSS em arquivos diferentes (style.css, estilo.css, estilo2.css) também é interessante para organizar o código. Conforme seus projetos crescerem, essa organização fará ainda mais diferença.a

Parabéns pela criatividade e pela dedicação em aplicar os novos conhecimentos!

Bons estudos!

Sucesso ✨

Garanta sua matrícula hoje e ganhe + 2 meses grátis