Propiedades de texto y tipografía
Esta sección cubre todas las propiedades CSS que controlan la apariencia del texto. Desde colores básicos hasta fuentes personalizadas, cada propiedad incluye sus valores posibles y ejemplos prácticos.
3.1 color
La propiedad color define el color del texto del elemento. Es heredada por los elementos hijos.
Valores de color:
- Nombres de colores:
red,blue,green,black,white,orange,purple, etc. - Hexadecimal:
#ff0000(rojo),#00ff00(verde),#0000ff(azul),#333333(gris oscuro) - RGB:
rgb(255, 0, 0)(rojo),rgb(0, 255, 0)(verde),rgb(100, 150, 200) - RGBA:
rgba(255, 0, 0, 0.5)(rojo semi-transparente),rgba(0, 0, 0, 0.8) - HSL:
hsl(0, 100%, 50%)(rojo),hsl(120, 100%, 50%)(verde) - HSLA:
hsla(240, 100%, 50%, 0.3)(azul transparente)
Ejemplo interactivo — experimenta con diferentes colores:
HTML:
<p class="color-demo">¡Cambia el color de este texto!</p>
CSS:
.color-demo {
color: #e74c3c; /* Prueba: blue, #2ecc71, rgb(255, 165, 0), rgba(128, 0, 128, 0.7) */
font-size: 18px;
font-weight: bold;
}
3.2 text-align
La propiedad text-align controla la alineación horizontal del texto dentro de su contenedor.
Valores de text-align:
- left: alineación a la izquierda (predeterminado en idiomas LTR)
- right: alineación a la derecha
- center: centrado
- justify: justificado (espacio uniforme entre palabras)
- start: inicio lógico (izquierda en LTR, derecha en RTL)
- end: final lógico (derecha en LTR, izquierda en RTL)
Ejemplo interactivo — prueba diferentes alineaciones:
HTML:
<div class="alineacion-demo">
Este texto está alineado. Prueba cambiar 'center' por 'left', 'right' o 'justify' para ver las diferencias.
</div>
CSS:
.alineacion-demo {
text-align: center; /* Prueba: left, right, justify */
background: #f8f9fa;
padding: 20px;
border: 2px solid #dee2e6;
width: 300px;
margin: 20px auto;
}
3.3 line-height
La propiedad line-height controla el espacio vertical entre líneas de texto. Afecta directamente la legibilidad.
Valores de line-height:
- Números:
1.5,2,1.2(multiplicador del font-size) - Longitudes:
20px,1.5em,24pt - Porcentajes:
150%,120%(del font-size del elemento) - normal: valor por defecto (aproximadamente 1.2)
Ejemplo interactivo — ajusta el espaciado entre líneas:
HTML:
<p class="linea-demo">
Este párrafo tiene múltiples líneas de texto para demostrar cómo
la propiedad line-height afecta el espaciado vertical entre las líneas.
¡Experimenta con diferentes valores!
</p>
CSS:
.linea-demo {
line-height: 1.8; /* Prueba: 1, 1.2, 2, 30px, 200% */
background: #e8f5e8;
padding: 15px;
border-left: 4px solid #2ecc71;
font-size: 16px;
width: 400px;
}
3.4 text-transform
La propiedad text-transform controla la capitalización del texto sin modificar el HTML.
Valores de text-transform:
- none: sin transformación (valor por defecto)
- uppercase: convierte todo a MAYÚSCULAS
- lowercase: convierte todo a minúsculas
- capitalize: Primera Letra De Cada Palabra En Mayúscula
- full-width: caracteres de ancho completo (para idiomas asiáticos)
Ejemplo interactivo — transforma el texto:
HTML:
<p class="transformacion-demo">este texto cambia su capitalización automáticamente</p>
CSS:
.transformacion-demo {
text-transform: capitalize; /* Prueba: uppercase, lowercase, none */
background: #fff3cd;
padding: 15px;
border: 2px solid #ffc107;
font-size: 18px;
font-weight: 500;
}
3.5 text-shadow
La propiedad text-shadow aplica efectos de sombra al texto, creando profundidad visual.
Sintaxis: text-shadow: offset-x offset-y blur-radius color;
Valores de text-shadow:
- offset-x: desplazamiento horizontal (
2px,-1px,0) - offset-y: desplazamiento vertical (
2px,-1px,0) - blur-radius: radio de desenfoque (opcional:
0,3px,5px) - color: color de la sombra (
black,#333,rgba(0,0,0,0.5)) - none: sin sombra (valor por defecto)
Múltiples sombras: Separadas por comas: text-shadow: 1px 1px 2px red, -1px -1px 2px blue;
Ejemplo interactivo — experimenta con sombras:
HTML:
<h2 class="sombra-demo">¡Texto con Sombra!</h2>
CSS:
.sombra-demo {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Prueba: 1px 1px 0px red, 0px 0px 10px blue */
color: #2c3e50;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #ecf0f1;
padding: 20px;
}
3.6 font-family
La propiedad font-family especifica qué fuente usar para el texto. Se pueden definir varias opciones como respaldo.
Tipos de fuentes:
- Fuentes específicas:
"Arial","Times New Roman","Helvetica" - Fuentes genéricas:
serif,sans-serif,monospace,cursive,fantasy - Fuentes web:
"Roboto","Open Sans","Lato"(requieren @import o link)
Sintaxis: font-family: "Fuente específica", fuente-genérica;
Ejemplo interactivo — prueba diferentes fuentes:
HTML:
<p class="fuente-demo">Esta fuente puede cambiar según disponibilidad del sistema</p>
CSS:
.fuente-demo {
font-family: "Arial", "Helvetica", sans-serif; /* Prueba: "Times New Roman", serif, monospace */
font-size: 18px;
background: #f0f8ff;
padding: 15px;
border-left: 5px solid #007acc;
}
3.7 font-size
La propiedad font-size controla el tamaño del texto del elemento.
Valores de font-size:
- Longitudes absolutas:
12px,16px,24px,14pt - Longitudes relativas:
1em,1.2em,0.8rem,2rem - Porcentajes:
100%,120%,80%(relativo al padre) - Palabras clave:
xx-small,x-small,small,medium,large,x-large,xx-large - Relativos:
smaller,larger(relativo al elemento padre)
Ejemplo interactivo — ajusta el tamaño del texto:
HTML:
<p class="tamaño-demo">El tamaño de este texto es configurable</p>
CSS:
.tamaño-demo {
font-size: 20px; /* Prueba: 12px, 1.5em, 150%, large, x-large */
background: #ffe6f2;
padding: 15px;
border: 2px dashed #ff69b4;
text-align: center;
}
3.8 font-weight
La propiedad font-weight controla el grosor o "peso" de los caracteres del texto.
Valores de font-weight:
- Palabras clave:
normal(400),bold(700),lighter,bolder - Números:
100(ultra-light),200(light),300(light),400(normal),500(medium),600(semi-bold),700(bold),800(extra-bold),900(black)
Nota: No todas las fuentes soportan todos los pesos. Si un peso no está disponible, el navegador usa el más cercano.
Ejemplo interactivo — cambia el peso de la fuente:
HTML:
<p class="peso-demo">Este texto tiene un peso de fuente específico</p>
CSS:
.peso-demo {
font-weight: 600; /* Prueba: normal, bold, 300, 400, 700, 900 */
font-size: 20px;
background: #e8f4fd;
padding: 20px;
border-left: 6px solid #3498db;
font-family: Arial, sans-serif;
}