Los tipos de alineación de elementos son varios, pero los más habituales son la alineación a la izquierda, a la derecha, al centro, superior e inferior. Vamos a practicarlas.

En el archivo pruebaCSS.html anota lo siguiente:

Hemos implementado el elemento (<span>) al que aplicaremos la clase o estilo .imgIzq, que se encargará de alinear a la izquierda la imagen.

No olvides que las imágenes, por default, se alinean automáticamente a la izquierda cuando no existe nada que les indique la forma de hacerlo. Puedes pensar que entonces no requieres alinearlas a la izquierda, siendo que lo hacen en forma "natural", ¿cierto?

Grave error. Antes de dejar a una imagen sin alineación, asegúrate que nada existe a un nivel superior (un DIV contenedor, por ejemplo) que pueda forzar su alineación en una forma diferente a la que deseas aplicar.)

Y ya que lo menciono, de hecho, nunca asignes alineación de texto o imágenes a un elemento DIV que funciona como contenedor de otros elementos... te ahorrarás bilis, creéme.

Ah, sí, por supuesto. Puedes asignar a los elementos DIV cualquier tipo de alineación para los elementos que se encuentren dentro del mismo, pero eso es algo que deberías ya haber previsto o planeado... en otras palabras, nunca hagas nada al aventón o a la carrera.

Regresemos a lo nuestro... en el archivo prueba.css procedemos a agregar nuestro código para alinear la imagen. Iniciamos estableciendo el nombre del selector:

Agregamos el código que carga la imagen, tal como hemos visto en la lección anterior:

A continuación introducimos sus dimensiones:

Y, finalmente, la hacemos flotar a la izquierda:

Y para alinearla a la derecha, en el código anterior, sólo debes remover left (que significa "izquierda"), y en su lugar colocar right ("derecha" en nuestro idioma):

Cuando utilizas el tipo de código anterior, el texto que aparezca a un costado de la imagen le rodeará.

¿Qué pasa si quieres colocar el mismo estilo a varias imagenes? ¿Debes generar un proceso similar para cada imagen a utilizar? No.

Para aplicar un mismo estilo a varias imágenes, debes definir el estilo y después aplicarlo a la etiqueta <img>. Se puede realizar de dos formas, una directamente a la etiqueta <img> que afectará la presentación en pantalla de todas las imágenes del sitio, o una específica, para un conjunto determinado de imágenes.

Para la primera, se debe colocar en el archivo pruebaCSS.html el siguiente código:

Y en el archivo prueba.css se debe colocar lo siguiente:

Con el código CSS anterior se indica que todas las imágenes de nuestro sitio web deberán contar con un borde de un pixel de ancho, en un formato sólido y con un color en gris.

Todas las imágenes se representan con la etiqueta <img>, es por esta razón que desde el archivo CSS se toma ese elemento HTML para hacerle referencia y, además, como puedes notar, carece del punto o el signo de número que antecede a los selectores para definir si son una clase o un id.

Estos son los famosos estilos o reglas globales, y se les denomina así debido a que surten efecto en todas las etiquetas para las cuales se definen. Y por ello te recomendaba evitar, en la medida de lo posible, su uso.

Para la segunda, procedemos en forma similar a la anterior, pero en el nombre del selector le precedemos con un punto, para definirle como una clase. En el archivo CSS colocamos el código:

Lo que indicamos es que, todas las clases o estilos definidos con el selector .imgPrueba deben presentar un borde, en color gris, y con una anchura de 1 pixel.

Y lo implementamos en nuestro código HTML en la forma siguiente:

Para centrar una imagen se realiza cualquier método o proceso de los anteriores, con una notable diferencia. Hagamos la prueba como una clase:

Lo que se indica es que la etiqueta o elemento HTML al que se hace referencia, se presente como un bloque. Esto con la finalidad de poder manejarlo y alinearlo. Si no aplicas esta instrucción, la imagen no se alinea al centro. Los márgenes a la izquierda y derecha se definen en forma automática (al menos no me da problemas con Firefox e Internet Explorer, sorry si utilizas uno diferente, pero desde el inicio comenté que estos dos navegadores serían la base para el desarrollo del tutorial).

En nuestro código HTML debe presentarse lo siguiente:

¡Sí! ¡Te lo dije! CSS es el que debe formatear, controlar la presentación y aplicar estilo a los contenidos de nuestras páginas. Hasta el momento has visto que no he mentido, ¡ja!

Pasemos a conocer cómo se debe estructurar, utilizando CSS, una página.