Controlar el texto con CSS te permite alinear, transformar y decorar el contenido de tu proyecto web sin recurrir a trucos complicados. Si estás aprendiendo a dar estilos, dominar propiedades como text-align, text-transform, text-decoration y text-indent te ahorra horas de frustración cuando necesitas posicionar párrafos, encabezados o enlaces.

¿Cómo alineo texto en CSS con text-align?

La propiedad text-align es tu primer aliado cuando necesitas mover el contenido dentro de su contenedor. Por defecto, el texto se alinea a la izquierda, pero puedes cambiarlo según el diseño que busques [01:30].

• text-align: left: alinea el texto a la izquierda. Es el valor por defecto.
• text-align: center: centra el texto siempre que el contenedor tenga espacio suficiente.
• text-align: right: empuja el texto hacia la derecha del contenedor.
• text-align: justify: distribuye las palabras para usar el 100% del ancho disponible.

Un detalle clave: el centrado funciona solo si el bloque tiene espacio. Si la etiqueta misma no es lo suficientemente ancha, vas a necesitar otros trucos de CSS para centrar el contenido.

¿Qué hace justify y cuándo conviene usarlo?

justify alarga los espacios entre palabras para que cada línea ocupe todo el ancho disponible [03:45]. Lo notas en párrafos largos donde hay varias líneas; en la última línea, si no hay texto suficiente, el efecto no se aplica porque no hay nada que estirar.

¿Qué diferencia hay entre center y justify? center alinea el bloque de texto al centro del contenedor. justify mantiene el texto alineado a ambos lados estirando los espacios entre palabras.

¿Cómo cambio mayúsculas y minúsculas con text-transform?

Cuando recibes texto en un formato y lo necesitas en otro, no tienes que reescribirlo. La propiedad text-transform se encarga de eso desde los estilos [05:30].

• text-transform: uppercase: convierte todo el texto a mayúsculas.
• text-transform: lowercase: convierte todo el texto a minúsculas.
• text-transform: capitalize: pone en mayúscula la primera letra de cada palabra.

Esto te da flexibilidad si tu contenido viene de una base de datos o un CMS y quieres mantener consistencia visual sin tocar el HTML.

¿Cómo decoro o quito subrayados con text-decoration?

Las etiquetas de ancla traen por defecto un subrayado, pero puedes manipularlo o aplicar decoraciones a cualquier otra etiqueta [07:20]. Aquí entra text-decoration.

• text-decoration: underline: agrega una línea debajo del texto, incluso en párrafos.
• text-decoration: line-through: tacha el texto, útil para listas de tareas completadas o precios anteriores.
• text-decoration: none: elimina la decoración por defecto, ideal para enlaces.

Cuando quitas el subrayado de un enlace con none, el color azul por defecto sigue ahí. Para cambiarlo, agrega la propiedad color con el valor que prefieras, por ejemplo red.

¿Cómo quito el subrayado de un enlace en CSS? Aplica text-decoration: none; a la etiqueta <a>. Si también quieres cambiar el color azul por defecto, agrega color con el valor que necesites.

¿Para qué sirve text-indent en párrafos?

La propiedad text-indent agrega una sangría a la primera línea de un párrafo [09:40]. Es la indentación clásica que ves en libros o papers académicos.

css .indent { text-indent: 2rem; }

Con dos rem de indentación, la primera línea arranca desplazada y las siguientes vuelven al margen normal. Es un detalle pequeño que da un toque editorial al contenido.

¿Qué propiedades de control de texto debo recordar?

Para cerrar el panorama, estas son las herramientas que tienes para manipular cualquier bloque de texto en tu proyecto.

• Alineación con text-align y sus valores left, center, right, justify.
• Transformación con text-transform para mayúsculas, minúsculas o capitalización.
• Decoración con text-decoration para subrayar, tachar o limpiar enlaces.
• Indentación con text-indent para sangrías en la primera línea.

¿Cuál de estas propiedades vas a probar primero en tu proyecto? Cuéntame en los comentarios cómo las estás aplicando.