Questo diagramma mostra i sei "strati" sovrapposti del modello di tabella CSS. Questo diagramma illustra l'algoritmo per il calcolo dello sfondo finale di una cella.
I sei strati sono raffigurati come rettangoli elencati in ordine di priorità fluttuanti l'uno sopra l'altro in uno spazio tridimensionale (gli strati sono raffigurati come rombi per rendere l'idea dello spazio). I rattangoli rappresentano, dall'alto in basso: celle, righe, gruppi di riga, colonne, gruppi di colonna e la tabella stessa.
Il diagramma mostra come, guardando dall'alto in basso i sei rettangoli, si può calcolare il colore di sfondo di ogni cella. Sullo strato superiore, ogni cella che specifica uno sfondo è mostrata come un riquadrato grigio con un bordo nero. Una cella senza colore di sfondo nello strato superiore è rappresentata come una "finestra" sui livelli inferiori, che le conferiscono il suo colore di sfondo finale. La stessa metafora visuale è usata su ogni strato, cosicchè una riga senza sfondo fa da finestra sullo strato del gruppo di riga, ecc.