Estilo de Texto CSS

Introducción

¡Bienvenido al laboratorio de Estilo de Texto CSS! En el diseño web, controlar la apariencia del texto es fundamental para crear sitios web legibles, accesibles y estéticamente agradables. CSS (Cascading Style Sheets) proporciona un potente conjunto de propiedades específicamente para este propósito.

En este laboratorio, obtendrás experiencia práctica con las propiedades CSS más comunes para estilizar texto. Aprenderás a cambiar el color del texto, ajustar el tamaño de la fuente, poner el texto en negrita, alinearlo y controlar el espaciado entre líneas. Trabajaremos con dos archivos: index.html, que contiene el contenido, y style.css, donde escribirás tus reglas CSS. Puedes ver tus cambios en tiempo real cambiando a la pestaña Web 8080 en el entorno del laboratorio.

¡Empecemos!

Establecer la propiedad color para el color del texto

En este paso, aprenderás a cambiar el color del texto utilizando la propiedad CSS color. Esta propiedad puede aceptar nombres de colores (como red, blue), valores hexadecimales (como #FF0000), valores RGB y más.

Primero, localiza el archivo style.css en el explorador de archivos en el lado izquierdo del WebIDE. Haz clic en él para abrirlo en el editor.

Ahora, agreguemos una regla para cambiar el color del texto del párrafo. Usaremos un selector p para apuntar a todos los elementos de párrafo. Agrega el siguiente código a tu archivo style.css:

p {
  color: #2980b9;
}

Después de agregar el código, guarda el archivo style.css. Para ver el resultado, haz clic en la pestaña Web 8080 en la parte superior de la interfaz. Deberías ver que el color del texto del párrafo ha cambiado a un tono de azul.

Aplicar la propiedad font-size en píxeles

En este paso, ajustaremos el tamaño de nuestro texto utilizando la propiedad font-size. Esta propiedad controla el tamaño de la fuente. Si bien hay muchas unidades que puedes usar (como em, rem, %), comenzaremos con píxeles (px), que proporcionan un tamaño fijo.

Hagamos que el texto del párrafo sea un poco más grande para una mejor legibilidad. Vuelve a tu archivo style.css y agrega la propiedad font-size a la regla p existente.

La regla de tu selector p ahora debería verse así:

p {
  color: #2980b9;
  font-size: 18px;
}

Guarda el archivo y cambia nuevamente a la pestaña Web 8080. Notarás que el texto dentro del párrafo es ahora más grande que antes.

Usar la propiedad font-weight para texto en negrita

En este paso, aprenderás a controlar el grosor del texto utilizando la propiedad font-weight. Esta propiedad puede aceptar valores de palabra clave como normal o bold, o valores numéricos de 100 a 900.

Hagamos que el encabezado (h1) destaque más definiendo explícitamente su grosor. Si bien los encabezados a menudo están en negrita por defecto, definirlo en tu CSS asegura la consistencia. También pondremos en negrita el texto del párrafo.

Modifica tu archivo style.css. Primero, agrega una nueva regla para el elemento h1. Luego, agrega la propiedad font-weight a tu regla p existente.

h1 {
  font-weight: bold;
}

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
}

Guarda el archivo y revisa la pestaña Web 8080. Verás que el texto del párrafo ahora está en negrita.

Implementar la propiedad text-align para centrar

En este paso, utilizaremos la propiedad text-align para controlar la alineación horizontal del texto. Esta propiedad puede tener valores como left, right, center o justify. Es una excelente manera de posicionar encabezados y otros elementos de texto de nivel de bloque.

Centremos el encabezado principal de nuestra página. Para hacer esto, agregaremos la propiedad text-align a nuestra regla h1 en style.css.

Actualiza la regla h1 en tu archivo style.css para incluir text-align: center;:

h1 {
  font-weight: bold;
  text-align: center;
}

Después de guardar el archivo, actualiza la pestaña Web 8080. El encabezado <h1>, "Welcome to CSS Text Styling", ahora debería estar perfectamente centrado en la parte superior de la página.

Añadir la propiedad line-height para espaciado

En nuestro paso final, mejoraremos la legibilidad de nuestro párrafo ajustando el espacio entre las líneas de texto. Esto se hace con la propiedad line-height.

Usar un valor sin unidades para line-height es una buena práctica común, ya que crea un espaciado relativo al tamaño de fuente del elemento. Por ejemplo, un line-height de 1.6 significa que el espaciado será 1.6 veces el tamaño de fuente.

Añadamos algo de espaciado vertical a nuestro párrafo. Ve a tu archivo style.css y agrega la propiedad line-height a la regla p.

Tu regla p final debería verse así:

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

Guarda el archivo y visualiza el resultado en la pestaña Web 8080. Notarás que el párrafo ahora es mucho más fácil de leer, con un espaciado más cómodo entre las líneas.

Resumen

¡Felicitaciones por completar el laboratorio de Estilo de Texto CSS! Has aprendido y aplicado con éxito algunas de las propiedades CSS más esenciales para controlar la apariencia del texto en una página web.

En este laboratorio, has practicado:

• color: Para cambiar el color del texto.
• font-size: Para controlar el tamaño del texto.
• font-weight: Para ajustar el grosor (negrita) del texto.
• text-align: Para establecer la alineación horizontal del texto.
• line-height: Para gestionar el espaciado vertical entre líneas de texto.

Estas habilidades fundamentales son los pilares para crear contenido web bien diseñado y legible. Siéntete libre de experimentar aún más con diferentes valores y propiedades en el archivo style.css. ¡Sigue explorando para volverte más competente en CSS!