Propiedades de texto en CSS

6. Propiedades de texto

Las propiedades de texto son las que nos permiten controlar el texto como bloque, es decir, afectan al interlineado, a la separación entre palabras, al tabulado, etc. En la tabla 6.1 se muestran las propiedades de texto más utilizadas.

Tabla 6.1: Propiedades de texto

Propiedad	Descripción	Valores
text-indent	Desplazamiento de la primera línea del texto	longitud | porcentaje
text-align	Alineamiento del texto	left | right | center | justify
text-decoration	Efectos de subrayado, tachado	none | underline | overline | line-through
letter-spacing	Espacio entre caracteres	normal | longitud
word-spacing	Espacio entre palabras	normal | longitud
text-transform	Transformación a mayúsculas / minúsculas	capitalize | uppercase | lowercase | none
line-height	Tamaño del espacio entre líneas	longitud | porcentaje
vertical-align	Alineación vertical	top | middle | bottom baseline | sub | super | valor

---

6.1. Text-indent

.a { text-indent: 50px; }
.b { text-indent: 3em; }
.c { text-indent: 30%; }
.d { text-indent: -50px; }

0

---

6.2. Text-align

.a { text-align: center; }
.b { text-align: right; }
.c { text-align: left; }
.d { text-align: justify; }

0

---

6.3. Text-decoration

.a { text-decoration: underline; }
.b { text-decoration: overline; }
.c { text-decoration: line-through; }
.d { text-decoration: underline line-through; }

0

---

6.4. Letter-spacing

.a { letter-spacing: 3px;  }
.b { letter-spacing: 10px; }
.c { letter-spacing: 15px; }

0

---

6.5. Word-spacing

.a { word-spacing: 5px; }
.b { word-spacing: 20px; }
.c { word-spacing: 50px; }

0

---

6.6. Text-transform

.a { text-transform: capitalize; }
.b { text-transform: uppercase; }
.c { text-transform: lowercase; }

0

---

6.7. Line-height

.a { line-height: 50px; }
.b { line-height: 3em; }
.c { line-height: 30%; }

0

6.8. Vertical-align

.a { vertical-align: top; }
.b { vertical-align: middle; }
.c { vertical-align: bottom; }

dark

.a { vertical-align: baseline; }
.b { vertical-align: sub; }
.c { vertical-align: super; }
.d { vertical-align: -10px; }

En el valor puedes usar px, pt, cm y %.

dark

Comprueba tu aprendizaje