Estilos CSS para posicionamiento y diseño de contenedores en HTML

Clase 16 de 18 • Curso Práctico de HTML y CSS

Clase anteriorSiguiente clase

Resumen

¡Bienvenida y bienvenido a la recta final de nuestro proyecto! Ya sabes cómo maquetar la estructura del footer. Ahora, aplicaremos los estilos. Vamos directo a nuestro archivo CSS.

Etiqueta footer

  1. Llamamos la etiqueta footer.
  2. Le asignamos el width: 100% para que ocupe todo el ancho de la página y un height: 50px.
  3. Para asegurarnos que el footer siempre esté al final de la página y no se mueva, le damos position: absolute.
  4. Además, quitamos el espacio de abajo con bottom: 0.
  5. Usamos display: grid para generar la cuadrícula en que estará el contenido de nuestro proyecto. La propiedad grid-template-colums: 1fr 1fr nos permite dividir el footer en dos fracciones.
  6. Alineamos los elementos con align-items: center.
  7. Cambiamos el tamaño de fuente con font-size: 13px.
  8. Le damos un color de fondo con background-color: #f2f2f2.
  9. Añadimos un borde superior con border-top: 1px solid #e4e4e4.

Etiqueta ul

  1. Llamamos la etiqueta ul desde el footer.
  2. Le damos un margin: 10px para que el contenido no esté tan pegado al contenedor padre.
  3. Le quitamos los bullets con list-style: none.
  4. Posicionamos el contenido en horizontal con display: flex.
  5. Quitamos el espaciado interno izquierdo con padding-left: 0.

Contenedor izquierdo

  1. Llamamos la clase footer-left desde nuestra etiqueta footer con footer .footer-left.
  2. Movemos los elementos a la izquierda con justify-self: left.

Contenedor derecho

  1. Llamamos la clase footer-left desde nuestra etiqueta footer con footer .footer-right.
  2. Movemos los elementos a la derecha con justify-self: right.

Agregar estilos a los elementos

  1. Llamamos a las etiquetas ancla dentro de los elementos li de las listas no ordenadas de nuestra etiqueta footer con footer ul li a.
  2. Agregamos un margin: 10px para separar los elementos entre sí.
  3. Cambiamos su color con color: #5f6368.

Nuestro proyecto final se debería ver así:
image.png

¡Y listo! Hemos terminado de trabajar en nuestro clon de Google. ¡Muy bien por ti! Hemos aplicado muchos de los conceptos aprendidos en el Curso Definitivo de HTML y CSS. Pero esto no termina aquí.

Te proponemos un reto

Aprendimos a modelar paso a paso un header, main y footer. Ahora te toca a ti clonar otra icónica página usada por los estudiantes, ¡Wikipedia!

Te dejo los enlaces de los íconos de pie de página para ahorrarte un poco de tiempo:

Contribución creada con aportes de: Carlos Orozco y José Miguel Veintimilla.