El estilo

Las hojas de estilo permiten controlar la presentacin de una pgina web determinando el espacio entre las lneas de texto, el tipo y tamao de las fuentes, el grosor de los mrgenes, los colores usados y, adems, el fomateo individual de cualquier etiqueta. Como veremos ms adelante, se pueden definir variaciones de diseo por medio de las "clases". Si necesitramo varios estilos de prrafos diferentes, se pueden definir clases para la etiqueta P, por ejemplo: P.normal, P.subrayado, P.tablas, etc. Las hojas de estilo en cascada (CSS) permiten definir las reglas que utiliza el navegador para presentar una pgina web y esto lo podemos hacer de tres maneras diferentes:

Aadiendo instrucciones de estilo a etiquetas concretas Incluyendo las instrucciones en el documento HTML de una pgina concreta Enlazando todos los documentos con un archivo de definicin del estilo

Para agregar estilo a una etiqueta concreta, debemos aadirle el atributo STYLE que contendr una serie de propiedades:
<P> Texto normal. </P> <P STYLE="margin-left: 30px; color:red"> Texto en color rojo y con sangra. </P>

Texto normal. Texto en color rojo y con sangra. De esta manera, variando la forma en que se comporta habitualmente la etiqueta P. Todo el contenido del atributo STYLE se pone entre comillas, en cada propiedad, el valor se asigna mediante dos puntos (:) y las distintas propiedades se separan con un punto y coma (;). Hay dos etiquetas que se usan junto con las hojas de estilo. <DIV> </DIV> y <SPAN> </SPAN> permiten agrupar un conjunto de elementos (prrafos, encabezados, listas, tablas, divisiones, etc) y declarar reglas de estilo para todas. Por ejemplo, el color de fondo de un conjunto de prrafos o el borde de una imagen. DIV es un elemento en bloque, por ejemplo:
<DIV> [... etiquetas varias ...] </DIV>

SPAN es un elemento en lnea, permite agrupar varios elementos en lnea seguidos dentro de un mismo bloque para despus darles formato con la hoja de estilo. A menudo, la etiqueta SPAN se emplea para asignar clases a porciones de texto.
<SPAN> [... contenido ...] </SPAN>

Si queremos cambiar la apariencia de una seccin entera (que agrupe un conjunto de etiquetas), utilizamo la etiqueta DIV, y definimos el estilo globalmente:
<DIV STYLE="font-size: 16px; color: red"> <P>Establecemos el color de la seccin como rojo.</P> <P>La fuente tendr 16 pixeles de alto.</P> <P>Y este ser igual que los otros.</P> </DIV>

Que se ver as: Establecemos el color de la seccin como rojo La fuente tendr 16 pixeles de alto. Y este ser igual que los otros. Para modificar una de las etiquetas dentro del DIV y darle un estilo diferente, podemos establecer un estilo particular para esa etiqueta:
<DIV STYLE="font-size: 16px; color: red"> <P>Establecemos el color de la seccin como rojo.</P> <P>La fuente tendr 16 pixeles de alto.</P> <P STYLE="font-size: 14px; color: black"> Pero esta ser diferente. </P> </DIV>

Establecemos el color de la seccin como rojo. La fuente tendr 16 pixeles de alto.

Pero esta ser diferente.

El estilo dentro de una etiqueta tiene precedencia sobre el estilo del bloque. Es este orden de prioridades lo que le da el nombre de estilo en cascada (hay una cascada de mtodos para aplicar los estilos, teniendo un orden de precedencia riguroso de unos sobre otros). Algo similar podemos hacer mediante la etiqueta SPAN, aunque generalmente se usa para cambiar elementos ms pequeos (palabras o letras), en lugar de bloques enteros. Por ejemplo:

<DIV STYLE="font-size: 16px; color: red;"> <P>Establecemos el color de la seccin como rojo.</P> <P>La fuente tendr 16 pixeles de alto.</P> <P STYLE="font-size: 14px; color: black;">Pero esta ser <SPAN style="font-size: 18px; color: green;">MUY</SPAN> diferente.</P> </DIV>

Establecemos el color de la seccin como rojo. La fuente tendr 16 pixeles de alto.

Pero esta ser MUY diferente.

Introducir el estilo en etiquetas concretas es sencillo de aplicar y es adecuado si slo se desea hacer algnn cambio puntual pero no es prctico ya que debemos examinar todo el documento en busca de etiquetas cuando queremos hacer algn cambio. Para definir estilos globales en un documento HTML utilizamos la etiqueta <STYLE> </STYLE> dentro de la cual escribimos las propiedades. Por regla general, est ubicada en el HEAD del documento, pero tambin puede ser incluida en el BODY. Esta etiqueta tiene un atributo TYPE que indica el tipo de medio en que va a ser publicado, en este caso ser "text/css".
<STYLE TYPE="text/css"> [lista de propiedades] </STYLE>

Este es un ejemplo de cmo se escribe un bloque de instrucciones de estilo:

<STYLE TYPE="text/css"> BODY {background: yellow; font-size: 12px; font-family: Arial; margin-left: 30px;} H1 {background: blue; font-size: 16px; font-weight: bold; color: red} H2 {font-size: 14px; font-weight: bold; color: red} DIV {background: URL(fondo.jpg)} </STYLE>

Se colocan las distintas etiquetas a las que se quiere dar un estilo y a continuacin, englobadas por los signos "{" y "}" van las distintas propiedades con sus respectivos valores, separadas por un punto y coma. Si STYLE se coloca en el HEAD, todas las etiquetas definidas tendrn el estilo indicado. Si tuvieramos muchas pginas y quisiramos darles a todas el mismo estilo, podramos crear un vnculo a un archivo de texto que contenga las definiciones. Este archivo, que generalmente tiene la extensin CSS, slo tendr las propiedades pero no las etiquetas STYLE de inicio y ciere.

Para incluirlo en la pgina utilizamos la etiqueta <LINK />:

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

Todos los mtodos pueden aplicarse a la vez en una misma pgina Podemos tener un archivo externo genrico, una o varias etiquetas STYLE y usar el atributo style en etiquetas individuales. Para evitar conflictos entre los distintos mtodos, existe un orden de precedencia, es decir, cul regla prevalecer sobre la otra si dan definiciones contradictorias. El orden de precedencia de mayor a menor es el siguiente:

los estilos definidos dentro de una etiqueta con el atributo STYLE los estilos definidos por la etiqueta STYLE los estilos contenidos en los archivos externos

http://vagabundia.bolsanegra.net/tutorialhtml/index.php

Crear estilos
Para poder utilizar hojas de estilo y sacarles el mximo provecho es indispensable entender cul es la estructura de un documento HTML. Podemos imaginarnos que una pgina web es un conjunto de cajas (bloques) metidas una dentro de la otra, siendo la ms grande, la que contiene a todas, el elemento definido con la etiqueta HTML. En este tipo de estructura, donde hay elementos contenidos en otros hay una cierta jerarqua, los elementos padre son los contenedores y los elementos hijos los contenidos:
<DIV> elemento padre <Algn texto cualquiera> elemento hijo <IMG SRC="imagen" /> elemento hijo </DIV>

Una parte fundamental de las hojas de estilo es lo que se llama herencia. Muchas de las propiedades de estilo de los elementos padre son heredadas por los elementos hijo, pero no al revs. Como la etiqueta BODY engloba a las dems, si le asignamos un estilo determinado, todos los elementos que estn dentro de la pgina heredarn este estilo. Por ejemplo:
BODY {background-color: #000000; color: yellow; margin: 20px; }

Si colocramos esa definicin dentro de una etiqueta STYLE en el HEAD de nuestra pgina, esta se mostrara con fondo negro, letras amarillas y mrgenes en los cuatro lados. Lo que est entre las llaves ({}), se llama selector (en este caso BODY), y es lo que utilizamos para definir a que parte del documento vamos a aplicar las propiedades que estn entre las llaves.
SELECTOR {propiedad: valor}

Los selectores pueden ser an ms complejos; los selectores contextuales permiten aplicar reglas de estilo a elementos insertados dentro de otros. En este ejemplo, la regla se aplicara a los elementos STRONG que estn incluidos (hijos) en un elemento UL (padre):
UL STRONG {color: red}

Todos los elementos STRONG que no estn contenidos dentro de un elemento UL no sern afectados por la regla. Esto mismo puede hacerse mucho ms especfico. En este ejemplo se aplicar la regla slo

si el elemento STRONG se encuentra en una lista de tipo UL en una celda (TD) de una tabla:
TD UL STRONG {color: green}

La inclusin global de estilo a las distintas etiquetas puede no ser suficiente ya que, muchas veces, necesitamos que algunas tengan ciertas caractersticas diferentes. Para ello recurrimos a las clases.
SELECTOR.clase {propiedad: valor}

Supongamos que definimos H2 con un color y una fuente determinada pero, de tanto en tanto, necesitamos utilizar la misma etiqueta pero con otras caractersticas:
H2.rojo {color: red} H2.verde {color: green} H2.azul {color: blue}

Para crear una clase, agregamos un punto al selector y un nombre nico. Luego, en la pgina, podemos utilizar cualquiera de ellas, agregando el atributo CLASS a la etiqueta:
<H2 CLASS=rojo> Encabezado de color rojo. </H2> <H2 CLASS=verde> Encabezado de color verde. </H2>

Las clases pueden no estar asociadas a una etiqueta sino que pueden ser independientes. Para esto, simplemente escribimos su nombre anteponindole un punto.
.clase {propiedad: valor}

Por ejemplo, podemos definir una clase genrica para textos en color rojo con esta clase:
.rojo {color: red}

Y utilizar con cualquier etiqueta:

<P CLASS="rojo">Este texto ser rojo.</p> <P>Pero este texto no.</p>

Algo similar se logra por medio del atributo ID (identificar). Las clases permiten que apliquemos las mismas propiedades a diferentes elementos, en cambio, ID, le da un nombre (identificador) nico a un elemento de la pgina y de esta manera, lo diferencia del resto. Para crear una regla de estilo de este tipo, debemos utilizar el carcter # y luego el nombre del identificador:

#algoespecial {color : white; font-size: 16px;}

Y la usaramos as:
<div id="algoespecial"> [... el texto se vera en blanco y de 16 pixeles de alto ...] </div>

Aunque los identificadores pueden utilizarse en cualquier momento, lo razonable es reservarlos para identificar reas importantes de la pgina (el footer, la barra de navegacin, el encabezado, etc) Supongamos que atribuimos los mismos atributos a diferentes etiquetas:
H1 {font-size: 16px; font-weight: bold;} H2 {font-size: 16px; font-weight: bold;} H3 {font-size: 16px; font-weight: bold;}

Para simplificar, podramos agruparlos, separando cada selector con una coma:
H1, H2, H3 {font-size: 16px; font-weight: bold;}

Algunas propiedades admiten dos tipos de sintaxis, la primera, afecta slo a un tipo:
P {font-weight: bold; font-style: italic; font-size: 12px; font-family: Times; }

La segunda, nos permite agrupar varias propiedades en una sola instruccin:

P {font: bold italic 12px Times}

En estos casos, el orden de los atributos es importante y depende de cada propiedad. Por ejemplo, el orden de la propiedad margin es arriba, derecha, abajo, arriba, as que esta definicin:
P {margin-top: 20px; margin-right: 10px; margin-left: 30px; margin-bottom: 50px; }

Es igual que esta:

P {margin: 20px 10px 50px 30px;}

Otro tipo de selectores son las llamadas pseudo-clases. A veces es til seleccionar elementos no por su tipo sino por su presentacin. Por ejemplo, el elemento A, admite tres pseudo-clases que son link (no visitados), visited (visitados) y active (activos,). Las pseudo-clases se especifican anteponiendo el carcter dos puntos a su nombre:
SELECTOR:pseudoclase {propiedad: valor}

Hay otra pseudo-clase muy utilizada y es hover, que se activa cuando se pasa el puntero del ratn pasa por encima del vnculo, y que debe ponerse justo antes de A:active:
A:link {color: white} A:visited {color: red} A:hover {color: yellow} A:active {color: green}

De esta manera, podemos controlar la forma en que se vern los vnculos de acuerdo a cmo se acte sobre ellos. Por ltimo, tenemos los selectores llamados pseudo-elementos cuya sintaxis es similar a las pseudo-clases pero se aplican a otro tipo de etiquetas. Estos se aplican a la primera lnea y a la primera letra de un prrafo:
p:first-letter {font-size: 200%;} p:first-line {text-transform: uppercase}

Para entender las hojas de estilo debemos comprender que los elementos en bloque y elementos en lnea son rectngulos y que cada rectngulo o cuadro tiene un rea donde se ubica el contenido y opcionalmente, un borde. Entre el borde y el contenido hay un rea de relleno (padding) y entre el borde opcional y el borde real hay un rea de margen (margin) que separa los elementos en bloque entre si.

El ancho de un elemento es igual al ancho del rea de su contenido y el ancho del rectngulo es la suma de los anchos del elemento, el relleno, el borde y el margen. Lo mismo ocurre con la altura. Los elementos en bloque poseen propiedades para establecer ancho (width) y alto (height). Los elementos en lnea ocupan una o varias lneas del texto de un elemento en bloque. En una misma lnea puede haber varios elementos en lnea y, en general, no se puede especificar su tamao pero si sus mrgenes, bordes y rellenos.
Elementos en lnea Datos de caracteres Entidades de caracteres TT, I, B, BIG, SMALL EM, STRONG, DFN, CODE, SAMP KBD, VAR, CITE, ABBR, ACRONYM A, IMG, OBJECT, BR, SCRIPT MAP, Q, SUB, SUP, SPAN, BDO INPUT, SELECT, TEXTAREA, LABEL, BUTTON P H1, H2, H3, H4, H5, H6 UL, OL PRE DL, DIV, NOSCRIPT, BLOCKQUOTE FORM, HR, TABLE, FIELDSET, ADDRESS Elementos en bloque

En cualquier sitio de las hojas de estilo se pueden aadir comentarios siempre que se encuentren escritos entre los caracteres /* y */:
/* color verde cabeceras de nivel 1 */ H1 {font: 20px bold; color=#00FF00}

Las propiedades CSS

Las hojas de estilo requieren un estudio ms profundo y, seguramente, sern parte de algn otro tutorial, por ahora, veamos un resumen de las propiedades que podemos incluir. font-size establece el tamao del texto en puntos (pt), pulgadas (in), centmetros (cm), o pixeles (px)
{font-size: {font-size: {font-size: {font-size: 12pt;} 1in;} 5cm;} 24px;}

font-family establece la fuente del texto. Se pueden especificar una o varias fuentes alternativas:
{font-family: {font-family: {font-family: {font-family: Arial;} Arial, Helvetica;} Arial, Helvetica, sans-serif;} "Courier New";}

font-weight establece el espesor de la fuente (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) y dependen en las fuentes:
{font-weight: medium;} {font-weight: bold;}

font-style establece la fuente como cursiva:

{font-style: italic;}

font-variant establece una variante de la fuente. Puede ser normal y small-caps (letras minsculas similares a maysculas, pero ms pequeas):
{font-style: small-caps;}

line-height establece la separacin entre lneas, que se puede expresar en puntos (pt), pulgadas (in), centmetros (cm), pixels (px) o porcentaje (%):
{line-height: 20pt} {line-height: 150%}

color establece el color del texto de acuerdo con su valor hexadecimal o usando los nombres de colores:
{color: #33CC00} {color: red}

background destaca secciones de una pgina, estableciendo un color o una imagen de fondo:
{background: red;} {background: #6633FF;} {background: URL(URLimagen);}

background-color color del fondo en formato hexadecimal o transparent (sin valor):

{background-color: #FF00000;}

background-image especifica la imagen de fondo o none (ninguna):

{background-image: url(URLimagen);} {background-image: none;}

background-repeat indica si la imagen de fondo se repite y cmo lo hace. Los valores pueden ser repeat, repeat-x, repeat-y y no-repeat:
{background-repeat: no-repeat;}

background-attachment indica si la imagen de fondo est fija (fixed) o no (scroll):

{background-attachment: fixed;}

background-position indica la posicin inicial de la imagen de fondo:

{background-position: left;}

word-spacing establece la separacin entre caracteres. Puede tomar el valor normal o una longitud que se aade al valor normal. Puede ser un valor negativo:
{word-spacing: 1em;}

letter-spacing igual que el caso anterior:

{letter-spacing: 1cm;}

line-height establece la distancia entre las lneas de base de dos lneas sucesivas. Puede ser normal, un nmero, una longitud o un porcentaje del tamao de la fuente del elemento:
{line-height: 1.2em;}

text-decoration permite remarcar el texto. Los valores soportados son underline (subrayado), line-through (tachado), none (ninguno) e italic (cursiva):
{text-decoration: underline} {text-decoration: line-through}

text-align permite justificar los elementos HTML a la izquierda, al centro o a la derecha:

{text-align: left} {text-align: center} {text-align: right}

text-indent provoca una indentacin del texto. Se puede expresar en puntos, pulgadas, centmetros o pixels:
{text-indent: 0.5cm;}

text-transform puede ser capitalize (la primera letra de cada palabra en maysculas), uppercase (todo en maysculas), lowercase (todo en minsculas) y none (neutraliza todo):
{text-transform: uppercase;}

vertical-align establece la alineacin vertical de un elemento en lnea y puede ser baseline, sub, super, top, text-top, middle, bottom, text-bottom, o un porcentaje:
{vertical-align: middle;}

margin margin-left margin-right margin-botton margin-top establecen los mrgenes. Se pueden especificar en puntos, pulgadas (inches), centmetros o pixeles (se pueden usar valores negativos). Con margin se engloban las cuatro propiedades con cuatro valores (top, right, bottom, left):
{margin: 10px 20px 5px 15px;} {margin-left: 0.5in;} {margin-right: 0.5in;} {margin-top: 1in}

padding padding-top padding-right padding-bottom padding-left establecen el relleno y sus valores son similares a margin excepto que no pueden tomar valores negativos:
{padding: 10px 20px 5px 15px;} {padding-left: 0.5in;} {padding-right: 0.5in;} {padding-top: 1in;}

border-width border-top-width border-right-width border-bottom-width border-leftwidth establece el ancho del borde y puede ser thin (delgado), medium (mediano), thick (grueso) o una longitud. Con border-width se especifican los cuatro simultnemante:
{border-width: 1px 2px;}

border-color establece el color del borde:

{border-color: red;}

border-style indica el estilo de los cuatro bordes y ser none (ninguno), dotted (punteado), dashed (a trazos), solid (continuo), double (doble), groove (canal), ridge (cresta), inset (bajorrelieve), o outset (altorrelieve):
{border-style : inset;}

border-top border-right border-bottom border-left establece las propiedades de cada borde (ancho, color, estilo):
{border-top : 3px #000 dashed;} {border-bottom : 3px #000 dashed;} {border-right : 3px #000 double;} {border-left : 3px #000 double;}

border es un resumen de todas las propiedades para los cuatro bordes (ancho, color, estilo):

{border: 3px black double}

width especifica el ancho. Puede ser auto, una longitud, o un porcentaje del elemento padre:
{width: 100px;}

height especifica el alto. Puede ser auto, una longitud, o un porcentaje del elemento padre:
{height: 100px;}

float indica que un elemento flota a la izquierda (left), a la derecha (right) o que no es un objeto flotante (none):
{float: right;}

clear indica si un elemento puede tener objetos flotantes a sus lados. Con clear el elemento se mueve hacia abajo hasta quedar debajo del objeto que flota. Con clear:both no se permite que haya un objeto flotante a ningn lado y con clear:none se permiten objetos flotantes a ambos lados:
{clear: both;}

display indica si un elemento es en bloque (block), en lnea (inline), si es un objeto de lista (list-item) o si no debe ser representado (none):
{display: block;}

white-space establece cmo tratar a los espacios contenidos en un elemento en bloque. Con el valor normal, varios espacios seguidos se convierten en uno solo. Con el valor pre se comportan como si utilizarmos la etiqueta PRE (se conservan los espacios). Con el valor nowrap slo se producen saltos de lnea donde haya etiquetas BR:
{white-space: nowrap;}

list-style-type establece el estilo de numeracin de la lista. Puede ser: disc (un crculo relleno), circle (un crculo hueco), square (un cuadrado), decimal (nmeros), lowerroman (nmeros romanos en minscula), upper-roman (nmeros romanos en mayscula), lower-alpha (letras minsculas), upper-alpha (letras maysculas) o none (ningn marcador):
{list-style-type: disk;}

list-style-image es una variante de list-style-type que se utiliza cuando se quiere tener una imagen personalizada:
{list-style-image: url(URLimagen);}

list-style-position indica dnde se coloca el marcador y puede tomar los valores inside (interior) y outside (exterior):
{list-style-position: inside;}

list-style resume todas las anteriores (tipo, posicin, margen):

{list-style: url(URLimagen) circle;}