27. Conceptos básicos de CSS

Christian Heilmann. 26 de septiembre deL 2008. Última modificación: 12 de marzo de 2017 (equipo docente del grado de Multimedia). Publicado en: externo, selectores, regla, incrustado, comentarios.

En este curso ya hemos hablado sobre el contenido de los sitios web y cómo estructurar el contenido con HTML. Esto es muy importante, ya que quiere decir que damos significado y estructura a nuestros documentos para que otras tecnologías se puedan relacionar con ellos sin problemas. La tecnología web más importante que discutiremos a continuación es el CSS (Cascading Style Sheets, hojas de estilos en cascada), que se utiliza para aplicar estilos al HTML y situarlo en la página web. En este apartado, hablaremos del CSS: qué es, cómo aplicarlo al HTML y cuál es su sintaxis básica.

Los contenidos de este apartado son los siguientes:

• 27.1. ¿Qué es el CSS?
• 27.2. Definir las reglas de los estilos
  • 27.2.1. Comentarios del CSS
  • 27.2.2. Agrupar selectores
• 27.3. Selectores avanzados de CSS
  • 27.3.1. Selectores universales
  • 27.3.2. Selectores de atributos
  • 27.3.3. Selectores de hijos
  • 27.3.4. Selectores de descendientes
  • 27.3.5. Selectores de hermanos adyacentes
  • 27.3.6. Pseudoclases
  • 27.3.7. Pseudoelementos
• 27.4. CSS abreviado
  • 27.4.1. Comparar valores individuales y abreviados
  • 27.4.2. Dar menos de cuatro valores para una propiedad abreviada
  • 27.4.3. Elegir entre utilizar una propiedad única o un valor abreviado
  • 27.4.4. Referencia abreviada
• 27.5. Aplicar el CSS al HTML
  • 27.5.1. Estilos en línea
  • 27.5.2. Estilos incrustados
  • 27.5.3. Hojas de estilos externos
  • 27.5.4. Importar hojas de estilos con @import
• Resumen
• Preguntas de repaso

27.1. ¿Qué es el CSS?

Esto se consigue al utilizar un sistema de reglas cuya sintaxis exacta veremos más abajo. Estas reglas dicen qué elementos de HTML deben tener estilos añadidos, y en cada regla enumeran las propiedades (por ejemplo, color, tamaño, tipo de letra, etc.) de aquellos elementos HTML que quieren manipular y los valores nuevos que les quieren aplicar.

El CSS no es un lenguaje de programación como JavaScript ni tampoco es un lenguaje de etiquetas como HTML; de hecho, no hay nada con lo que se le pueda comparar. Las tecnologías que definían las interfaces antes del desarrollo de la web mezclaban siempre la presentación y la estructura. Sin embargo, en un entorno que cambia tan a menudo como la web, ésta no es una manera muy inteligente de hacer las cosas, y por ello se inventó el CSS.

27.2. Definir las reglas de los estilos

Así pues, veamos un ejemplo de código del CSS y después lo analizaremos:

selector {
   propiedad1:valor;
   propiedad2:valor;
   propiedad3:valor;
}

Las partes pertinentes son las siguientes:

• El selector identifica los elementos del HTML a los que se aplicará la regla, que se identifican con el nombre del elemento en sí, como por ejemplo body, o con algún otro método, como los valores del atributo class; ya volveremos a hablar de ello más adelante.

• Las llaves contienen las parejas de propiedad/valor, que se separan entre ellas con un signo de punto y coma; las propiedades se separan de sus valores respectivos con el signo de dos puntos.

• Las propiedades definen lo que queréis hacer con los elementos que habéis seleccionado. Pueden ser muy variadas y pueden modificar el color, el color de fondo, la posición, los márgenes, la separación, el tipo de letra y muchos otros aspectos del elemento.

• Los valores son los valores a los que queréis cambiar cada una de las propiedades de los elementos seleccionados. Los valores dependen de la propiedad; por ejemplo, las propiedades que afectan al color pueden tener valores hexadecimales como #336699, valores RGB como rgb (12,134,22) o nombres de colores (en inglés) como red, green o blue. Las propiedades que afectan a la posición, los márgenes, la anchura, la altura... se pueden medir en píxeles, ems, porcentajes, centímetros u otras unidades similares.

Veamos ahora un ejemplo concreto:

p {
   margin:5px;
   font-family:arial;
   color:blue;
}

El elemento HTML que selecciona esta regla es p; esta regla se aplicará a todos los p de los documentos HTML que utilicen este CSS, a menos que haya reglas más concretas que se les apliquen, ya que en este caso las reglas más concretas tendrán prioridad sobre esta regla. Las propiedades que se ven afectadas por esta regla son los márgenes alrededor de los párrafos, el tipo de letra del texto de los párrafos y el color de este texto. Los márgenes están definidos en 5 píxeles, el tipo de letra está definido en Arial y el color del texto es azul.

Ya volveremos a hablar de todos estos detalles más adelante; el objetivo principal de este apartado es explicar las bases del CSS y no sus detalles menores.

Todas estas reglas se unen para formar una hoja de estilos. Ésta es la sintaxis más básica de CSS. Hay más cosas, pero no muchas más; probablemente, lo mejor que tiene CSS es su sencillez.

27.2.1. Comentarios del CSS

Una de las primeras cosas que hay que saber es cómo hacer comentarios en CSS. Podéis añadir comentarios poniéndolos entre /* y */. Los comentarios pueden ocupar varias líneas, que el navegador ignorará:

/* Éstos son selectores de elementos básicos */
selector{
   propiedad1:valor;
   propiedad2:valor;
   propiedad3:valor;
}

Podéis añadir comentarios entre reglas o en un bloque de propiedades; por ejemplo, en el siguiente CSS las propiedades segunda y tercera se encuentran entre delimitadores de comentario, por lo que el navegador las ignorará. Esto puede ser muy útil cuando queráis comprobar los efectos que tienen partes concretas del CSS en vuestra página web; podéis eliminarlas convirtiéndolas en comentarios, guardar el CSS y volver a cargar el HTML.

selector{
   propiedad1:valor;
   /*
   propiedad2:valor;
   propiedad3:valor;
   */
}

A diferencia de otros lenguajes, el CSS sólo tiene comentarios de bloque; los comentarios de línea no existen. Evidentemente, si lo queréis, podéis restringir el comentario a una única línea, pero deberéis seguir incluyendo los delimitadores de apertura y de cierre de comentario (/* y */).

27.2.2. Agrupar selectores

También podéis agrupar diferentes selectores. Pongamos por caso que queréis aplicar el mismo estilo a h1 y p; podríais escribir el siguiente CSS:

h1 {color:red}
p {color:red}

Sin embargo, ésta no es la manera ideal de hacer las cosas, ya que repetís información idéntica. Por lo tanto, podéis acortar el CSS agrupando los selectores con una coma; las reglas entre llaves se aplican a ambos selectores:

h1, p {color:red}

Hay varios selectores, y cada uno se corresponde con una parte diferente del etiquetado. Los tres más básicos que encontraréis más a menudo son los siguientes:

• p {}: selector de elementos.
  Se corresponde con todos los elementos de este nombre de la página (en el caso anterior, elementos p).

• .example{}: selector de clase.
  Se corresponde con todos los elementos que tienen el atributo class con el valor especificado; por lo tanto, el selector anterior se correspondería con <p class="example">, <li class="example"> o <div class="example">, o con cualquier otro elemento con class definido como example. Tened en cuenta que los selectores de clase no comprueban ningún nombre de elemento concreto.

• #example{}: selector de id.
  Se corresponde con todos los elementos que tienen un atributo id con el valor especificado; así pues, el selector anterior se correspondería con <p id="example">, <li id="example"> o <div id="example">, o con cualquier otro elemento con id definido como example. Tened en cuenta que los selectores de ID no comprueban ningún nombre de elemento y que sólo podéis tener un ID de cada por documento HTML, ya que son únicos para cada página.

En los siguientes ejemplos podéis ver los selectores anteriores en acción. Observad que cuando abrís el ejemplo en un navegador, el estilo warning se aplica tanto al punto de la lista como al párrafo (si desaparece el pico, es porque definís un color de texto blanco sobre un fondo blanco).

• "Ejemplo de selectores"

• "Selectors.css"

También podéis unir varios selectores para definir unas reglas aún más específicas:

• p.warning{}. Se corresponde con todos los párrafos cuya class es warning de class.

• div#example{}. Se corresponde con el elemento con example como atributo id, pero sólo cuando es un div.

• p.info, li.highlight{}. Se corresponde con los párrafos cuya class sea info y con los puntos de lista con el valor highlight en class.

En el siguiente ejemplo, utilizamos selectores específicos para diferenciar los diferentes estilos de advertencias.

• "Specificselectors example"

• "Specificselectors.css"

27.3. Selectores avanzados de CSS

En el subapartado anterior hemos explicado los selectores más básicos de CSS, que son los selectores de elemento, clase e identificador. Con estos selectores se pueden hacer muchas cosas, pero eso no lo es todo; hay otros selectores que permiten seleccionar elementos para aplicarlos en función de criterios más específicos:

• Selectores universales: los selectores universales se pueden utilizar para seleccionar todos los elementos de la página.

• Selectores de atributo: tal como indica su nombre, los selectores de atributos permiten seleccionar elementos en función de sus atributos.

• Selectores de hijos: si queréis seleccionar elementos concretos que son hijos de otros elementos concretos, podéis utilizar este selector.

• Selectores de descendientes: si queréis seleccionar elementos concretos que son descendientes de otros elementos concretos (no sólo hijos directos, sino también más abajo del árbol), podéis utilizar este tipo de selector

• Selectores de hermanos adyacentes: si queréis seleccionar sólo elementos concretos que siguen a otros elementos concretos, utilizad estos selectores.

• Pseudoclases: permiten aplicar estilos a elementos, no en función de qué son los elementos, sino en función de factores más raros como, por ejemplo, el estado de los enlaces (por ejemplo, si se está encima o si ya se han visitado).

• Pseudoelementos: permiten aplicar estilos a partes concretas de los elementos y no a todo el elemento (por ejemplo, la primera letra de este elemento); también os permiten insertar contenido antes o después de elementos concretos.

27.3.1. Selectores universales

Para decirlo rápidamente, los selectores universales seleccionan todos los elementos de una página para aplicarles estilos. Por ejemplo, la regla siguiente dice que todos los elementos de la página deben tener un borde sólido de color negro de 1 píxel:

* {
   border: 1px solid #000000;
}

27.3.2. Selectores de atributos

Los selectores de atributos permiten seleccionar elementos en función de los atributos que contienen. Por ejemplo, con el selector siguiente podéis seleccionar todos los elementos img con un atributo alt:

img[alt]{
   border: 1px solid #000000;
}

Tened en cuenta los corchetes.

Con el selector anterior quizá podríais definir un borde negro en torno a todas las imágenes con un atributo alt y un borde rojo alrededor de todas las demás imágenes, algo muy útil para las pruebas de accesibilidad.

Pero los atributos os pueden ser mucho más útiles si tenéis en cuenta que podéis hacer selecciones a partir del valor de los atributos, y no sólo a partir de sus nombres. La regla siguiente se aplica a todas las imágenes que tienen un atributo src con el valor alert.gif:

img[src="alert.gif"]{
   border: 1px solid #000000;
}

Quizá penséis que no es muy útil, pero puede serlo mucho para la depuración. Y aún mucho más útil es la posibilidad de seleccionar partes concretas de atributos, como por ejemplo extensiones de archivos. Y eso ya está llegando: CSS 3 introduce tres tipos nuevos de selectores de atributos que pueden hacer selecciones en función de las cadenas de texto de los valores de los atributos (al principio, al final o en cualquier punto del valor). Podéis leer el artículo de Christopher Schmitt sobre los selectores de atributos del CSS 3.

27.3.3. Selectores de hijos

Si queréis seleccionar elementos concretos que son hijos de otros elementos concretos, podéis utilizar este selector. Por ejemplo, la regla siguiente pondrá de color azul el texto de los elementos strong hijos de elementos h3, pero ninguno de los demás elementos strong:

h3 > strong {
   color: blue;
}

27.3.4. Selectores de descendientes

Los selectores de descendientes son muy similares a los selectores de hijos, excepto que estos últimos seleccionan sólo a los descendientes directos; los selectores de descendientes seleccionan los elementos pertinentes en cualquier punto de la jerarquía del elemento, y no sólo los descendientes directos. Fijémonos bien en qué quiere decir esto. Pongamos por caso el siguiente fragmento de HTML:

<div>
   <em>hello</em>
   <p>In this paragraph I will say
      <em>goodbye</em>.
   </p>
</div>

En este fragmento, el elemento div es el padre de todos los demás. Tiene dos hijos, un em y un p. El elemento p tiene un único elemento hijo, que es otro em.

Podéis utilizar un selector de hijos para seleccionar sólo el elemento em que hay inmediatamente dentro de div, de la siguiente manera:

div > em {
   ...
}

Si utilizáis un selector de descendientes de la siguiente manera:

div em {
   ...
}

entonces se seleccionarán los dos elementos em.

27.3.5. Selectores de hermanos adyacentes

Estos selectores permiten seleccionar un elemento concreto que aparece directamente después de otro elemento concreto en el mismo nivel de la jerarquía del elemento. Por ejemplo, si quisierais seleccionar todos los elementos p que aparecen inmediatamente después de los elementos h2, pero no los demás elementos p, podríais utilizar la siguiente regla:

h2 + p {
   ...
}

27.3.6. Pseudoclases

Las pseudoclases se utilizan para definir estilos, no para los elementos, sino para varios estados de los elementos. El uso más habitual que haréis de ellas es para aplicar estilos en los estados de los enlaces; por lo tanto, son los que veremos en primer lugar. La lista siguiente especifica las diferentes pseudoclases y describe el estado del enlace que seleccionan:

• :link: el estado normal por defecto de los enlaces, tal como se encuentran cuando se ven por primera vez.

• :visited: enlaces que ya habéis visitado en el navegador que estáis utilizando.

• :focus: enlaces (o campos de formularios, o cualquier otra cosa) que tienen en este momento el cursor del teclado en su interior.

• :hover: enlaces que tienen en este momento el puntero del ratón sobre ellos.

• :active: un enlace en el que se está haciendo clic.

Las siguientes reglas CSS definen que, por defecto, los enlaces sean de color azul (el valor por defecto en la mayoría de los navegadores). Al poneros encima, desaparece el subrayado del enlace. También queremos conseguir este mismo efecto cuando se selecciona el enlace con el teclado, por lo que duplicamos la regla :hover con :focus. Una vez que ya se ha visitado un enlace, éste queda de color gris. Por último, cuando un vínculo está activo, aparece en negrita para dar una pista adicional de que pasará algo.

a:link{
   color: blue;
}
a:visited{
   color: gray;
}
a:hover a:focus{
   text-decoration: none;
}
a:active{
   font-weight: bold;
}

La pseudoclase :focus también es útil como contribución a la usabilidad en los formularios. Por ejemplo, podéis destacar el campo de introducción de datos que tiene el cursor intermitente activo en su interior con una regla como la siguiente:

input:focus {
   border: 2px solid black;
   background color:  lightgray;
}

A continuación, explicaremos :first-child. Esta pseudoclase selecciona cualquier aparición del elemento que es el primer elemento hijo de su padre; de modo que, por ejemplo, la regla siguiente selecciona el primer punto (con pico o numerado) de cualquier lista y pone el texto en negrita:

li:first-child {
   font-weight: bold;
}

Finalmente, comentaremos brevemente la pseudoclase :lang, que selecciona elementos que tienen un idioma concreto definido con el atributo lang. Por ejemplo, el elemento siguiente:

<p lang="en-US">A paragraph of American text, gee whiz!<p>

Se podría seleccionar de la manera siguiente:

p:lang(en-US) {
   ...
}

27.3.7. Pseudoelementos

Los pseudoelementos tienen dos finalidades. En primer lugar, los podéis utilizar para seleccionar la primera letra o la primera línea del texto del interior de un elemento concreto. Para crear una letra capitular al principio de cada párrafo del documento, podéis utilizar la regla siguiente:

p:first-letter {
   font-weight:  bold;
   font-size: 300%
   background-color:  red;
}

La primera letra de cada párrafo aparecerá en negrita, un 300% más grande que el resto del párrafo y con un fondo rojo.

Para hacer que la primera línea de cada párrafo aparezca en negrita, podéis utilizar la regla siguiente:

p:first-line {
   font-weight:  bold; 
}

El segundo uso de los pseudoelementos es generar contenido por medio del CSS, lo cual es más complicado. Podéis utilizar los pseudoelementos :before o :after para especificar el contenido que se debe insertar antes o después del elemento que seleccionéis. Entonces podéis especificar qué es lo que queréis insertar. Como ejemplo muy sencillo, podéis utilizar la regla siguiente para insertar una imagen decorativa después de cada uno de los enlaces de la página:

a:after{
   content: " " url(flower.gif);
}

También podéis utilizar la función attr() para insertar los valores de los atributos de los elementos después del elemento. Por ejemplo, con la regla siguiente podéis insertar el destino de cada uno de los enlaces del documento entre paréntesis después del enlace:

a:after{
   content: "(" attr(href) ")";
}

Las reglas de este tipo son ideales para hojas de estilos de impresión, que son hojas de estilos que podéis escribir y que se aplican automáticamente cuando un usuario imprime una página. La ventaja para el usuario es que podéis ocultar toda la navegación que un usuario no podrá seguir en una copia impresa y utilizar la técnica anterior para que el lector pueda ver las URL a las que se hace referencia en una página.

También podéis insertar valores numéricos incrementados después de los elementos que se repiten (como por ejemplo picos o párrafos) con la función counter(); esto se explica con mucho más detalle en el artículo de dev.opera.com sobre los contadores de CSS.

27.4. CSS abreviado

Otro detalle con el que os encontraréis normalmente en este curso es el CSS abreviado. Es posible combinar varias propiedades de CSS relacionadas en una única propiedad para ahorraros tiempo y esfuerzo. En este apartado, veremos los tipos de propiedades abreviadas disponibles.

27.4.1. Comparar valores individuales y abreviados

Observad la regla siguiente para el margen (las reglas abreviadas para separación y borde funcionan de la misma manera):

div.foo {
   margin-top: 1em;
   margin-right:  1.5em;
   margin-bottom:  2em;
   margin-left:  2.5em;
}

Esta regla también se podría escribir:

div.foo {
   margin: 1em 1.5em 2em 2.5em;
}

27.4.2. Dar menos de cuatro valores para una propiedad abreviada

Un valor abreviado puede incluir menos de cuatro valores, que se aplicarán según se especifica a continuación. Los resultados se ordenan según el número de valores especificados:

1. El mismo valor se aplica a los cuatro lados, por ejemplo margin: 2px;

2. El primer valor se aplica a los márgenes superior e inferior, y el segundo a los márgenes izquierdo y derecho, por ejemplo margin: 2px 5px;.

3. Los valores primero y tercero se aplican a los márgenes superior e inferior respectivamente, y el segundo a los márgenes izquierdo y derecho, por ejemplo margin: 2px 5px 1px;.

4. Los valores se aplican a los márgenes superior, derecho, inferior e izquierdo respectivamente en el orden en el que aparecen en el CSS, tal como hemos visto antes.

En general, la manera más inteligente de proceder es especificar los cuatro valores en las propiedades abreviadas, por cuestiones de legibilidad. Este consejo también sirve para la propiedad abreviada padding.

27.4.3. Elegir entre utilizar una propiedad única o un valor abreviado

Las propiedades margin y padding abreviadas son las que se utilizan más, aunque hay situaciones en las que es mejor no utilizar las propiedades abreviadas, o como mínimo utilizarlas con mucho cuidado, como por ejemplo las siguientes:

• Sólo se debe definir un único margen. En una situación en la que sólo se debe definir una propiedad, el hecho de definir al mismo tiempo múltiples propiedades representa normalmente una violación del principio KISS (Keep It Simple, Stupid o No lo compliques, estúpido).

• El selector al que se aplican las propiedades está sujeto a muchos casos diferentes. Cuando esto suceda, y tarde o temprano acabará pasando, el inevitable pilón de valores abreviados hará que todo sea difícil de entender cuando debáis reparar o modificar la composición.

• El mantenimiento de la hoja de estilos que estáis escribiendo irá a cargo de personas con un nivel de habilidades (o de capacidad de razonamiento espacial) deficiente. Si contáis con que leerán este texto, entonces no es necesario que os preocupéis, pero quizá es mejor no suponer según qué cosas...

• Debéis cambiar un valor para un caso concreto. Esto es normalmente consecuencia de un documento o de una hoja de estilos mal diseñada, pero tampoco es una situación excepcional.

27.4.4. Referencia abreviada

1. Definición abreviada de bordes para diferentes propiedades: ya se han explicado al principio de este subapartado. Una cuestión adicional que debemos mencionar es que incluso podéis definir los valores de las propiedades del borde sólo para un único borde del elemento al que se aplica, de la siguiente manera:

   border-left-width: 2px;
   border-left-style: solid;
   border-left-color: black;

2. Definición abreviada de margen, rellenado y borde para las mismas propiedades: todas actúan de la misma manera.

   Ved también

   Podéis ver la definición abreviada de margen, rellenado y borde para las mismas propiedades en el subapartado 27.4.1 de este módulo.

3. Definición abreviada de tipo de letra: podéis especificar el tamaño del tipo de letra, el peso, el estilo, la familia y la interlínea utilizando una definición abreviada como una única línea. Pongamos por caso el CSS siguiente:

   font-size: 1.5em;
   line-height: 200%;
   font-weight: bold;
   font-style: italic;
   font-family: Georgia, "Times New Roman", serif;

   Podríais especificar exactamente lo mismo con la línea siguiente:

   font: 1.5em/200% bold italic Georgia, "Times New Roman", serif;

4. Definición abreviada de fondo: podéis especificar el color de fondo, la imagen de fondo, la repetición de la imagen y la posición de la imagen con una única línea del CSS. Imaginémonos lo siguiente:

   background-color: #000;
   background-image: url(image.gif);
   background-repeat: no-repeat;
   background-position: top left;

   Todo esto mismo se podría representar con la siguiente definición abreviada:

   background: #000 url(image.gif) no-repeat top left;

5. Definición abreviada de lista: aquí también encontramos un código similar con propiedades de una lista que permite definir los valores para el tipo de pico, la posición y la imagen en una única línea. Imaginémonos el siguiente CSS:

   list-style-type: circle;
   list-style-position: inside;
   list-style-image: url(bullet.gif);

   Esto es equivalente a:

   list-style: circle inside url(bullet.gif);

27.5. Aplicar el CSS al HTML

Hay tres maneras de aplicar el CSS a un documento HTML: estilos en línea, estilos incrustados y hojas de estilos externas. A no ser que tengáis alguna razón muy buena para utilizar uno de los dos primeros métodos, os deberíais decidir siempre por la tercera opción. Pronto veremos el motivo, que es muy obvio, pero antes hablaremos de las diferentes opciones.

27.5.1. Estilos en línea

Podéis aplicar estilos a un elemento utilizando un atributo style, de la manera siguiente:

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

Podéis ver la página ejemplo en: "CSS Basics Example"

En este atributo se listan todas las propiedades CSS y sus valores (cada pareja de propiedad/valor se separa de las demás con un signo de punto y coma, y cada propiedad se separa de su valor dentro de la pareja con un signo de dos puntos). Ésta es la manera de definir estilos con CSS.

Si abrís este ejemplo en un navegador y lo miráis, veréis que el párrafo con el atributo style es azul con el texto blanco y que tiene un tamaño diferente de los demás, como se puede ver en la figura 1.

La ventaja de los estilos insertados es que el navegador se verá obligado a utilizar estos ajustes. Cualquier otro estilo definido con otras hojas de estilos, o incluso los incrustados en el elemento head del documento, quedarán invalidados por estos estilos.

El gran problema de los estilos insertados es que hacen que el mantenimiento sea mucho más difícil de lo que debería ser. El uso de CSS permite separar la presentación del documento de su estructura, mientras que lo que hacen los estilos insertados es precisamente extender reglas de presentación por todo el documento.

Además de la cuestión del mantenimiento, tampoco se aprovecha el aspecto más potente del CSS: la cascada. En el siguiente apartado, volveremos a hablar de la cascada con detalle, pero de momento todo lo que debéis saber es que el uso de la cascada implica definir un aspecto en un lugar que entonces el navegador aplica a todos los elementos que cumplen una regla concreta.

27.5.2. Estilos incrustados

Los estilos incrustados se colocan en el elemento head del documento en un elemento style, tal como se ve en el ejemplo siguiente:

<style type="text/css" media="screen">
p {
   color:white;  
   background:blue;  
   padding:5px;
}
</style>

Podéis ver la página ejemplo en: "Embedded example"

Si abrís el enlace anterior en un navegador, veréis que los estilos definidos se aplican a todos los párrafos del documento, tal como muestra la figura 2. Mirad también el código fuente de la página del ejemplo para ver el CSS del interior de head.

La ventaja de los estilos incrustados es que no hay que añadir un atributo style en cada párrafo; los estilos se pueden aplicar a todos los párrafos con una única definición. Esto también quiere decir que si debéis cambiar el aspecto de todos los párrafos, podréis hacerlo interviniendo en un único lugar, aunque esto está limitado a un documento; pero ¿qué deberíais hacer si quisierais definir al mismo tiempo el aspecto de todos los párrafos de todo un sitio web? Utilizar hojas de estilos externas.

27.5.3. Hojas de estilos externos

Las hojas de estilos externos permiten poner todas las definiciones CSS en un archivo independiente, guardar este archivo con la extensión CSS y entonces aplicarlo a todos los documentos HTML con un elemento link en el head del documento. Consultad el código fuente de nuestra página de ejemplo, observad que head contiene un elemento que hace referencia a un archivo CSS externo y comprobad que todos los estilos definidos en el archivo CSS externo se aplican al HTML. Observemos más atentamente este elemento link:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

En este curso ya hemos hablado del elemento link. Sólo para recapitular: el atributo href apunta hacia un archivo CSS, el atributo media define en qué soportes se aplicarán estos estilos (en este caso, screen, ya que no queremos que un documento impreso tenga este aspecto) y type define qué es el recurso al que apunta el enlace (una extensión de archivo no es suficiente para determinarlo).

Ésta es la mejor situación imaginable: todas las definiciones de aspecto se encuentran en un único archivo, lo que significa que podéis hacer cambios en todo el sitio web sólo cambiando un archivo, y el navegador lo puede cargar una vez y después guardarlo en la memoria caché para todos los demás documentos que hacen referencia a éste, con lo cual se debe descargar una cantidad de datos menor.

27.5.4. Importar hojas de estilos con @import

Hay aún otra manera de importar hojas de estilos externas a archivos HTML: la propiedad @import. Esta propiedad se inserta en una hoja de estilos incrustada, de la misma manera que el CSS incrustado que hemos visto antes. La sintaxis es la siguiente:

<style type="text/css" media="screen">
   @import url("styles.css");
   ...aquí hi poden haver altres enunciats o estils CSS per importar-los...
</style>

Algunas veces veréis enunciados de importación sin los paréntesis, pero el resultado es el mismo. Otro dato que debéis tener en cuenta es que @import debe ocupar siempre el primer lugar en una hoja de estilos incrustada. Finalmente, podéis especificar que la hoja de estilos importada se aplique sólo a algunos tipos de soporte e incluir el tipo de soporte al final del enunciado de importación (esto funciona con todos los navegadores exceptuando IE 6 y versiones anteriores). El siguiente código hace lo mismo que el ejemplo anterior:

<style type="text/css">
   @import url("styles.css") screen;
   ...aquí puede haber otros enunciados o estilos CSS para importarlos...
</style>

La primera pregunta que os debéis estar haciendo es: "¿por qué necesito otra manera de aplicar hojas de estilos externos a mis documentos HTML"? Pues bien, en realidad no la necesitáis. Sólo incluimos aquí la información sobre @import por una cuestión de exhaustividad. El uso de @import en lugar de elementos link tiene unas cuantas ventajas y desventajas menores, pero éstas son muy menores, por lo cual la decisión será en realidad vuestra. Los elementos link son actualmente la manera más aceptada de hacer las cosas:

• Los navegadores antiguos no reconocen @import y, por lo tanto, lo ignoran completamente (Netscape 4 y versiones anteriores, así como IE 4 y versiones anteriores si no ponéis el nombre del archivo entre paréntesis). Por lo tanto, podéis utilizar un enunciado @import para ocultar estilos a los navegadores antiguos que los utilizarían incorrectamente. Podéis poner los estilos actualizados en una hoja de estilos externa, importarlos con @import y ofrecer algunos estilos realmente básicos que no hagan que IE o Netscape 4 se queden encallados en la hoja de estilos incrustada. Os puede ser muy útil, pero actualmente no es muy habitual que sea necesario ofrecer compatibilidad con IE/Netscape 4.

• Como ya hemos comentado, IE 6 no acepta la colocación del tipo de soporte al final de la línea de @import; por lo tanto, si queréis insertar múltiples hojas de estilos para diferentes soportes, ésta no es una buena opción.

• Podríais argumentar que el código para múltiples enunciados @import es más corto que el código para múltiples elementos link, pero esta ventaja es insignificante.

Resumen

En este apartado habéis aprendido a aplicar CSS a documentos HTML, ya sea en forma de estilos insertados utilizando atributos style, en forma de estilos incrustados en un elemento style en el head del documento o como archivos externos en un documento independiente. También habéis aprendido que esta última opción, la de enlazar una hoja de estilos externa utilizando un elemento link, es la más recomendable respecto al mantenimiento y al uso de la memoria caché. Finalmente, hemos hablado sobre la sintaxis básica del CSS y hemos explicado los comentarios, diferentes tipos de selectores y la agrupación de selectores.

En el siguiente apartado seguiremos viendo detalles de CSS y hablaremos con detenimiento de la cascada y de la especificidad de los selectores.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

1. ¿Cuáles son las ventajas y los problemas de los estilos en línea y cómo los aplicáis a un elemento?

2. ¿Qué es una regla de estilo? Describid sus diferentes componentes y su sintaxis.

3. Imaginad que tenéis unas cuantas reglas de estilos; ¿qué debéis hacer para convertirlas en una hoja de estilos externa?

4. ¿Con qué se corresponde el siguiente selector CSS: ul#nav{}?

5. ¿Cuál es la ventaja de agrupar selectores?

6. ¿Cómo podéis definir una hoja de estilos de impresión?

Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.

: :