• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Dar formato al texto

Log in or subscribe for free to enjoy all this course has to offer!

Hemos llegado a un capítulo que puede resultaros muy interesante.

No, "formatear texto" no tiene nada que ver con la destrucción de todos los datos de tu disco duro. Simplemente significa que la apariencia del texto se va a cambiar (o "formatear").

No hay nada particularmente inesperado: Todavía estamos tratando el CSS y vamos a volver a utilizar lo que hemos aprendido en el capítulo anterior. Vamos a trabajar directamente en el archivo .css que hemos creado.

Este capítulo nos dará la oportunidad de descubrir muchas propiedades CSS: vamos a ver cómo cambiar el tamaño del texto, cambiar la fuente, alinear el texto, etc.

Tamaño

Para cambiar el tamaño del texto, usamos a propiedad CSS font-size. ¿Pero cómo especificamos el tamaño del texto? Aquí es donde la cosa se complica, ya que hay varias técnicas a nuestra disposición:

  • Especificar un tamaño absoluto: en píxeles, pulgadas o milímetros. Aunque este método es muy preciso, se recomienda utilizarlo solo cuando sea absolutamente necesario, ya que podríamos especificar un tamaño demasiado pequeño para algunos lectores.

  • Especificar un tamaño relativo: como un porcentaje, "em" o "ex". Esta técnica tiene la ventaja de ser más flexible. Se puede adaptar más fácilmente a las preferencias de tamaño de los visitantes.

Un tamaño absoluto

Para especificar un tamaño absoluto, normalmente se utilizan píxeles. Así que para obtener un texto de 16 píxeles de altura, tenemos que escribir esto:

font-size: 16px;

Las letras tendrán un tamaño de 16 píxeles, como se muestra en la ilustración de abajo.

Una letra de 16 píxeles de altura
Una letra de 16 píxeles de altura

Aquí tenéis un ejemplo de cómo usarlo (poned este código en vuestro archivo .css):

p
{
font-size: 14px; /* Párrafos de 14 píxeles */
}
h1
{
font-size: 40px; /* Títulos de 40 píxeles */
}

Y el resultado se muestra en la siguiente ilustración.

Varios tamaños de texto
Varios tamaños de texto

Un valor relativo

Este es el método recomendado porque el texto se adapta más fácilmente a las preferencias de todos los visitantes.

Existen varias formar de especificar un valor relativo. Puedes escribir el tamaño en palabras, así:

  • xx-small : diminuto ;

  • x-small : muy pequeño ;

  • small : pequeño ;

  • medium : mediano ;

  • large : grande ;

  • x-large : muy grande ;

  • xx-large : enorme.

Puedes probar a utilizar estos valores en tu código CSS:

p
{
font-size: pequeño;
}
h1
{
font-size: grande;
}

Sin embargo, esta técnica tiene un inconveniente: solo hay siete tamaños disponibles (porque solo hay siete nombres). Afortunadamente, existen otras opciones. Mi técnica favorita es especificar el tamaño en "em".

  • Si escribes 1em, el texto tiene un tamaño normal.

  • Si quieres que el texto sea más grande, puedes introducir un valor superior a 1, como 1.3em.

  • Si quieres que el texto sea más pequeño, puedes introducir un valor inferior a 1, como 0.8em.

Ejemplo:

p
{
font-size: 0.8em;
}
h1
{
font-size: 1.3em;
}

Hay otras unidades disponibles. Podéis probar "ex" (que funciona con el mismo principio que em pero tiene una base más pequeña) y el porcentaje (80 %, 130 %, etc.).

Fuente

Ah... La fuente... Esto puede ser complicado

De hecho, hay un problema: para que una fuente se muestre correctamente, todos los usuarios de Internet tienen que tenerla. Si un usuario de Internet no tiene la misma fuente que tú, su navegador usará una fuente por defecto (una fuente estándar) que puede que no sea lo que esperabas.

La buena noticia es que desde CSS 3, ahora es posible que el navegador descargue una fuente automáticamente. Os explicaré cómo hacer esto más adelante.

Cambiar la fuente utilizada

La propiedad CSS que nos permite especificar la fuente a utilizar es font-family. Tienes que escribir el nombre de la fuente así:

tag
{
font-family: fuente;
}

Para evitar problemas si el usuario de Internet no tiene la misma fuente que tú, se pueden especificar varios nombres de fuente, separados por comas:

tag
{
font-family: font1, font2, font3, font4;
}

El navegador intentará usar primero la font1. Si no la tiene, lo intentará con la font2. Si no la tiene, lo intentará con la font3, y así sucesivamente. Pero os preguntaréis cuáles son las fuentes más comunes que tenéis "derecho" a utilizar. 

Esta es una lista de fuentes que funcionan bien en la mayoría de los navegadores:

  • Arial ;

  • Arial Black ;

  • Comic Sans MS ;

  • Courier New ;

  • Georgia ;

  • Impact ;

  • Times New Roman ;

  • Trebuchet MS ;

  • Verdana.

En la siguiente ilustración se muestran las diferentes fuentes.

Varias fuentes
Varias fuentes

Entonces, si escribo:

p
{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

... esto significa: " Utilizar la fuente Impact o, si no se encuentra, Arial Black, o Arial, o Verdana, o si no funciona ninguna de éstas, utilizar una fuente estándar (sans-serif)".

En general, es una buena idea especificar una variedad de tres o cuatro fuentes (+ serif o sans-serif) para asegurarnos de que al menos una de ellas se encontrará en el ordenador del visitante.

Como último recurso, se suele utilizar serif, que corresponde a la fuente predeterminada (que solo se aplica si no se ha encontrado ninguna otra fuente). También existe otra fuente predeterminada llamada sans-serif. La diferencia entre las dos es que la fuente sans-serif no tiene las pestañitas de conexión en la parte inferior de las letras. Sí, es casi imperceptible. 

Utilizar una fuente personalizada con @font-face

A mi parecer la selección de fuentes es demasiado limitada.
¿Cómo puedo utilizar mi fuente favorita en mi página web?

Durante mucho tiempo, esto no era posible. Ahora, con CSS3, afortunadamente existe una forma de usar cualquier fuente en tu sitio web. Funciona bien con la mayoría de los navegadores.

Pero tened cuidado porque hay algunas complicaciones (de lo contrario, sería demasiado bonito para ser verdad):

  • El navegador del visitante tendrá que descargar automáticamente el archivo fuente cuyo tamaño de almacenamiento podría ser superior a 1 MB...

  • La mayoría de las fuentes tienen copyright, así que no es legal utilizarlas en nuestros sitios web. Por suerte, existen páginas web como fontsquirrel.com y dafont.com que nos permiten descargar una serie de fuentes libres de copyright. En particular, recomiendo fontsquirrel.com que te permite descargar paquetes para CSS3 listos para usar.

  • Existen varios formatos de archivos fuente y no todos funcionan en todos los buscadores.

Estos son los formatos de archivo fuente existentes que debéis conocer:

  • .ttf: TrueType Font. Funciona con IE9 y todos los demás navegadores.

  • .eot: Embedded OpenType. Funciona solo con todas las versiones de Internet Explorar. Es un formato registrado, desarrollado por Microsoft.

  • .otf: OpenType Font. No funciona con Internet Explorer.

  • .svg: SVG Font. El único formato soportado por teléfonos iPhone y iPads por el momento.

  • .woff: Web Open Font Format. Nuevo formato diseñado para la Red, que funciona con IE9 y todos los demás navegadores.

Para definir una fuente nueva en CSS, tienes que declararlo así:

@font-face {
font-family: 'MiSuperFuente';
src: url('MiSuperFuente.eot');
}

El archivo fuente (en este caso MiSuperFuente.eot) debe estar ubicado en la misma carpeta que el archivo CSS (o en una subcarpeta si utilizáis una ruta relativa).

Yo creía que existían varios formatos de fuente.

Sí, y además .eot solo funciona con Internet Explorer. La solución ideal es proporcionar varios formatos para la fuente: el navegador descargará el que pueda leer. Aquí tenemos la forma de especificar varios formatos:

@font-face {
font-family: 'MiSuperFuente';
src: url('MiSuperFuente.eot') format('eot'),
url('MiSuperFuente.woff') format('woff'),
url('MiSuperFuente.ttf') format('truetype'),
url('MiSuperFuente.svg') format('svg');
}

Para probar cómo funciona esto, recomiendo que descarguéis una fuente de Font Squirrel, por ejemplo Learning Curve Pro. Haced clic en @font-face Kit", que te permitirá descargar un paquete listo para usar con todos los formatos para esta fuente.

Tu archivo CSS al final será así:

@font-face { /* Define una nueva fuente llamada LearningCurveProRegular */
font-family: 'LearningCurveProRegular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}
h1 /* Usa la fuente que acabas de especificar para los títulos */
{
font-family: 'LearningCurveProRegular', Arial, serif;
}

La primera (gran) sección @font-face define un nuevo nombre de fuente que puede utilizarse en el archivo CSS. Entonces utilizamos este nombre de fuente con la propiedad font-family, que ya conocemos, para cambiar la apariencia de los títulos <h1>. Podéis observar el resultado en la siguiente ilustración.

Visualización de una fuente personalizada
Visualización de una fuente personalizada

Cursiva, negrita, subrayado...

CSS tiene una serie de propiedades de formateo de texto estándar. Ahora vamos a descubrir cómo mostrar texto en negrita, cursiva, subrayado, etc. y veremos que incluso es posible hacerlo parpadear.

Formato cursiva

¡Alto ahí! ¿Yo pensaba que la etiqueta <em> se utilizada para mostrar texto en cursiva?

Yo nunca he dicho eso.
Si tenéis alguna duda, volved a los capítulos anteriores, pero yo nunca he dicho que la etiqueta <em> se usaba para poner el texto en cursiva (al igual que nunca he dicho que <strong> se utilice para poner el texto en negrita).

<em>, grabadlo a fuego en vuestras mentes, se utiliza para enfatizar palabras. Esto significa que las palabras del interior son muy importantes.
Para representar esta importancia, la mayoría de los navegadores muestran el texto en cursiva, pero no es obligatorio.

CSS, por su parte, te permite decir: "Quiero que este texto esté en cursiva". Por ejemplo, no hay nada que te impida decidir poner todos los títulos en cursiva.

Concretamente, para poner el texto en cursiva en CSS, se utiliza font-style que puede llevar tres valores:

  • italic: el texto se mostrará en cursiva.

  • oblique: el texto se mostrará oblicuamente (las letras se inclinan y el resultado es ligeramente diferente a la cursiva).

  • normal: el texto se mostrará en formato normal (predeterminado). Esto permite cancelar la cursiva. Si quieres que el texto que va entre <em> deje de aparecer en cursiva, por ejemplo, tienes que escribir:

em
{
font-style: normal;
}

En el siguiente ejemplo, he utilizado font-style para poner en cursiva todos mis títulos <h2>:

h2
{
font-style: cursiva;
}

Negrita

¿Y qué ocurre con la negrita?
De nuevo, recordad que <strong> no pone el texto en negrita (su propósito es indicar que el texto es importante, y como resultado el navegador normalmente muestra el texto en negrita). En CSS, puedes aplicar la negrita en los títulos, algunos párrafos enteros, etc. Eso es decisión tuya.

La propiedad de CSS para poner en negrita es font-weight y tiene los siguientes valores:

  • bold: el texto estará en negrita;

  • normal: el texto se mostrará en formato normal (predeterminado).

Aquí tenéis un ejemplo de cómo escribir títulos en negrita:

h1
{
font-weight: negrita;
}

Subrayado y otras decoraciones

La propiedad CSS asociada tiene un nombre muy acertado: text-decoration. Te permite subrayar texto, entre otras cosas, pero no solo eso. Estas son las diferentes posibilidades que ofrece:

  • underline: subrayado.

  • line-through: tachado.

  • overline: línea encima.

  • blink: parpadeante. No funciona en la mayoría de los navegadores.

  • none: normal (predeterminado).

Este código CSS te permitirá probar los efectos de text-decoration usando underline:

h1
{
text-decoration: underline;
}

Y el resultado se muestra en la siguiente ilustración.

Dar formato al texto
Dar formato al texto

Alineación

El lenguaje CSS te permite establecer todas las alineaciones de texto conocidas: izquierda, centrado, derecha y justificado.

Es bastante sencillo. Utilizas la propiedad text-align y especificas la alineación deseada:

  • left: el texto se alineará a la izquierda (este es el ajuste predeterminado).

  • center: el texto aparecerá centrado.

  • right: el texto se alineará a la derecha.

  • justify: el texto aparecerá justificado. Justificar el texto hace que se ocupe todo el ancho posible sin dejar ningún espacio en blanco al final de las líneas. Los artículos de periódicos, por ejemplo, siempre se justifican.

Echemos un vistazo a los diferentes tipos de alineación en este ejemplo:

h1
{
text-align: center;
}
p
{
text-align: justify;
}
.signature
{
text-align: right;
}

El resultado se muestra en la siguiente ilustración.

Alineación de texto
Alineación de texto

 Elementos flotantes

CSS nos permite colocar un elemento alrededor del texto. A esto también se le llama "wrapping".

Para que os hagáis una idea de lo que estamos hablando, la ilustración de abajo nos muestra lo que vamos a aprender a hacer.

Una imagen flotante rodeada por texto
Una imagen flotante rodeada por texto

Creo que la pregunta candente que está ahora en tu mente es: « ¿Pero cuál es la propiedad mágica que hace que la cosas floten?».
La respuesta es... float. Esta propiedad puede tener dos valores muy sencillos:

  • left: el elemento flotará en la izquierda.

  • right: el elemento flotará en la derecha. Sí, bien hecho.

Los elementos flotantes son muy sencillos de usar:

  1. Sólo aplicas un float a una etiqueta.

  2. Entonces continúas escribiendo el texto siguiendo de forma normal.

Hacer que una imagen flote

Aquí vamos a aprender cómo hacer que una imagen flote. Aquí está el código HTML que tenemos que introducir primero:

<p><img src="flash.gif" class="floatingimage" alt="Floating image" /> Este es un texto de párrafo normal, escrito después de la imagen rodeada por él mientras la imagen flota.</p>

Aquí está el trozo de código CSS que tienes que escribir para hacer flotar a la imagen en la izquierda:

.imagenflotante
{
float: left;
}

Inténtalo y haz que la imagen flote en la derecha, es muy fácil: sólo especifica el valor right ¡y ya está!

Parar un efecto de flotación

Cuando colocas una imagen flotante, el texto la rodea. Pero después de un rato, ¿qué pasa si quieres que el texto continúe por debajo de la imagen flotante? Podrías combinar varias etiquetas <br /> en secuencia pero esto no sería muy ordenado o elegante...

Nos gustaría básicamente obtener el mismo resultado que la figura siguiente.

El texto debajo de la imagen ignota la propiedad de flotación
El texto debajo de la imagen ignota la propiedad de flotación

CSS realmente tiene una propiedad que te permite decir: « Para, este texto debería estar debajo del elemento flotante y no a su lado.» Esta es la propiedad clear, que puede tener estos tres valores:

  • left: el texto continúa debajo después de un float: left;

  • right: el texto continúa debajo después de un float: right;

  • both: el texto continúa abajo, tanto después de un float: left; o despues de un float: right;.

Para simplificar, siempre vamos a usar el clear: both, que funciona después de un flotar a la izquierda y después de un flotar a la derecha (funciona siempre). Para ilustrar cómo funciona, vamos a tomar el siguiente código HTML:

<p><img src="flash.gif" class="floatingimage" alt="Imagen flotante" /></p>
<p>Este texto está escrito al lado de la imagen flotante.</p>
<p class="below">Este texto está escrito debajo de la imagen flotante.</p>

Y este código CSS:

.imagenflotante
{
float: left;
}
.debajo
{
borrar: ambos;
}

Y eso es todo.

Aplicas un clear: both; al párrafo que quieres ver continuar debao de la imagen flotante ¡y ya está!

En resumen

  • Cambias el tamaño del texto con la propiedad CSS font-size. Puedes especificar el tamaño en píxeles (16px) en «em» (1.3em), como porcentaje (110 %), etc.

  • Cambias la fuente del texto confont-family. Ten cuidado, sólo algunas fuentes son reconocidas por todos los ordenadores. Sin embargo, puedes usar una fuente personalizada con la indicación @font-face: esto obligará al navegador a descargar la fuente de tu elección.

  • Hay muchas propiedades de formato de texto: font-style para cursiva, font-weight para negrita, text-decoration para subrayar, etc.

  • El texto se puede alinear con text-align.

  • Una imagen puede ser envuelta («rodeada») por texto usando float.

Example of certificate of achievement
Example of certificate of achievement