¿Cuál es la mejor manera de aplicar CSS en un árbol HTML?

Siempre es padre de niño. No hay selectores de CSS para el otro lado (es decir, hijo a padre)

Por ejemplo, para seguir HTML

Los estilos CSS válidos para el niño son

.parent .child {

valor de propiedad;

}

Te recomiendo que aprendas sobre el selector CSS antes de sumergirte.

Para su próxima pregunta sobre el cálculo de dimensiones depende del modelo de caja que esté utilizando. En general, la mayoría de los navegadores usan el modelo de cuadro de contenido. En este modelo, el ancho de un cuadro se calculará agregando ancho de contenido, relleno, borde.

es decir, ancho del elemento = ancho del contenido + 2 * relleno + 2 * ancho del borde.

Existen otros tipos de modelo de caja (padding-box, border-box).

El modelo de caja es algo muy crucial en la construcción de páginas web. Una vez más, te recomiendo que leas sobre Box-model antes de comenzar.

Buena suerte.

PD: Tal vez la formulación adecuada de su pregunta atraiga más respuestas. La pregunta no es lo suficientemente clara.