Teoría
Teoría

Cómo conectar estilos externos

Lo más habitual es conectar los estilos desde un archivo externo con extensión .css. Para eso se usa la etiqueta <link>. Por ejemplo:

<head>
  <link href="external.css" rel="stylesheet">
</head>

El atributo href indica la ruta del archivo y el atributo rel="stylesheet" le dice al navegador que debe cargar una hoja de estilos.

Lo más recomendable es conectar los estilos dentro de <head>, aunque no es obligatorio. La etiqueta <link> también funcionará en otra parte de la página.

En este ejercicio vas a conectar un archivo de estilos externo ubicado en external.css(abre el enlace para ver este archivo en el navegador).

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cómo conectar estilos externos</title>  </head> <body> <h1>Estilos externos</h1> <p>Los estilos externos son mucho más prácticos que los estilos integrados, porque puedes conectar un mismo archivo a muchas páginas.</p> <p>Si necesitas cambiar los estilos, basta con modificar un solo archivo y los cambios se verán en todas las páginas donde esté conectado.</p> <p>Con los estilos integrados, este proceso tomaría más tiempo.</p> </body> </html>

ObjetivosRealizado

Conecta a la página un archivo de estilos externo. Para hacerlo:

Agrega la etiqueta <link> dentro de <head>,
asígnale al atributo rel el valor stylesheet
y al atributo href el valor external.css.