Vincular estilos al HTML
1. ESTILOS EN LÍNEA
Archivo: inline.html
<!DOCTYPE html>
<html>
<head>
<title>Estilos en línea</title>
</head>
<body>
<h1 style="color: blue;">Mi página web</h1>
<p style="font-size: 18px;">
Este es un párrafo de ejemplo.
</p>
<ul style="color: green;">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>2. ESTILOS INTERNOS
Archivo: interno.html
<!DOCTYPE html>
<html>
<head>
<title>Estilos internos</title>
<style>
body {
background-color: lightgray;
}
h1 {
text-align: center;
color: red;
}
p {
font-family: Arial;
}
</style>
</head>
<body>
<h1>Mi página web</h1>
<p>Este es un párrafo de ejemplo.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>3. ESTILOS EXTERNOS
Archivo: externo.html
<!DOCTYPE html>
<html>
<head>
<title>Estilos externos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Mi página web</h1>
<p>Este es un párrafo de ejemplo.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>Archivo: estilos.css
body {
background-color: beige;
}
h1 {
color: purple;
}
p {
border: 1px solid black;
padding: 10px;
}
ul {
font-size: 20px;
}4. ACTIVIDAD DEL ESTUDIANTE
Modificar lo siguiente:
- Cambiar colores
- Cambiar tamaños
- Agregar otro párrafo
- Agregar otro elemento a la lista
OBSERVACIÓN
Debe entender qué está modificando.
Si solo copia sin cambios o presenta evidencia de IA: nota 1.0.