tutorial de HTML

Para poder utilizar hojas de estilo y sacarles el máximo provecho es indispensable entender cuál es la estructura de un documento HTML.

Podemos imaginarnos que una página web es un conjunto de cajas (bloques) metidas una dentro de la otra, siendo la más 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 jerarquía, los elementos padre son los contenedores y los elementos hijos los contenidos:

<DIV> elemento padre
    <Algún 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 revés.

Como la etiqueta BODY engloba a las demás, si le asignamos un estilo determinado, todos los elementos que estén dentro de la página heredarán este estilo. Por ejemplo:

BODY {background-color: #000000;
      color: yellow;
      margin: 20px;
}

Si colocáramos esa definición dentro de una etiqueta STYLE en el HEAD de nuestra página, esta se mostraría con fondo negro, letras amarillas y márgenes 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 están entre las llaves.

SELECTOR {propiedad: valor}

Los selectores pueden ser aún más complejos; los selectores contextuales permiten aplicar reglas de estilo a elementos insertados dentro de otros. En este ejemplo, la regla se aplicaría a los elementos STRONG que estén incluidos (hijos) en un elemento UL (padre):

UL STRONG {color: red}

Todos los elementos STRONG que no estén contenidos dentro de un elemento UL no serán afectados por la regla.

Esto mismo puede hacerse mucho más específico. En este ejemplo se aplicará la regla sólo 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 inclusión global de estilo a las distintas etiquetas puede no ser suficiente ya que, muchas veces, necesitamos que algunas tengan ciertas características 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 características:

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 página, 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 anteponiéndole un punto.

.clase {propiedad: valor}

Por ejemplo, podemos definir una clase genérica 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 página y de esta manera, lo diferencia del resto.

Para crear una regla de estilo de este tipo, debemos utilizar el carácter # y luego el nombre del identificador:

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

Y la usaríamos así:

<div id="algoespecial">
    [... el texto se vería 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 página (el footer, la barra de navegación, 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, podríamos 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 sólo 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 instrucción:

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 definición:

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 presentación. 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 carácter 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 ratón pasa por encima del vínculo, 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 verán los vínculos de acuerdo a cómo se actúe 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 línea y a la primera letra de un párrafo:

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 línea son rectángulos y que cada rectángulo 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 rectángulo 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 línea ocupan una o varias líneas del texto de un elemento en bloque. En una misma línea puede haber varios elementos en línea y, en general, no se puede especificar su tamaño pero si sus márgenes, bordes y rellenos.

En cualquier sitio de las hojas de estilo se pueden añadir comentarios siempre que se encuentren escritos entre los caracteres /* y */:

/* color verde cabeceras de nivel 1 */
H1 {font: 20px bold; color=#00FF00}