¿Cómo se pueden incluir estilos en un documento html?

Podemos hacerlo de tres maneras, aunque la primera de ellas, en las últimas recomendaciones de la W3C no está recomendada, como ahora veremos.

1. Añadiendo instrucciones de estilo sólo a etiquetas concretas. De esta manera tenemos el mismo problema que teníamos con HTML que para cambiar cualquier formato tenemos que cambiar cientos de etiquetas en cientos de documentos, por lo cual aunque nos permite un mayor control que el HTML, no lo recomendamos.

Se hace añadiendo el atributo style a la propia etiqueta:

<P STYLE=" font-family: tahoma, arial, sans-serif;
color: #666666; ">

2. Incluyendo las instrucciones de estilo en el encabezado de un documento HTML, tal y como vimos en el ejemplo anterior, que nos permite cambiar la apariencia de toda la página, simplemente retocando el encabezado.

<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
<!--
[bloque de instruciones de estilo]
-->
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las etiquetas que componen la página]
</BODY>
</HTML>

Cómo podéis ver, todo el código está dentro de etiquetas de comentarios html (<!– –>), al igual que se hace en javascript, y la razón es la misma. Si accede a tu página alguien utilizando un navegador que no soporta javascript, ignorará estas órdenes, en lugar de mostrarlas en pantalla.

El atributo TYPE especifica el lenguaje que vamos a utilizar para definir los estilos.

Lo malo de esta opción es que si tienes un “look” uniforme y tienes varios documentos tienes que incluirlo en todos los documentos, con el tiempo los “styles” de los diversos documentos empiezan a diversificarse y acabas con un lío monumental. Lo sé por trabajosa experiencia Razz

3. Utilizando una “hoja de estilos” externa y enlazando los documentos html a ella. De esta manera, se puede cambiar la apariencia de múltiples páginas retocando un solo fichero. Así si queremos que nuestra web tenga una apariencia uniforme, definiremos una hoja de estilos para todos nuestros documentos.

Para crear un archivo externo que podamos enlazar, utilizamos un documento de texto que guardamos con la extensión .css, por ejemplo: mi_estilo.css

Copiamos el código que antes habíamos puesto en el encabezado y lo pegamos en nuestro nuevo archivo:

<style type=”text/css”>

<!–

H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; }

P {
font-family: tahoma, arial, sans-serif;
color: #666666;
font-size: 1p2x; }
–>
</style>

Cuando se trata de enlazar con una hoja de estilos externa, no hay que poner las etiquetas <style></style> puesto que al incluirla en nuestro documento html ya le decimos que se trata de una hoja de estilos, así que mi_estilo.css nos quedaría con este código:

H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; }

P {
font-family: tahoma, arial, sans-serif;
color: #666666;
font-size: 1p2x; }

Ahora tenemos que decirle a nuestro documento html que utilice esta hoja de estilos,

Y lo hacemos mediante la etiqueta:

<LINK REL=stylesheet HREF="mi_estilo.css" TYPE="text/css">

Así que nuestro documento html nos quedaría así

<html>
<head>
<title> Ejemplo 2 con css</title>
<LINK REL=stylesheet HREF="mi_estilo.css" TYPE="text/css">
</head>
<body>

<h1>1.- Primer título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

<h1>2.- Segundo título</H1>
<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

<h1>3.- tercer título</H1>
<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

</body>
</html>

Veamos cómo queda, exactamente igual que cuando metíamos las instrucciones de estilo en el encabezado.

En nuestras páginas, podemos utilizar cualquiera de los tres métodos, o los tres estilos a la vez. Por ejemplo podemos definir unos estilos generales en una hoja externa y unos estilos particulares en el encabezado de cada documento. Por ejemplo en la hoja externa podemos establecer que todos los títulos utilicen la fuente “tahoma”. Y luego podemos tener dos documentos html distintos, podemos definir que en uno se vean en verde y en el otro en rojo.

¿Qué ocurre si utilizamos varios métodos y lo que definimos es contradictorio?

Los tres métodos de incluir instrucciones de estilos en los documentos tienen establecido una orden de precedencia, y precisamente por eso se llaman hojas de estilo en “cascada”.

Si hay órdenes contradictorias prevalece:

1. El estilo definido en la etiqueta
2. El estilo definido en el encabezado
3. El estilo definido en una hoja de estilos externa

Es decir tiene preferencia el estilo dentro de una etiqueta es el que se aplicará si los estilos definidos en el encabezado o en una hoja de estilos externa son distintos.

Por ejemplo,

  • En una etiqueta interna hemos definido que los títulos sean verdes
  • En el encabezado hemos establecido que sean rojos
  • En una hoja de estilos externa los hemos puesto negros

¿De qué color se mostrarán los títulos? Verdes

Otro ejemplo,

  • No hemos definido nada en la etiqueta
  • En el encabezado hemos establecido que sean rojos
  • En una hoja de estilos externa los hemos puesto negros

¿De qué color se mostrarán los títulos? Rojos

Este comportamiento en cascada, si lo utilizas bien puede darte mucho juego.

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s