En este articulo me voy a enfocar como incluir correctamente documentos CSS (hoja de estilo en cascada) a nuestros documentos HTML (lenguaje de marcado de hipertexto).

Veamos la sintaxis

<link rel="stylesheet" type="text/css" href="estilo.css">

Vemos que usamos la etiqueta link que va dentro de la etiqueta <head>.

Atributos de la etiqueta Link:

  • rel : relación de la referencia del documento actual hacia la ruta que apunta el href.
  • type : tipo de archivo hacia donde enlaza.
  • href : ruta del archivo CSS.

Vamos haber la anatomía de una regla CSS

Se componen de propiedad, valor, selector, declaración y todo eso son las reglas.

Ejemplo de un documento usando hojas de estilo externos:

Tenemos el archivo index.html 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Ejemplo de incluir un archivo CSS externo</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<body>

<h1>Mi Titulo</h1>

</body>
</html>

Ahora la hoja de estilo estilo.css

body {
background-color: green;
}

h1 {
font-family: monospace;
}

No olvidar de tener bien definida la ruta y estructura de estilo para nuestra página.

nota

Importar estilos desde otro documentos CSS

Supongamos que queremos importar un archivo CSS dentro de otra hoja d estilo CSS. Para eso usamos la siguiente sintaxis. 

 @import url('estilos_otro.css');

Como vemos, esta es la forma de llamar estilo dentro de una hoja de estilo CSS. 

/* Esto es un comentario en CSS */
@import url('estilo_otro.css');

body{
background-color: yellow;
color: red;
}
h1 {
font-style: italic;
}

Hemos aprendido a cómo llamar a una hoja de estilo CSS desde otro, y no olvidar que siempre va primero el @import

nota