Una de las cosas más sencillas cuando queramos dar formato al texto será la de centrar el texto. Esto era más o menos sencillo en HTML mediante la etiqueta center. Si bien, esta etiqueta quedo obsoleta con la llegada de las hojas de estilo CSS. Así que vamos a ver cómo podemos centrar texto con CSS en tu página web.

Dentro de las propiedades de CSS que nos permiten modificar el texto aparece una propiedad que se denomina text-align, la cual nos permitirá alinear el texto en la posición que necesitemos. En el caso que queramos tenerlo centrado el valor a asociar es «center».

Lo que tendremos es que definir una clase con esta propiedad. Por ejemplo, en este caso hemos definido una clase que hemos llamado centrado:

.centrado{
  text-align:center;
}

Ahora solo nos quedará aplicar esta clase al texto que tengamos dentro de nuestra página web. Para aplicar un estilo hay que utilizar el atributo class de un elemento HTML.

Para nuestro ejemplo hemos utilizado un elemento p, el cual representa a un párrafo y lo hemos aplicado de la siguiente forma.

<p class="centrado">Texto centrado</p>

El texto aparecerá de la siguiente forma:

Texto Centrado

Como has podido comprobar es muy sencillo el código para poder centrar texto con CSS en tu página web y aplicarlo a las partes de tu código HTML dónde lo necesites, reutilizando la misma clase.

De igual manera puedes investigar el resto de valores que tiene la propiedad text-align ya que estos nos permiten manejar el texto de muchas formas y así podemos alinearlo a la derecha, justificarlo en todas las líneas o justificarlo en todas las líneas menos la últimas,… ¿Nos cuentas en los comentarios qué has podido hacer con la propiedad text-align? o ¿Qué te gustaría saber a la hora de justificar la alineación del texto?

En las primeras versiones del HTML apareció el elemento u la cual nos permitía subrayar texto en la web de forma muy sencilla. Pero en posteriores versiones del HTML dicha etiqueta ha quedado obsoleta, pasándose ahora a realizar el subrayado de texto mediante CSS. En este artículo vamos a ver cómo podemos subrayar texto en CSS.

Ojo, que el elemento u haya quedado obsoleto no significa que no vaya a funcionar en nuestros navegadores, ya que la compatibilidad hacia atrás está asegurada. Simplemente que no es muy recomendable utilizarlo. Y es mejor pasar a realizarlo con CSS.

Para poder subrayar texto en la web con CSS lo primero que deberemos hacer es crearnos una clase. Dicha clase se la asignaremos, posteriormente, a la parte o partes de nuestra página que queramos subrayar. En este caso hemos creado la clase subrayado. No es que hayamos sido muy originales. :-D

<style>
 .subrayado{...}
<style>

Lo siguiente que tenemos que saber es que el atributo que nos permite personalizar el texto es text-decoration. La sintaxis de text-decoration es la siguiente:

text-decoration : <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

En este caso el valor que se le asigna al text-decoration-line al subrayado es el de «underline». De esta forma nuestra clase CSS quedaría de la siguiente forma:

.subrayado{
  text-decoration:underline;
}

Ahora solo nos quedará el aplicar el estilo CSS a una parte de nuestra página web. Para ello deberemos de utilizar el atributo class de algún elemento HTML. En nuestro caso lo haremos mediante el bloque en linea span.

Veamos como quedaría la línea de código:

<span class="subrayado">Texto subrayado con CSS</span>

Espero que os haya gustado y sobre todo que os sea útil este ejemplo sobre cómo subrayar texto en CSS.