Resolução de Atividades - 08 Lista de exercícios | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Criando e linkando o arquivo CSS

<head>

    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title> Atividade 4 </title>

</head>

Definindo estilos básicos

body {

    background-color: indigo;
    color: white;
}

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

Estilizando com cores e formatos

Eu fui explorando o que o VS Code foi me dando e deu isso:

body {

    background-color: indigo;
    color: white;
}

h1 {

    color: pink;
    border: 3px pink;
    border-style: double;
    padding: 10px;
    font-style: italic;
    font-size: 50px;
    text-align: center;

}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 4) Personalizando a página com CSS

body {

    background-color: darkblue;
}

header {

    background-color: red;


}

h1 {
    color: yellow;
    font-size: 50px;
    text-align: center;

}

main {

    background-color: green;
    text-align: center;
    color: white;
}

footer {

    background-color: rgb(87, 86, 86);
    color: white;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade (Parece um papagaio)

Aplicando estilos com CSS

Estilo 1: Formal e Elegante - Usei o marrom por ser uma cor que remete ao rústico, clássico.

body {

    background-color: rgb(143, 86, 29);
}

header {

    background-color: bisque;
    font-style: italic;
    text-align: center;
    color: 
}

main {

    background-color: bisque;
    font-style: italic;
    text-align: center;
}

footer {

    background-color: rgb(102, 59, 3);
    color: white;
}

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

Estilo 2: Divertido. Usei o Rosa, para lembrar de festa, aniversário, cores vivas.

body {

    background-color: rgb(233, 86, 111);
}

header {

    background-color: rgb(175, 37, 129);
    font-style: normal;
    text-align: center;
    color: white
}

main {

    background-color: rgb(201, 54, 152);
    font-style: italic;
    text-align: center;
    color: yellow
}

footer {

    background-color: rgb(94, 3, 102);
    color: white;
}

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

Estilo 3: Minimalista e limpo. Usei o Cinza, por ser relacionado ao frio, profissionalismo, escritório.

body {

    background-color: rgb(163, 162, 162);
}

header {

    background-color: rgb(110, 110, 110);
    font-style: italic;
    text-align: center;
    color: white;
}

main {

    background-color: rgb(129, 129, 129);
    font-style: italic;
    text-align: center;
    color: white
}

footer {

    background-color: rgb(60, 58, 77);
    color: white;
}

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

Personalizando Links

body {

    background-color: rgb(0, 98, 179);
    color: white;

}

a {

    color: white;
}

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

Agora os links estão mais visíveis.

Oi, Victor! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei bastante da sua exploração de estilos! É legal ver como você testou diferentes paletas de cores e personalizou o layout com variações de fonte, alinhamento e formatação. A forma como você nomeou cada estilo dá um toque autoral que valoriza ainda mais o exercício.

Uma dica interessante para o futuro é usar a propriedade hover para deixar os links interativos. Assim, quando alguém passa o mouse por cima, a cor muda e dá mais destaque. Veja como aplicar:


a:hover {
    color: yellow;
    text-decoration: underline;
}

Esse código muda a cor do link para amarelo e adiciona sublinhado quando o mouse está sobre ele.

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