Cargando...

Texto en CSS

Ya dimensionaste cajas y controlaste el overflow. Ahora da forma a las palabras. Las propiedades de texto en CSS manejan alineación, subrayado, mayúsculas/minúsculas, espaciado y altura de línea — sin cambiar aún la familia tipográfica (eso viene después).

Herramientas cotidianas de texto

📊 Propiedades de texto comunes

Propiedad Trabajo cotidiano
text-align Alinea el texto en su línea: left, right, center, justify
text-decoration Añade o quita subrayado, sobrerrayado o tachado
text-transform Cambia el caso: uppercase, lowercase, capitalize
line-height Define la altura de cada línea — clave para párrafos legibles
letter-spacing Ajusta el espacio entre letras

Alinear el texto

text-align coloca el texto en el eje horizontal de su bloque contenedor.

Centrar un título

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

Decoración — subrayado y compañía

text-decoration dibuja líneas sobre el texto. Los enlaces suelen ir subrayados; quítalo con none, o añade underline / line-through cuando el diseño lo pida.

Muestras de decoración

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

Transformar el caso

text-transform cambia cómo se ven las letras sin reescribir el texto HTML.

Transformaciones de caso

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

Altura de línea para párrafos legibles

line-height controla el ritmo vertical de las líneas. Valores sin unidad como 1.5 escalan con el tamaño de fuente y son una opción calmada para el cuerpo.

Altura de línea cómoda

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

Espaciado de letras — con mano ligera

Un poco de letter-spacing puede abrir un título corto. Deja los párrafos del cuerpo casi naturales salvo que el diseño lo pida de verdad.

Título con tracking ligero

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

Pruébalo tú

  1. Centra un h1 con text-align: center.
  2. Quita el subrayado de un enlace con text-decoration: none; opcionalmente vuelve el subrayado en hover.
  3. Pon en mayúsculas una etiqueta pequeña con text-transform: uppercase.
  4. Pon el line-height del párrafo en 1.6 y compáralo con 1.2.
  5. Da un poco de letter-spacing a un título — y comprueba que siga legible.

Errores comunes

  • Usar text-align: center esperando centrar todo el layout de bloque (eso es layout, no solo texto)
  • Dejar todos los enlaces subrayados cuando el diseño quiere enlaces discretos — o quitar el subrayado sin otra señal
  • Meter aquí font-family y font-size (pertenecen a la lección Fonts)
  • letter-spacing enorme en párrafos largos (cuesta leer)
  • Confundir herramientas de puntos suspensivos de overflow de texto con estas bases (más adelante)

Resumen

  • text-align alinea texto a la izquierda, derecha, centro o justify
  • text-decoration añade o quita subrayados y líneas similares
  • text-transform cambia el caso sin editar HTML
  • line-height da forma a la legibilidad del párrafo
  • Un letter-spacing ligero puede pulir títulos cortos
  • Las fuentes vienen después; esta lección se queda en cómo se asienta y se lee el texto

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 26 de 35
Css Tutorial