Teoría
Teoría

Conexión de estilos externos

Lo más frecuente es que los estilos se conecten desde un archivo externo con la extensión .css. Para ello se utiliza la etiqueta <link>. Por ejemplo:

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

El atributo href establece la dirección del archivo, y el atributo rel="stylesheet" indica al navegador que estamos introduciendo estilos y no otra cosa.

Es mejor incluir los estilos dentro de <head>, pero no es necesario. La etiqueta <link> funcionará en cualquier otra parte de la página.

En esta tarea, conectará un archivo de estilo externo, que se encuentra en external.css(siga el enlace para abrir este archivo en su navegador).

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Conexión de estilos externos</title>  </head> <body> <h1>Estilos exteriores</h1> <p>Los estilos externos son mucho más prácticos que los estilos incorporados, ya que puedes conectar el mismo archivo de estilo a muchas páginas.</p> <p>Si necesitas hacer cambios en los estilos, modificas un archivo y los cambios aparecen en todas las páginas a las que está conectado.</p> <p>En este caso habría que manipular los estilos incorporados.</p> </body> </html>

ObjetivosRealizado

Conecte un archivo de estilo externo a la página. Para ello

Añade una etiqueta <link> dentro de <head>,
set su atributo rel con el valor stylesheet
y el atributo href con el valor external.css.