body { background-color: indigo; color: white; font-family: Arial, sans-serif; margin: 0; padding: 0; }
- Estilizando com cores e formatos Objetivo: Criar estilos baseados em um design do Figma. Arquivo CSS (style.css):
css
body { background-color: #f4f4f4; color: #333; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; }
h1 { color: #4caf50; text-align: center; margin-top: 20px; font-size: 2.5rem; }
button { background-color: #6200ea; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease-in-out; }
button:hover { background-color: #3700b3; }
- Personalizando a página com CSS Objetivo: Adicionar cores ao cabeçalho, parágrafo e rodapé. Arquivo CSS (style.css):
css
header { background-color: #282c34; color: white; text-align: center; padding: 20px; }
p { color: #444; font-size: 1.2rem; line-height: 1.5; margin: 20px; }
footer { background-color: #20232a; color: #61dafb; text-align: center; padding: 10px; }
- Aplicando estilos com CSS (três arquivos diferentes) Formal e elegante (formal.css): css
body { background-color: #f8f9fa; color: #212529; font-family: 'Times New Roman', serif; margin: 0; padding: 20px; } h1 { color: #343a40; text-align: center; text-transform: uppercase; } Colorido e divertido (divertido.css): css
body { background-color: #ffeb3b; color: #1e88e5; font-family: 'Comic Sans MS', cursive; margin: 0; padding: 20px; } h1 { color: #f44336; text-align: center; text-shadow: 2px 2px #000; } Minimalista e limpo (minimalista.css): css Copiar Editar body { background-color: white; color: black; font-family: Arial, sans-serif; margin: 0; padding: 20px; } h1 { font-size: 2rem; text-align: center; }
- Personalizando Links Objetivo: Estilizar links para destacá-los. Arquivo CSS (style.css):
css Copiar Editar a { color: #6200ea; text-decoration: none; font-weight: bold; }
a:hover {
color: #3700b3;
text-decoration: underline;
transition: color 0.3s ease-in-out;
}
mas mudei ideia durante passei para rosa pois gosto
