Tutorial de CSS – Lección 3 – Propiedades background-color, font-style, font-weight, text-align, text-decoration, text-transform

10/05/2025, by Ivan

Con el tiempo de existencia de HTML se han inventado muchas etiquetas y ahora, con la adopción generalizada de CSS, algunas hay que abandonar, como , , , <center>. Más adelante veremos otras etiquetas "obsoletas". Estas propiedades también te ayudarán a evitar código innecesario en el HTML y trasladarlo a los archivos CSS.

En la lección anterior vimos cómo añadir propiedades CSS y elegir colores para ellas. En esta lección analizaremos varias propiedades que quizá antes aplicabas con etiquetas HTML, pero que ahora haremos con CSS, algo mucho más correcto.

Empecemos con la primera propiedad: background-color.

Background-color

Esta propiedad no solo sirve para el fondo de bloques, sino también para texto y enlaces. Por ejemplo:

span {
  background-color: yellow;
}

O para enlaces:

a {
  background-color: blue;
}

Background color

Al igual que con color, los colores pueden definirse con valores hexadecimales, por ejemplo #ff0000 (que corresponde al rojo).

Font-style

Quizá hayas encontrado antes etiquetas como  o  (texto en negrita),  (cursiva) o incluso . Para evitar usar todas esas etiquetas, existe la propiedad CSS font-style. Entre sus valores más comunes están:

p {
  font-style: italic; /* cursiva */
}

De este modo sustituimos la etiqueta  por la propiedad font-style: italic.

font-style

Font-weight

Para la negrita se usaba antes . Ahora basta con la propiedad font-weight:

body {
  font-weight: normal; /* fuente normal */
}

p {
  font-weight: 400;    /* fuente normal */
}

span {
  font-weight: 700;    /* fuente negrita */
}

a {
  font-weight: bold;   /* fuente negrita */
}

Los valores posibles son 400 o normal para la fuente normal, y 700 o bold para la negrita.

CSS font-weight

Text-align

La propiedad text-align reemplaza al antiguo <center> y al atributo HTML align. Se usa así:

body {
  text-align: left;   /* alineado a la izquierda */
}

p {
  text-align: center; /* centrado */
}

span {
  text-align: right;  /* alineado a la derecha */
}

div {
  text-align: center; /* centrado */
}

La imagen a continuación muestra claramente su efecto:

CSS text-align

Text-decoration

En lugar de <strike> (texto tachado) o  (subrayado), podemos usar la propiedad text-decoration:

.underline {
  text-decoration: underline;    /* subrayado */
}

.line-through {
  text-decoration: line-through;  /* tachado */
}

CSS text-decoration

Text-transform

Otra propiedad útil es text-transform, que permite convertir el texto a mayúsculas o minúsculas:

CSS text-transform

No trates de memorizar todas las propiedades CSS de una vez. Si vuelves a consultar las que necesites a medida que avances, terminarás recordando las más importantes y frecuentes, y siempre podrás buscar las demás cuando las necesites.

Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs