[Exercícios] Estilizando o projeto com CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

GitHub: https://github.com/Alekzinho/Exercicios-Estilizando-o-projeto-com-CSS

1) Criando e linkando o arquivo CSS

Código em HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando o projeto com CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

2) Definindo estilos básicos

Código em CSS

body {
    background-color: indigo;
    color: white;
}

3) Estilizando com cores e formatos

Código em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando o projeto com CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Home</h1>
    </header>
    <main>
        <h1>Olá, seja Bem-Vindo!</h1>
        <p>Aqui você estará prestigiando a estilização do meu projeto.</p>
        <button>Botão</button>
    </main>
</body>
</html>

Código em CSS

body {
    background-color: midnightblue;
    color: white;
}

header {
    background-color: black;
}

button {
    border-radius: 10px;
}

4) Personalizando a página com CSS

Código em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando o projeto com CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Home</h1>
    </header>
    <main>
        <h1>Olá, seja Bem-Vindo!</h1>
        <p>Aqui você estará prestigiando a estilização do meu projeto.</p>
        <button>Botão</button>
    </main>
    <footer>
        <h3>Contato</h3>
        <span>+55 (53) 9 99999999</span>
        <span>alexolmedo@gmail.com</span>
</footer>
</body>
</html>

Código em CSS

body {
    background-color: ivory;
    color: white;
}

header {
    background-color: black;
}

main {
    background-color: lavender;
    color: black;
    border-radius: 5px;
}

button {
    border-radius: 10px;
}

footer {
    background-color: lightgray;
    color: black;
}

5) Aplicando estilos com CSS

OBS: Mantive o código HTML e CSS do exercício anterior, apenas acrescentei mais 2 arquivos CSS.

Código CSS Colorido

body {
    background-color: lightpink;
    color: black;
}

header {
    background-color: chartreuse;
}

main {
    background-color: lightgoldenrodyellow;
    color: chocolate;
    border-radius: 5px;
}

button {
    background-color: indianred;
    color: white;
    border-radius: 10px;
}

footer {
    background-color: aquamarine;
    color: indigo;
}

Código CSS Minimalista

body {
    background-color: ivory;
    color: white;
}

header {
    background-color: black;
}

main {
    background-color: white;
    color: black;
    border-radius: 5px;
}

button {
    border-radius: 10px;
}

footer {
    background-color: black;
    color: silver;
}

6) Personalizando Links

a {
    color: midnightblue;
}

Olá, Alex, como vai?

Seu exercício está muito bem desenvolvido. A estrutura dos arquivos HTML e CSS está organizada e o link com o CSS foi feito corretamente no <head>, o que garante que os estilos sejam aplicados de forma adequada.

Gostei bastante da forma como você variou os estilos entre os diferentes arquivos CSS. Isso mostra bem a flexibilidade que o CSS oferece para mudar completamente a aparência de uma mesma página HTML sem precisar alterar a marcação.

Continue compartilhando seus exercícios, Alex. É ótimo acompanhar sua evolução e o fórum está sempre à disposição para trocar ideias e ajudar no que precisar.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!