Existen varias formas de insertar hojas de estilo CSS en un documento HTML. Para entender el mecanismo, es necesario aclarar primero la distinción fundamental entre hojas externas e internas.

También veremos que existen varios métodos para aplicar estilo a los elementos de una página y aprenderemos a utilizar los selectores CSS para aplicar estilo a uno o varios elementos a la vez y según una jerarquía y unas reglas de prioridad.

Definición y Sintaxis de CSS

Las hojas de estilo en cascada (Cascading Style Sheets, por sus siglas CSS) se utilizan para dar formato a los documentos web. El término “en cascada” significa que el formato de una página puede utilizar varias hojas de estilo.

Código CSS en documento HTML
Código CSS en documento HTML

Una regla CSS se compone de 2 elementos: el selector y la declaración. El selector indica el elemento sobre el que se aplicarán las declaraciones CSS.

La declaración indica las propiedades y valores que se aplicarán a este elemento. Ejemplo de sintaxis CSS:

style { /selector/
background-color: blue } /propiedades : valor/

CSS Interno, Externo e Inline

Externo se refiere a que una hoja de estilo es definida en un archivo separado del documento. Se trata de simples documentos de texto que también pueden editarse con un editor de texto y que reciben la extensión .css.

En cambio, se dice que una hoja de estilo es interna cuando su código está incluido dentro del documento HTML.

Dependiendo de si se trabaja con un CSS externo o interno, la sintaxis y los modos de inserción varían. Con respecto a estos distintos modos, se habla de hojas de estilo enlazadas (externas), incrustadas (internas) o en línea (inline).

CSS Externo

Existen dos posibilidades para cargar una hoja de estilo externa en un documento. La primera es la que hace uso del elemento HTML <link>. La declaración debe colocarse siempre dentro de la sección <head> del documento HTML:

<html>
<head>
<link href="mi_estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</html>

El elemento <link> tiene una serie de atributos cuyo significado y función es importante explicar:

AtributoDescripción
reldescribe el tipo de relación entre el documento y el fichero enlazado. Es obligatorio. Para CSS hay dos valores posibles: stylesheet y alternate stylesheet.
hrefse utiliza para definir la URL absoluta o relativa de la hoja de estilo. Es obligatorio.
typeidentifica el tipo de datos a enlazar. Para CSS, el valor que debe utilizarse es text/css. El atributo ya no es obligatorio desde la versión 5 de HTML.
mediaEste atributo se utiliza para identificar el medio (pantalla, impresión, etc.) al que debe aplicarse una hoja de estilo determinada. Es un atributo opcional.

Las ventajas de utilizar una hoja de estilo externa son las siguientes:

  • El tamaño de tu página HTML se reducirá, lo que permitirá mostrarla más rápidamente.
  • Puedes utilizar el mismo archivo CSS para diferentes páginas.

Sin embargo, hay una desventaja:

  • Hay que esperar a que la hoja de estilos se cargue completamente para que la página se muestre correctamente.

Uso de @import para cargar CSS externo

Otra forma (obsoleta) de cargar CSS externo era utilizar la directiva @import dentro del elemento <style>.

<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
[...]
</html>

El CSS debe enlazarse definiendo una URL absoluta o relativa que debe ir entre corchetes (pero veremos que se aceptan otras formas) y que la declaración debe cerrarse con un punto y coma. Sin embargo, este método de inserción de CSS externo está ya en desuso. El método preferido es el basado en el elemento link.

CSS Interno (Hojas de Estilo Incrustadas)

Las hojas de estilo internas o incrustadas son aquellas que se insertan directamente en el documento HTML mediante la etiqueta <style>. De nuevo, la declaración debe colocarse dentro de la sección <head>:

<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>

Nota

Este método permite eliminar el formato del cuerpo del documento, pero sólo se aplicará a la página en cuestión y no a todo el sitio.

Como puede verse, la parte del código que nos interesa comienza con la apertura de la etiqueta <style>. Puede tener dos atributos:

  • type (opcional);
  • media (opcional). Casi no se utiliza, pero sería algo como: <style type="text/css" media="screen">

Para ambos atributos se aplican las observaciones hechas anteriormente. Le siguen las reglas CSS y el cierre de </style>.

Las ventajas son las siguientes:

  • Como el código se inserta en una página específica, sólo esa página se verá afectada por el CSS
  • Las clases y los ID pueden utilizarse en la página en la que se encuentra el estilo CSS.
  • No es necesario crear dos archivos, uno para la hoja de estilos y otro para el código HTML.

Sin embargo, esto también puede tener varias desventajas que son las siguientes:

  • La página tardará más en cargarse ya que todo está en la misma página.
  • No será posible utilizar el estilo CSS en otras páginas que no sean en la que se encuentra el código.

CSS Inline (CSS en Línea)

La última forma de dar formato a un elemento con CSS es utilizar el atributo HTML style. Forma parte de la colección de atributos HTML definidos como globales: son aquellos atributos aplicables a todos los elementos. La declaración tiene lugar a nivel de las etiquetas individuales contenidas en la página, por lo que se habla de hojas de estilo en línea. La sintaxis genérica es la siguiente:

<elemento style="reglas_de_estilo">

Si, por ejemplo, queremos dar formato a un título h1 para que tenga texto rojo y fondo negro, escribiríamos:

<h1 style="color: red; background: black;">...</h1>

Hay dos cosas que observar en el código. Se pueden declarar varias reglas estilo como valores <style>. Deben ir separadas por punto y coma. Los dos puntos se utilizan en su lugar para introducir el valor de la propiedad a establecer. Esto se hace de la misma manera que con CSS externo e incrustado.

Jerarquía de las Hojas de Estilo

Debes saber que existe una jerarquía en la interpretación de las hojas de estilo por parte de tu navegador. Una regla de estilo (1) en línea en el código HTML, mediante el atributo “style“, prevalece sobre una hoja de estilo (2) interna, incrustada en el <head> de tu página, que a su vez prevalece sobre una regla de estilo establecida en una hoja de estilo (3) externa, anexada en el <head> de tu documento mediante una etiqueta <link>.

Así:

Una hoja de estilo externa ( llamada en el <head> por <link rel=”stylesheet” media=”screen” type=”text/css” href=”monstyle.css”/>):

img { width:120px; height:80px; } 

Puede ser modificada por una hoja de estilo interna:

<style type="text/css">
img { width:120px; height:100px; }
</style>

Y esta puede modificarse dentro del cuerpo de la página mediante un CSS inline:

<img style="width:120px; height:120px;"... >

Selectores CSS

Probablemente ya te habrás dado cuenta de que los elementos de los documentos HTML a veces tienen un atributo class o id. Ahora que sabemos dónde colocar el código CSS, veremos cómo seleccionar los distintos elementos de una página para darles formato, utilizando selectores.

El selector de etiquetas

El selector de etiquetas permite aplicar un estilo a todas las etiquetas relevantes de la página. Basta con definirlo así:

etiqueta_HTML_relevante { propiedad: valor; }

Ejemplo:

img {
anchura:120px;
altura:80px; }

En este ejemplo, todas las imágenes llamadas por la etiqueta img tendrán 80px de alto y 120px de ancho.

El selector de clase

Imaginemos ahora que queremos cambiar el tamaño de varios elementos de la página, pero sin cambiarlos todos. Utilizaremos entonces un selector de clase que se asignará únicamente a los elementos en cuestión. El selector de clase se representa por un . seguido de su nombre.

Tomemos el ejemplo de las imágenes de una moto y un coche a las que se asignan tamaños diferentes:

<body>
<img scr="imagen_auto.jpg" class="auto"> ... la imagen será de 120px x 80px
<img scr="imagen_moto.jpg" class="moto"> ... la imagen será de 120px x 120px
<div class="auto">... la etiqueta tendrá unas dimensiones de 120px x 80px

En CSS:

.auto { width:120px; height:80px; }
.moto { width:120px; height:120px; }

Varias etiquetas diferentes pueden tener la misma clase.

El selector de identificadores (ID)

Si quieres seleccionar un único elemento de la página, debes dar a la etiqueta HTML un identificador. Éste se declara en HTML de la siguiente manera:

identificador { … }

Tomemos un ejemplo con un elemento al que quieres aplicar un estilo propio:

texto_en_rojo { color: red ; }

El HTML sería así:

... <h2>título mostrado normalmente </h2>
<h2 id="texto_en_rojo">título en rojo </h2>

Jerarquía de Selectores

Puedes aplicar un estilo a un elemento siempre que esté en otro elemento. Para hacer esto, solo necesitas separar los nombres de las etiquetas con un espacio.

Para el ejemplo, sólo cambiaremos el tamaño de fuente de las etiquetas <h1> contenidas en un bloque <div>:

div h1 { font-size: 22px; }

Ahora modifiquemos los elementos <a> (enlace) contenidos en una lista no ordenada (ul li) , estos están contenidos en un <div> cuyo id es “menu“:

div #menu ul li a {
font-size: 22px; text-decoration: underline; color: green;
}

Selectores Múltiples en CSS

Es muy posible aplicar una regla de estilo a varias etiquetas diferentes sin tener que reescribir la regla. Para ello, basta con declarar varios elementos separándolos con una coma. Por ejemplo:

#articulo, #titulo, #modelo {font: 14px #000000 arial; }

Selectores de Atributos

Este método permite seleccionar una etiqueta con un atributo determinado. En lugar de diferenciar cada etiqueta por un id específico, puedes seleccionarlas por su atributo.

Modifiquemos, para el ejemplo, el estilo de las etiquetas utilizadas en los formularios:

input [type="text"] {
border: solid 2px #919191; }
input [type="submit"] {
border: solid 1px #919191;
font: black 10px arial; }

Aplicación en Pseudo-Clases

En CSS, puedes añadir detalles a los selectores utilizando pseudo-clases adjuntas a una etiqueta. Existen varios tipos de pseudo-clases:

:first-child, :last-child, :link, :hover, … .

Para el ejemplo, vamos a utilizar la pseudo-clase :hover para modificar el color de un enlace cuando el ratón pasa sobre él:

a:hover {
color: pink; }

Al pasar el ratón por encima, el enlace se volverá rosa.

El Selector Universal

Este selector está representado por un asterisco y permite aplicar una regla de estilo a todas las etiquetas del documento.

Si, por ejemplo, deseas eliminar todos los márgenes por defecto de todas las etiquetas, introducirías la siguiente regla:

* { margin: 0; padding:0; }

Consejos sobre Hojas de Estilo CSS

Llegados a este punto cabe preguntarse: ¿cuándo utilizar uno u otro? El punto de partida en la respuesta debe ser éste: los resultados en el formato del documento no cambian. Una cosa, sin embargo, es fácil de entender: el uso extensivo de hojas inline corre el riesgo de comprometer una de las principales ventajas de CSS, a saber, páginas más ligeras y sencillas. Intervenir en los meandros de una página para modificar un estilo y repetir la operación para tantas páginas de nuestro sitio como páginas haya puede llegar a ser muy frustrante. Además, su uso se considera obsoleto incluso por el W3C. En las prácticas de desarrollo más modernas, el uso de CSS en línea se limita casi siempre a reglas insertadas dinámicamente a través de Javascript.

Por lo tanto, utiliza siempre hojas de estilo externas. Recurre a las incrustadas para necesidades particulares de formato en elementos concretos de una determinada página. Abstente en la medida de lo posible de utilizar CSS en línea.

Califica este post