Estilización de texto y fuentes con CSS

Estilización de texto y fuentes con CSS

La estilización de texto y fuentes con CSS es una habilidad fundamental para diseñadores y desarrolladores web. CSS (Cascading Style Sheets) nos permite controlar la apariencia de nuestros textos y fuentes, lo que nos brinda la libertad de personalizar nuestros sitios web de acuerdo a nuestras necesidades y preferencias.

1. Cambio de color y tamaño de fuente

Una de las formas más básicas de estilizar texto es cambiar su color y tamaño de fuente. Para cambiar el color, puedes usar la propiedad «color» seguida de un valor hexadecimal o de nombre de color. Por ejemplo:

p {
  color: #ff0000; /* rojo */
}

Para cambiar el tamaño de fuente, utiliza la propiedad «font-size» seguida de un valor en píxeles, em o porcentaje. Por ejemplo:

h1 {
  font-size: 24px;
}

2. Estilo en negrita e itálico

CSS nos permite añadir estilo en negrita e itálico a nuestro texto. Para añadir un estilo en negrita, utiliza la propiedad «font-weight» y asigna el valor «bold». Por ejemplo:

h2 {
  font-weight: bold;
}

Para añadir estilo en itálico, utiliza la propiedad «font-style» y asigna el valor «italic». Por ejemplo:

p {
  font-style: italic;
}

3. Decoración de texto

Con CSS, también podemos agregar decoraciones al texto, como subrayado, tachado o resaltado. Para agregar subrayado, utiliza la propiedad «text-decoration» y asigna el valor «underline». Por ejemplo:

a {
  text-decoration: underline;
}

Para agregar tachado, utiliza el valor «line-through»:

del {
  text-decoration: line-through;
}

Y para resaltado, utiliza el valor «highlight»:

mark {
  background-color: yellow;
}

4. Alineación de texto

CSS nos ofrece la posibilidad de alinear nuestro texto, ya sea alinearlo a la izquierda, derecha, centro o justificarlo. Para alinear el texto a la izquierda, utiliza la propiedad «text-align» y asigna el valor «left». Por ejemplo:

p {
  text-align: left;
}

Para alinearlo a la derecha, utiliza el valor «right», para centrarlo, utiliza el valor «center» y para justificarlo, utiliza el valor «justify».

5. Especificando fuentes

Además de estilizar el texto en sí, también podemos controlar las fuentes que se utilizan. CSS nos permite especificar una fuente personalizada o utilizar fuentes web externas. Para especificar una fuente personalizada, utiliza la propiedad «font-family» y asigna la fuente que desees. Por ejemplo:

body {
  font-family: Arial, sans-serif;
}

Para utilizar fuentes web externas, puedes utilizar servicios como Google Fonts. Simplemente agrega el enlace proporcionado en el head de tu HTML y podrás utilizar la fuente en tu CSS.

6. Uso de unidades em y rem

CSS utiliza diferentes unidades de medida para especificar el tamaño de fuentes. Además de las unidades de píxeles (px) y porcentajes (%), también puedes utilizar las unidades em y rem.
La unidad em establece el tamaño de fuente en relación con el tamaño de fuente del elemento padre. Por ejemplo:

h1 {
  font-size: 2em;
}

Esto establecerá el tamaño de fuente del h1 como el doble del tamaño de fuente del elemento padre.

La unidad rem establece el tamaño de fuente en relación con el tamaño de fuente del root (normalmente el elemento HTML). Por ejemplo:

h1 {
  font-size: 2rem;
}

Esto establecerá el tamaño de fuente del h1 como el doble del tamaño de fuente del root.