Textos en CSS

Veamos que propiedades nos presentan los textos en CSS y que valores les podemos asignar para tener un diseño interesante en nuestras páginas webs.

Textos

Al diseñar una página web es básico darle formato a los textos.

Ahora explicaré las siguientes propiedades de formato:

  • Color en los textos
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • letter-spacing
  • word-spacing
  • line-height
  • text-shadow

Color en los textos

La propiedad color asigna el color al texto seleccionado.

Podemos utilizar los nombres de los colores, un valor HEX (#ffffff) o un valor RGB (rgb(255,0,0)).

Podemos aprender más acerca de los colores en CSS en este link.

El color predeterminado para todo los textos de la página es que asignemos al body

También podemos asignar diferentes colores a diferentes elementos.

Text-align

Con la propiedad text-align podemos asignarle al texto la forma en que estarán alineados los párrafos.

Podemos seleccionar entre left, right, center, justify.

Texto alineado a la izquierdaTexto alineado a la derecha
Texto alineado al centroTexto justificado.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Text-decoration

La propiedad text-decoration se utiliza para establecer o eliminar decoraciones del texto.

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

El valor text-decoration: none; a menudo se usa para eliminar los subrayados de los enlaces.

Este es un enlace sin subrayado

Text-transform

La propiedad de transformación de texto se usa para especificar letras mayúsculas y minúsculas en un texto.

Se puede usar para convertir todo en letras mayúsculas o minúsculas, o poner en mayúscula la primera letra de cada palabra.

Este es un texto de ejemplo sin transformación
Este es un texto de ejemplo con valor uppercase
Este es un texto de ejemplo con valor lowercase
Este es un texto de ejemplo con valor capitalize

Text-indent

La propiedad text-indent se usa para especificar la sangría de la primera línea de un texto.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Letter-spacing

Se utiliza para determinar el espacio entre los caracteres.

El espacio entre estos caracteres es de 10px.

Word-spacing

Se usa para asignar el espacio entre palabras.

El espacio entre estas palabras es de 10px.

Line-height

La propiedad line-height se utiliza para asignarle un valor al espacio entre las líneas.

Párrafo 1
Párrafo 2

Párrafo 1
Párrafo 2

Párrafo 1
Párrafo 2

Text-shadow

La propiedad text-shadow agrega sombra al texto.

El siguiente ejemplo especifica la posición de la sombra horizontal (4px), la posición de la sombra vertical (3px), el radio de desenfoque (2px) y el color de la sombra (azul).
El radio de desenfoque.

Si tu navegador este texto tendrá una sombra azul.

Quieres saber más de CSS. Puedes revisar mis artículos anteriores ¿Qué es CSS?, ¿Cómo utilizar los colores en CSS?, Fondos en CSS y Fuentes en CSS.

Deja un comentario