Otra manera de definir estilos en un archivo externo

  • Por
También podemos incluir estilos en un archivo externo con un código con la sintaxis @import url("estilo.css"). Se utiliza para definir estilos comunes cuando hay también definición de estilos específicos.

Veamos ahora otra manera de importar una declaración externa de estilos CSS: @import url("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre paréntesis. (las comillas son opcionales, pero los paréntesis son obligatorios, por lo menos, en Explorer).

Se debe incluir en la declaración de estilos global a una página, es decir entre las etiquetas <style type="text/css"> y </style>, que se colocan en la cabecera del documento.

Es importante señalar que la sentencia de importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos, algo parecido al código siguiente.

<style type="text/css"> 
@import url ("estilo.css"); 
body{ 
   background-color:#ffffcc; 
} 
</style>

El funcionamiento es el mismo que si escribiésemos todo el fichero a importar dentro de las etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del código HTML (entre las etiquetas </style>) estilos que habían quedado definidos en el archivo externo, los que se aplicarán serán los que hayamos redefinido.

Así, en el ejemplo anterior, aunque hubiésemos definido en estilo.css un color de fondo para la página, el color que prevalecería sería el definido a continuación de la importación: #ffffcc

La diferencia entre este tipo de importación del tipo y la que hemos visto anteriormente:

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

Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas básicas en el trabajo con los estilos (que se definen en un archivo a importar) y unos estilos específicos para cada página, que se definen a continuación, dentro del código HTML entre las etiquetas </style>, como es el caso del ejemplo visto anteriormente.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Ignasi Farinyes

12/9/2003
Tengo la costumbre de acabar mis definiciones de clase con el punto y coma; por ejemplo {background-color:#000022; font-size:12; }. Sé que no es necesario (html no es java) pero todo me funciona bien y mis páginas estan validadas por W3C. ¿Qué te parece?

Mythos

24/10/2004
Es sólo una pequeña corrección. En el ejemplo al final del artículo acerca de el uso de la forma <link> dice entre comillas stylesheel, mientras que es stylesheet.

Saludos.
Excelente el sitio.

maria

02/5/2005
He creado en mi página web, llamada <a href="http://es.geocities.com/documentamania_informacion"> documentamania</a>, unos estilos, que ahora quiero sacar a una hoja .css, pero me da error y no sé exactamente cómo pasar los estilos que tengo internos a una hoja externa. Si alguien puede echarle un ojo al código fuente de mi página y ayudarme, les estaría muy agradecida.

Cris

02/11/2005
Tiene un pequeño detalle:<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
@import url (&quot;estilo.css&quot;);<br />
body{<br />
background-color:#ffffcc;<br />
}<br />
&lt;/style&gt;<br />
<br />
Esta codigo le hice un copy/paste y no me funcionaba por esta linea<br />
@import url (&quot;estilo.css&quot;); ya que tiene un espacio de mas entre <br />
url(espacio)(&quot;estilo....,problema de tipeo nada mas.

Dalia

03/5/2006
Este manual de CCS me ha sido de mucha utilidad. En verdad muchas gracias.

Cesc

25/10/2006
entre url i ("estilo.css") no va espacio: url("estilo.css")

Pablo Gadino

31/5/2007
En el cabezal está bien, pero en el desarrollo del artículo dejaste un espacio entre url y el paréntesis, que hace que no marche; va todo junto.

Pau

13/10/2007
Hola!

Sigo sin entender la diferencia, a la práctica, entre importar el archivo externo css con <link> o con @import.

Mi duda es que tanto con uno como con el otro se pueden definir luego otros estilos más específicos, ¿no? Entonces cual es la diferencia? que permite hecer uno que no permita el otro?

Gracias por la atención y felicidades por la que creo es la mejor página dedicada al desarrollo web

Un saludo

carlos

06/11/2007
solo les queria comentar que hay un error en su etiqueta

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

tenia "sheel" en vez de "sheet"

cristian

02/10/2008
No quedó muy claro la diferencia entre usar un sistema y otro.Muy generica la explicacion y lleva a confusion.Se aclararía con un ejemplo.

alexa

22/10/2008
super buenos sus lecciones, tengo una pregunta espero me puedan ayudar, como puedo interpretar este tipo de estilo:
BODY {
@ChromeBg@
@FullSize@
}

es otra forma de hacer estilos y como lo puedo leer.
Gracias

archel

09/8/2010
ayudame pls
men ps mira mi problema es con eso de enlaces externos nio he podido es que simplemete no se como :
<link rel="stylesheet" type="text/css" href="hoja.css">

donde dise hoja.css he pueso en nombre de mi codigo se llama:style.css lo pongo pero no sale no entiendo ayudamen pls salu2!!!

Rubén Cortés

04/9/2013
acerca de este codigo y el funcionamiento con crome y mozilla
resulta yy psas que aplique el codigo y funcionan con explorer , pero con las versiones de crome y mozilla no funciona, por que??