07 – Color y Tamaño de Texto y Alineación de Párrafos

En los documentos HTML podemos aplicarle una serie de propiedades CSS a las etiquetas contenedoras de texto como, por ejemplo: cambiar el color y el tamaño del texto o incluso cambiar la alineación del texto del párrafo. Por otra parte, esto también lo podemos hacer individualmente definiendo fragmentos de texto y aplicarle estas propiedades. En esta lección te explicaré como cambiar estas propiedades al texto, ya sea en párrafos o en un fragmento de texto individual.

07 – Color y Tamaño de Texto y Alineación de Párrafos

Tal como he mencionado anteriormente, podemos definir ciertas propiedades al texto mostrado en HTML, así como cambiar el color y el tamaño del texto, o incluso cambiar la alineación de los párrafos.

Por una parte, estas propiedades las podemos aplicar en una etiqueta contenedora, así como a los párrafos, a los títulos, a los DIVS; y cualquier otra etiqueta de contenido (la cual contiene texto y/o otras etiquetas), lo cual se hace de la siguiente manera:

<p style="color:red;">
   Texto mostrado en un párrafo
</p>

Previsualización:

fig8.png

En este caso, las propiedades que definamos, serán aplicadas en todo el párrafo, y por lo tanto al texto de su interior.

La Etiqueta SPAN

La etiqueta span sirve para definir un fragmento de texto, el cual, puede tener sus propias definiciones de color y tamaño (entre otras), además, sus propiedades tendrán preferencia ante las propiedades definidas en el párrafo (o en la etiqueta padre).

<p>
   Texto normal <span style="color:red;">Texto modificado</span>.
</p>

Previsualización:

fig9.png

En este otro caso, las propiedades que definamos, serán aplicadas únicamente en el texto que se encuentre dentro de la etiqueta span, es decir, en el fragmento definido por esta etiqueta.

Cambiar el Color del Texto

Para cambiar el color del texto, dentro del atributo style, se define la propiedad “color”, con el nombre del color (en inglés) como valor, el cual será el color del texto a mostrar.

<p style="color:blue">
   Texto en color azul y <span style="color:red">texto en color rojo</span>
</p>

 

En este caso, estaríamos definiendo cambiando el color del texto que hay dentro del párrafo a color azul, y el que hay, a su vez, dentro de la etiqueta span, de color rojo (ya que este tiene preferencia ante la etiqueta padre, es decir, el párrafo). Lo cual, se vería así:

fig1.png

Tamaño del Texto

Al igual que podemos cambiar el color del texto, ya sea en una etiqueta (como el párrafo) o en un fragmento de texto, podemos hacer lo mismo con el tamaño de este.

Para cambiar el tamaño del texto, la propiedad a definir es “font-size” y como valor el tamaño del texto, unidad la cual puede ser en píxeles (px), puntos (pt) o incluso puede ser un porcentaje (%). Unidades las cuales deben de ser especificadas juntamente con el valor. Adicionalmente se pueden utilizar nombres como “small”, “normal” o “large” para cambiar el tamaño.

Un ejemplo para cambiar el texto de un fragmento de texto en píxeles, sería así:

Texto normal <span style="font-size:30px;">Texto grande</span>

El cual, se vería así:

fig2

Otro ejemplo para cambiar el tamaño del texto, de modo que este se muestre más grande que el resto, sería así:

Texto normal <span style="font-size:small;">Texto pequeño</span>

El cual se vería así:

fig3

Color de Fondo o Subrayado

Del mismo modo que podemos cambiar el color del texto, también podemos cambiar el color de fondo (lo cual es útil si queremos resaltar el texto de color).

Para ello se utiliza la propiedad CSS “background-color” y el color a resaltar en inglés como valor:

<span style="background-color:yellow">Fragmento de texto.</span>

Este texto se mostraría resaltado de color amarillo:

fig4

Además, podemos hacer combinaciones de las diferentes propiedades del texto. Por ejemplo, resaltar el texto en amarillo y el texto mostrarlo de color azul:

<span style="background-color:yellow;color:blue;">
   Fragmento de texto.
</span>

Y este se mostraría así:

fig5

Fuente o tipo de Letra

A parte del color y del tamaño, también podemos cambiar la fuente (tipo de letra) del texto utilizando la propiedad “font-family” y el nombre de la fuente (o de la letra).

A continuación, os muestro tres párrafos, los cuales utilizan “Verdana”, “Arial” y “Times New Roman” como tipo de fuente respectivamente:

<p style="font-family:Verdana">Texto Verdana</p>
<p style="font-family:Arial">Texto Arial</p>
<p style="font-family:Times New Roman">Texto Times New Roman</p>

Tal como podéis ver, cada párrafo tiene un estilo de fuente diferente:

fig6

Alineación de Párrafo

Por último, mostraros cómo cambiar la alineación del texto de un párrafo. Pues el texto puede ser alineado a la derecha, al centro, a la izquierda y justificado, utilizando la propiedad CSS “text-align” y como valores “left”, “center”, “right” y “justify” respectivamente.

A continuación, os muestro cuatro párrafos con diferentes alineaciones de texto:

<p style="text-align:left">Texto Derecho</p>
<p style="text-align:center">Texto Centrado</p>
<p style="text-align:right">Texto Izquierdo</p>
<p style="text-align:justify">Texto Justificado</p>

Los cuatro párrafos se mostrarán de la siguiente manera:

fig7

Y esto es todo en cuanto a los diferentes estilos o propiedades que podemos aplicar al texto (o a los párrafos). De hecho, hay muchísimas propiedades para modificar el texto, aunque yo he considerado que estas son las más importantes por ahora.

Combinando los estilos que hemos visto en esta lección con las etiquetas de formato de la lección anterior, podemos personalizar bastante el texto de los documentos HTML.


📹 OTROS VÍDEOS DEL CURSO HTML

📺 ¿QUIERES VER TODO EL CURSO?

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s