Cómo centrar un párrafo de la página web

Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera, pero por lo pronto hemos aprendido ya algunas cosas interesantes. El aspecto de la web conseguida hasta ahora no está mal del todo, pero se le echa en falta por lo menos el conseguir centrar algunos párrafos.

Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como siempre a nuestra grandiosa Hoja de Estilos.

Crear un estilo centrado

La propiedad en CSS que define la alineación de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify (justificado).

Si quisieramos que todos los párrafos aparecieran centrados, bastaría con poner en la Hoja de Estilo esta línea:

p {text-align:center;}

El problema de esto es que nos centra TODOS los párrafos y seguramente no queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo.

Por ejemplo, podríamos crear un nuevo tipo o clase de estilo que podemos llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la página le indicamos a un párrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.

Crear una clase de estilo

Abrimos la Hoja de Estilo y escribimos esta línea:

.centrado {text-align:center;}

Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuación entre los corchetes hemos dado la propiedad de centrado.

Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas:

- Siempre en minúsculas.

- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y números.

- Nunca empezar el nombre con un número.

- Si necesitas separar el nombre en dos o más palabras usa guiones medios "nombre-nombre", nunca bajos "nombre_nombre".

Bien, una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.html para centrar algunos párrafos.

Centrar párrafos en el Html

Como recordarás, todos los párrafos empiezan con la etiqueta <p>. Pues es dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos así) la clase de estilo que queremos que tome.

Vamos por ejemplo a centrar el párrafo donde ponemos "Bienvenidos...". Para ello vamos a la vista del código html del index y modificamos esa etiqueta <p> dejándola así:

<p class="centrado"> Bienvenidos a mi página web. Muy pronto estará lista!</p>

Si ahora haces vista previa o "Overview" desde el Html-Kit, verás como este párrafo aparece ahora centrado. Fácil, verdad?

A partir de ahora, cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado" dentro de la etiqueta de inicio en su código Html.

Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, más el nombre, y se indica en el html con class="nombre" (aquí sin el punto). Estas cosas no las sabe cualquiera, no te creas... estás empezando a ser un Webmaster de verdad!