praticando | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

do HTML, adicione a tag para conectar o CSS:

html
Copiar
Editar

✅ 2) Definindo estilos básicos no CSS No seu style.css, coloque:

css
Copiar
Editar
body {
background-color: indigo;
color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
Isso deixará o fundo indigo e o texto branco.

Estilizando com cores e formatos (baseado em design do Figma)
Vamos estilizar elementos principais com cores, bordas e botões:

css
Copiar
Editar
h1 {
color: #ffd700; /* Dourado */
font-size: 2.5em;
text-align: center;
}

p {
color: white;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}

button {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
Personalizando cabeçalho, parágrafo e rodapé
css
Copiar
Editar
header {
background-color: #282c34;
padding: 20px;
text-align: center;
color: white;
}

footer {
background-color: #1c1c1c;
color: white;
padding: 15px;
text-align: center;
}
Criando três temas diferentes com CSS
a) style-formal.css – Elegante:
css
Copiar
Editar
body {
background-color: #f4f4f4;
color: #333;
font-family: 'Georgia', serif;
}
b) style-divertido.css – Colorido e divertido:
css
Copiar
Editar
body {
background-color: #ffccff;
color: #003366;
font-family: 'Comic Sans MS', cursive;
}
c) style-minimalista.css – Limpo e leve:
css
Copiar
Editar
body {
background-color: #ffffff;
color: #000000;
font-family: 'Helvetica', sans-serif;
}
Para trocar entre eles, mude a linha no HTML:

html
Copiar
Editar

✅ 6) Personalizando Links css Copiar Editar a { color: #00ffff; /* Ciano claro */ text-decoration: none; font-weight: bold; }

a:hover {
color: #ff69b4; /* Rosa choque */
text-decoration: underline;
}

Oi, Vanessa! Como vai?

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

Você trouxe uma organização muito clara na aplicação dos estilos CSS, especialmente ao separar os temas por arquivos diferentes e detalhar as propriedades aplicadas. Isso mostra atenção à estrutura e à personalização visual.

Uma dica interessante para o futuro é usar :root para criar variáveis de cor reutilizáveis em temas diferentes.
Veja este exemplo:


:root {
  --cor-fundo: #ffffff;
  --cor-texto: #000000;
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

Esse código define variáveis que facilitam ajustes rápidos nas cores do projeto.

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