1. Creando y vinculando el archivo CSS
   HTML con enlace al CSS (style.css):

html
Copiar
Editar

Alura Latam - ¡Sumérgete en Tecnología!

Vas a estudiar, practicar, discutir y profundizar en una plataforma que respira tecnología. Sumérgete con profundidad y navega en otras áreas de Tecnología. Profesional en T.

© 2025 Alura Latam

css
Copiar
Editar
body {
background-color: indigo;
color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}

h1 {
text-align: center;
font-size: 2.5em;
border-bottom: 3px solid white;
padding-bottom: 10px;
}

p {
font-size: 1.2em;
line-height: 1.5;
}

button {
background-color: white;
color: indigo;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
}

button:hover {
background-color: lightgray;
}
4) Personalizando con colores, formas y estilos
Podemos tener otro CSS, por ejemplo custom.css:

css
Copiar
Editar
body {
background-color: #f0f0f0;
color: #333;
font-family: Georgia, serif;
margin: 0;
padding: 20px;
}

header, footer {
background-color: #444;
color: white;
padding: 10px;
text-align: center;
}
5) Tres estilos diferentes
Formal y elegante (formal.css):

css
Copiar
Editar
body {
background-color: #1b1b1b;
color: #f5f5f5;
font-family: 'Times New Roman', serif;
padding: 20px;
}
h1 {
text-align: center;
border-bottom: 2px solid #f5f5f5;
}
Colorido y divertido (fun.css):

css
Copiar
Editar
body {
background-color: #ffefd5;
color: #333;
font-family: Comic Sans MS, cursive;
}
h1 {
color: #ff4500;
text-shadow: 2px 2px #ffa07a;
}
Minimalista y limpio (minimal.css):

css
Copiar
Editar
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-weight: normal;
border-bottom: 1px solid #ccc;
}
6) Personalizando enlaces
En style.css, puedes agregar:

css
Copiar
Editar
a {
color: yellow;
text-decoration: none;
}

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