Tema 5 Divisiones
En el módulo anterior aprendiste sobre un elemento HTML llamado <span>, cuya función es permitir la modificación de pequeñas partes del documento, como ciertas palabras o frases en un párrafo. Las divisiones son elementos que cumplen con funciones similares a un span, sin embargo, a diferencia de un span, las divisiones se usan para agrupar bloques enteros de elementos en lugar de frases o palabras.
Para implementar una división utilizamos la etiqueta <div>. Las divisiones típicamente están acompañadas de una clase o ID para poder modificar el contenido dentro sin afectar a otros elementos alrededor de ellas.
Ejemplos de Uso
Podemos separar secciones de contenido usando divisiones, el siguiente ejemplo muestra esto. Recuerda hacer clic 
en las pestañas de HTML y CSS para ver el código correspondiente:
See the Pen ejemplo-div1 by Luis Yerik Arambula (@luis-yerik-arambula) on CodePen.
CodePen. Software utilizado para el desarrollo de ejercicio dinámico de programación. In CodePen. https://codepen.io
También podemos usar divisiones dentro de divisiones:
See the Pen ejemplo-div2 by Luis Yerik Arambula (@luis-yerik-arambula) on CodePen.
CodePen. Software utilizado para el desarrollo de ejercicio dinámico de programación. In CodePen. https://codepen.io
Herencia
¿Qué cambios puedes observar entre los dos ejemplos? Podemos observar que el color del texto en el segundo contenedor cambia: en el primer ejemplo es negro y en el segundo es blanco. Esto pasa porque en el segundo ejemplo, la segunda división está dentro de la primera, lo cual causa que se hereden las propiedades de la primera división a la segunda. El CSS de la primera división contiene color: white; y es esta propiedad la que se hereda a la segunda división, cambiando el color del texto. La otra propiedad que se hereda es text-align: center;, la cual centra al texto en su contenedor.
A esto se le denomina herencia, la cual consiste en aquellas propiedades que se pasan de un elemento padre o superior a otro elemento hijo. El color negro que se asigna por defecto al texto del documento; al modificar el contenedor con un nuevo color, este se aplica a todos los elementos dentro de ese contenedor. Si agregamos la propiedad color al segundo contenedor, entonces se sobreescribe la propiedad heredada de la primer división. Es por esto que el tipo de letra del primer contenedor no se aplica al segundo, ya que tenemos otra propiedad font-family siendo modificada.