Fondos y Colores CSS: Estiliza Páginas Web

Introducción

¡Bienvenido al laboratorio de Colores y Fondos en CSS! En el diseño web, los colores y los fondos son fundamentales para crear sitios web visualmente atractivos y fáciles de usar. Ayudan a establecer el tono, mejorar la legibilidad y guiar la atención del usuario.

En este laboratorio, obtendrás experiencia práctica con algunas de las propiedades CSS más comunes utilizadas para controlar la apariencia de los elementos. Aprenderás a establecer colores de fondo, aplicar colores de texto, usar imágenes de fondo y controlar cómo se muestran esas imágenes. Cubriremos las siguientes propiedades: background-color, color, background-image, background-repeat y background-position.

Al final de este laboratorio, tendrás una comprensión sólida de cómo estilizar los colores y fondos de tus páginas web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 99%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Establecer la propiedad background-color usando código hexadecimal

En este paso, aprenderás a cambiar el color de fondo de toda la página. Utilizaremos la propiedad background-color y un código de color hexadecimal (hex). Los códigos hex son una forma común de representar colores en el desarrollo web, comenzando con un # seguido de seis caracteres (0-9, a-f).

Primero, necesitas editar el archivo styles.css. Puedes encontrar este archivo en el explorador de archivos en el lado izquierdo del WebIDE.

Haz clic en el archivo styles.css para abrirlo en el editor.
Agrega la siguiente regla CSS para establecer el color de fondo del elemento <body>. Esto aplicará el estilo a toda la página.

body {
  background-color: #f0f8ff;
}

Esta regla selecciona el elemento body y establece su color de fondo a un tono azul claro conocido como "AliceBlue".

Después de agregar el código, guarda el archivo (puedes usar Ctrl+S o Cmd+S). Para ver tus cambios, haz clic en la pestaña Web 8080 en la parte superior de la interfaz. Deberías ver que el fondo de la página cambia de blanco a azul claro.

Aplicar la propiedad color con valores RGB

Ahora que has establecido el color de fondo, cambiemos el color del texto del encabezado principal. Usaremos la propiedad color, que establece el color del contenido de texto de un elemento. Para esto, utilizaremos el formato de color rgb().

La función rgb() define un color utilizando sus componentes Rojo (Red), Verde (Green) y Azul (Blue), con cada valor oscilando entre 0 y 255.

Continúa editando el archivo styles.css.

Agrega una nueva regla CSS para seleccionar el elemento <h1>.
Dentro de esta regla, establece la propiedad color a un gris oscuro usando rgb(60, 60, 60).

Agrega el siguiente código a tu archivo styles.css:

h1 {
  color: rgb(60, 60, 60);
}

Guarda el archivo y cambia a la pestaña Web 8080 para previsualizar tus cambios. El encabezado "Welcome to LabEx" ahora debería ser de color gris oscuro, haciendo que resalte sobre el fondo azul claro.

Usar la propiedad background-image con url

Además de los colores sólidos, CSS te permite usar imágenes como fondos. La propiedad background-image se utiliza para este propósito. Especificas la ruta de la imagen usando la función url().

En este paso, agregarás una imagen de fondo al body de la página. El script de configuración ya ha creado un archivo de imagen llamado labex.svg en tu directorio de proyecto.

Vuelve a tu archivo styles.css.
Modifica la regla body existente para agregar la propiedad background-image.

Agrega la siguiente línea dentro de las llaves del selector body:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
}

Después de guardar el archivo, revisa la pestaña Web 8080. Notarás que la imagen (labex.svg) aparece en la página. Por defecto, las imágenes de fondo se repiten tanto horizontal como verticalmente para llenar todo el elemento. En el siguiente paso, aprenderemos a controlar este comportamiento.

Implementar la propiedad background-repeat no-repeat

Como viste en el paso anterior, las imágenes de fondo se repiten por defecto. La propiedad background-repeat te da control sobre este comportamiento. Puede tomar varios valores, incluyendo repeat (el valor por defecto), repeat-x (repetir horizontalmente), repeat-y (repetir verticalmente) y no-repeat.

En este paso, evitarás que la imagen de fondo se repita.

Continúa editando la regla body en tu archivo styles.css.
Agrega la propiedad background-repeat y establece su valor a no-repeat.

Tu regla body ahora debería verse así:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
}

Guarda el archivo y actualiza la pestaña Web 8080. Ahora verás una sola instancia de la imagen de fondo, ubicada en la esquina superior izquierda de la página.

Añadir la propiedad background-position center

Actualmente, la única imagen de fondo está posicionada en la esquina superior izquierda de la página. Puedes cambiar su posición usando la propiedad background-position. Esta propiedad acepta valores como left, right, top, bottom y center, así como valores de longitud o porcentaje específicos.

Para este paso final, centrarás la imagen de fondo tanto horizontal como verticalmente.

En tu archivo styles.css, agrega la propiedad background-position a la regla body.
Establece su valor a center.

La regla body completa será ahora:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
  background-position: center;
}

Guarda tus cambios y visualiza el resultado en la pestaña Web 8080. La imagen de fondo ahora debería estar perfectamente centrada en la página.

Resumen

¡Felicidades por completar el laboratorio! Has aprendido con éxito a estilizar los colores y fondos de una página web utilizando propiedades CSS fundamentales.

En este laboratorio, practicaste:

Establecer el color de fondo de una página con background-color y un código hexadecimal.
Cambiar el color del texto con la propiedad color y un valor rgb().
Añadir una background-image usando la función url().
Controlar la repetición de la imagen con background-repeat: no-repeat;.
Posicionar una imagen de fondo con background-position: center;.

Estas propiedades son herramientas esenciales para cualquier desarrollador web. Siéntete libre de experimentar más cambiando los valores o probando diferentes imágenes para ver qué puedes crear.

Colores y Fondos CSS