Ejercicio 5 — CSS externo

En este ejercicio se pone en práctica el uso del CSS externo, que consiste en enlazar un archivo .css separado desde el documento HTML mediante la etiqueta <link>. Este método permite reutilizar estilos en múltiples páginas y separar completamente la estructura del diseño.

Enunciado

Haz una copia del fichero del ejercicio anterior con nombre Ejercicio4.html en el que cambiarás la forma de incluir código CSS para hacerlo con las etiquetas style de manera interna. ¿Qué ventaja encuentras en hacerlo de esta manera? Coméntalo dentro de las etiquetas style utilizando comentarios CSS.

Código HTML

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejercicio 2.5 - Estilos internos</title>

  <link rel="stylesheet" href="Ejercicio5.css">
</head>
<body>
  <h1>Bienvenido al ejercicio 5</h1>

  <p>Párrafo de ejemplo con estilo externo</p>
</body>
</html>

Código CSS

/* 
  Ventajas del CSS externo:
  - Se puede aplicar la misma hoja de estilo a múltiples páginas.
  - Permite separar completamente la estructura (HTML) del diseño (CSS).
  - Mejora la velocidad de carga al almacenar en caché la hoja de estilo.
*/

h1 {
  color: green;
}

p {
  color: red;
}

Puedes visualizar el resultado final de este ejercicio en el siguiente enlace:

🚀 Ver resultado del ejercicio