Opciones

Search:

Home

Apuntes de CSS

Actualizado el 14-01-2007
versión para imprimir

Formas de añadir estilos a las páginas Web.

Las formas de incluir estilos en un documento HTML son variadas. Veamos un ejemplo:

<html>
<head>
<title>título de la pagina</title>

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

  <style type="text/css">
  @import url("http://miweb/otroestilo.css");
  h1 { color: red; }
  </style>

</head>
<body>

<h1>La cabecera es roja</h1>
<p style="color: green">mientras esta línea es verde.</p>

</body>
</html>

El ejemplo enseña hasta cuatro formas de combinar estilo y HTML:

Mediante links, es decir enlazando a un archivo .css externo. Este es el sistema mas ortodoxo, segun la filosofía de las CSS, pues separa totalmente lo que es contenido (en el documento HTML) de lo que es forma (en el archivo CSS).
Incluyendo la definición de los estilos dentro de la propia página Web, en la cabecera (<head> ...</head>. Este método, que tambien respeta la separación de forma y contenido, es el indicado cuando se quiere definir un estilo para una sola página.
Mediante definición de estilos singulares dentro de la página HTML, que definen la apariencia de una sola etiqueta HTML, o de un grupo de etiquetas, o de un párrafo, dentro de la página. Este método se denomina inline
Importando estilos definidos fuera de la pagina. Similar al link, la instrucción @import se incluye dentro de las etiquetas STYLE, en primer lugar, y antes de cualquier otra regla de estilo que queramos incluir.

Los métodos posibles no son excluyentes, ya que pueden combinarse, estableciendo un archivo con estilos genéricos para todo el sitio Web, y estilos particulares para páginas o párrafos determinados, dentro de los archivos HTML. A continuación, los veremos con mas detalle.

Enlazar el estilo desde un archivo externo

Para definir el estilo de una página web desde un archivo externo, debe crearse un archivo de texto, conteniendo las definiciones, y archivarlo sin formato, con la extensión *.css.

Una vez creado, basta incluir un link a ese archivo .css desde cada página que deba seguir ese estilo. De esta forma, una misma librería de estilos puede aplicarse a cualquier número de paginas web, simplemente incluyendo en cada una de ellas el link correspondiente.

Como cualquier link, la localización del archivo CSS puede ser absoluta o relativa, dependiendo de su ubicación dentro del propio sitio web, o en otra dirección.

El link siempre debe insertarse dentro de las etiquetas HEAD del encabezamiento de la página Web:

<head>
....

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

Donde miestilo.css es el archivo que contiene las definiciones de estilo. En este caso se trata de un link relativo, ya que se supone que 'miestilo.css' está ubicado en el mismo sitio y directorio que las páginas a las que afecta.

Tambien son posibles los links absolutos:

<head>
....

<link rel="stylesheet" href="http://www.misitioweb/miestilo.css" type="text/css">
</head>

Vamos a diseccionar nuestro link:

El atributo rel se usa para definir la relación entre el archivo enlazado y el documento HTML.

El atributo opcional type se usa para especificar el tipo de archivo: "text/css" para una hoja de estilo en cascada normal, "text/javascript" si es un script, etc. Con ello permitimos a los navegadores omitir los tipos de archivo que no soportan.

El link puede tener otro atributo opcional: media, que especifica el medio o medios al que se aplica la hoja de estilo. Los valores posibles mas importantes son "screen" (pantalla, valor por defecto), y "print", para salida a una impresora

El archivo *.css es de texto simple, por ello necesitaremos un editor capaz de escribir texto sin formato.

Dentro de nuestro archivo css NO deben incluirse las llaves <> de las etiquetas HTML. Los comentarios encerrados entre los caracteres /* ... */ si son admisibles, pero no puedes incluir comentarios html:

Estilos para una sola página

Si simplemente queremos definir reglas de estilo para una sola página, podemos usar, en lugar del link externo, las etiquetas <style> </style> al comienzo del documento, dentro de las etiquetas <head>...< /head>.

La etiqueta style tiene el atributo type, que permite al navegador identificar el tipo de instrucciones que siguen. Por defecto se usa "text/css"

Dentro de las etiquetas style se incluirá un comentario HTML (), para evitar problemas de visualización en navegadores que no soportan CSS. La razón es que los navegadores antiguos ignoran aquellas etiquetas HTML que, por ser de versiones posteriores, les son desconocidas (<script>, por ejemplo, o <style>) pero visualizan el texto encerrado entre estas etiquetas. Al encerrar las declaraciones de estilo dentro de un comentario, se consigue que los navegadores que ignoran la etiqueta style ignoren también y no muestren en pantalla como texto las definiciones de estilo.

Dentro de las etiqueta <style> puede incluirse cualquier número de definiciones de estilo, y debe terminarse con una etiqueta de cierre </style>.

El siguiente ejemplo especifica estilos para las etiquetas (selectores) <body>, <h1>, <h2>, y <p>:

<html>
<head>
  <style type="text/css">
  <!--
  body {font-size: 10pt; font-family:Arial;}
  h1 {font-size: 15pt; font-family: Arial;font-weight: bold; color: maroon;}
  h2 {font-size: 13pt; font-family: Arial; font-weight: bold;color: blue;}
  p {font-size: 10pt; font-family:Arial;color: black;}
  -->
  </style>
</head>

<body>
aqui el contenido de la pagina

</body>
</html>

Estilos importados

Una hoja de estilo importada es una hoja que puede ser llamada (y combinada) con otra hoja. Esto permite, por ejemplo, crear un archivo *.css con las definiciones de estilo básicas que deberán aplicarse a todo un sitio Web, y otros archivos *.css con estilos parciales, para aplicar a elementos (o paginas) específicas que requieran estilos adicionales. En definitiva, se pueden combinar y aplicar en una misma página estilos provenientes de distintas fuentes.

Para importar una hoja de estilo se emplea la instrucción @import dentro de la etiqueta STYLE o de un archivo css enlazado. La instrucción @import debe preceder a cualquier otra declaración de estilo. Si se importan varias hojas de estilo, estos se aplican "en cascada", en el orden en que son importadas; es decir, las definiciones de estilo incluidas en la última hoja de estilo importada prevalecen sobre las anteriores.
Sintaxis:

@import url(http://www.miweb.com/parcial1.css);

@import url(http://www.miweb.com/parcial2.css);

.... otras definiciones de estilo singulares, si se desean ....

Estilos para zonas de una página: estilo en línea

Existen varias formas de actuar sobre zonas concretas del documento (secciones, párrafos, palabras, letras, y elementos de una página):

style

Puede determinarse el estilo de una etiqueta HTML, en un unico punto del documento, sin mas que añadir dentro de la misma el modificador style, seguido de la definición del estilo, que afecta exclusivamente al texto o elementos incluidos dentro de la etiqueta definida

<b style="color: red; font-size:xx-small">

Esta linea es roja y el tamaño es menor.

Notese que la definición de estilo se hace exclusivamente dentro de la propia etiqueta afectada. Nada hay que escribir en la cabecera HEAD. Ha de observarse tambien que la definición del estilo va entrecomillada. El estilo definido no afecta al texto incluido en la siguiente etiqueta.

Si un estilo designado para una etiqueta individual entra en conflicto con un estilo general de toda la página, o con un estilo definido externamente, el estilo particular prevalece para el caso concreto al que ha sido asignado. En el ejemplo anterior, podriamos haber decidido un estilo genérico para todos los elementos en negrita de la página, y un estilo distinto inline para una concreta etiqueta, definiendo este estilo dentro de la etiqueta <b> a la que quisieramos aplicarlo.

div

Tambien pueden asignarse estilos particulares a secciones enteras (aunque incluyan distintas etiquetas HTML) usando para encerrar esta sección la etiqueta <div> ... </div>, definiendo estilos que solo se aplicarán a esa sección.

El siguiente ejemplo cambia el color y tamaño de punto de un bloque de texto usando la etiqueta <div>. El mismo resultado se obtendría asignando el estilo definido a cada una de las etiquetas HTML incluidas dentro de dicha sección (en el ejemplo incluimos etiquetas <p>, <ul>, <li> etc.

<div style="font-size: 10pt; color: red">

El estilo definido afecta a toda la parte de la pagina incluida dentro de las etiquetas div.

Este texto es rojo, y tiene 10 pt.
Tambien éste.

</div>

En el siguiente ejemplo hay una nueva definición de estilos usando las etiquetas <div>, pero contiene una excepción, por el estilo definido individualmente para una concreta etiqueta, en este caso, <li>, que se superpone al estilo de la sección

<div style="font-size: 10pt; color: red">

La especificación de este estilo abarca al contenido de toda la pagina Web hasta la etiqueta div de cierre, excepto para el segundo punto de la lista, que tiene su propio estilo..

Este texto es rojo y tiene 10 pt.
```
<li style="color:blue">
```
Este texto es azul y tiene 10 pt.

</div>

span

La etiqueta <span> es similar a la etiqueta <div> en el sentido de que carece de significado propio, sirviendo para delimitar en abstracto secciones o trozos del documento, con la diferencia de que no es formadora de bloque (no se insertan automaticamente lineas en blanco delante y detrás) y suele usarse para elementos mas pequeños de una página (letras, palabras, en lugar de párrafos o secciones).

Si queremos, por ejemplo, que una sección de texto, dentro de una línea, aparezca con otro tipo de fuente, lo encerraremos entre las etiquetas <span style="font-family:'comic sans ms'"> y </span>

Aqui tenemos el ejemplo. Nota que a diferencia de div, span no implica salto de línea.

span no interrumple el flujo del texto, mientras que div convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final).

ID

El atributo ID se utiliza para asignar un único valor a un elemento, en todo el documento. Debe definirse en la cabecera HEAD del documento, dentro de las etiquetas STYLE, empleando el signo #:

<head>
<style type="text/css">
<!-- 
#z98y {font-size:1.3em;}
-->
</style>
</head>

<body>
<p id=z98y>este texto sería de 1.3 ems</p>
</body>

El uso del elemento ID y de otros estilos singulares no es muy aconsejable, en cuanto las CSS estan diseñadas, precisamente, para dotar al documento de una estructura lógica; estructura que se rompe al especificar estilos por elementos.

La utilidad esencial de ID es que identifica un elemento único en toda la página, lo que permite luego operar con él, por ejemplo, mediante scripts.

Estilos alternativos

el enlace a la hoja de estilo externa no necesita por lo general el atributo title. Sin embargo, si establecemos dos enlaces a dos hojas de estilo externas, y uno de los enlaces tiene atributo title, esa segunda hoja no se aplicará junto a la primera, sino que supone un estilo 'alternativo' que puede ser escogido por el usuario

<link rel="stylesheet" href="miestilo.css" type="text/css" >
/* hoja de estilo por defecto */

<link rel="stylesheet" href="otroestilo.css" type="text/css" 
      title="Otro estilo">
/* hoja de estilo alternativa. No se muestra si no es escogida */	
		
<link rel="stylesheet" href="otroestilo2.css" type="text/css" 
      title="Otro estilo 2">
<link rel="stylesheet" href="otroestilo3.css" type="text/css" 
      title="Otro estilo 2">
/* hoja de estilo alternativa. No se muestra si no es escogida. 
   Como tiene  el mismo titulo, se combinan ambos archivos */