La regla-at @import
La declaración @import permite importar una hoja de estilos externa dentro de otra hoja de estilos.
La sintaxis
El url a utilizar puede aparecer dentro de una anotación funcional url(), o sencillamente entre comillas:
@import url(ruta/estilos.css); @import 'ruta/estilos.css';
La posición dentro de una hoja de estilos
Las declaraciones @import tienen que preceder cualquier otra regla de la hoja de estilos, con una excepción: puede ser precedida y tiene que ser precedida por la declaración @charsert.
@charset "utf-8"; @import url(ruta/estilos.css);
@import y @media
Tampoco puede ser utilizada dentro de un bloque @media, aunque sí es posible importar una hoja de estilos externa para ser utilizada con un cierto tipo de media.
@import url(estilos/print.css) print;
. . . .
@media print {
/* las reglas CSS van aquí */
}Para tener en cuenta
La declaración @import puede tener un efecto negativo en el rendimiento de la página.
Algunos ejemplos
@import url("print.css") print;
@import url("speech.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import 'https://fonts.googleapis.com/css?family=Raleway:400)';