Estilos CSS para Tablas y Herencia de Fuentes

Clase 17 de 32 • Curso de Responsive Design: Maquetación Mobile First

Clase anteriorSiguiente clase

Resumen

¿Cómo te fue detallando los estilos de tabla de monedas? Seguro lo hiciste genial. Ya casi llegamos al final de esta sección de tablas. ¿Te diste cuenta que sólo nos falta el texto de actualización? Lo más complicado ya ha pasado, así que vamos a ello.

Cómo agregar estilos

  • Primero le damos un ancho de 190px y alto de 30px para que exista el espacio.
  • Lo centramos con margin: 0 auto.
  • Lo separamos de la tabla con margin-top: 15px.
  • Creamos un espaciado interno con padding: 8px.
  • Ajustamos su color de fondo con la variable –soft-orange.
  • Redondeamos los bordes con border-radius: 8px.
  • Para darle estilos al texto llamamos la etiqueta p desde el contenedor de la tabla con .currency-table–date p.
  • Ajustamos su tamaño a 1.2rem y le damos un interlineado de 1.5rem.
  • Por último, le cambiamos el color con la variable –warm-black.
.currency-table--date {
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.currency-table--date p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

Este sería el resultado:
image.png

Y de esta manera, hemos terminado la primera sección del proyecto. ¡Muy bien!

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).