Pregunta sobre un CSS

Encontre este codigo se CSS en Cristalab.
* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }´
* * * * * * * * { outline: 1px solid blue; }
No soy muy entendido de los CSS, que sea cacho css pero a nivel basico.
Pero no entiendo este formato, que hace, me gustaria aprender mas sobre esto.-

Hubiera sido mejor que preguntes donde se inicio la conversacion:
http://www.cristalab.com/tips/31058/conoce-la-forma-de-todo-tu-sitio-con-css

Respuesta rapida: CUando maquetas tu sitio web usando xhtml y css este se distribuye en capas(los famosos DIV), puedes tener una capa para el contenedor de todo tu sitio, otra capa para el menu otra para el pie de la pagina.

Sucede que al diseñarse de esa manera e intentar que se posicionen correctamente, a veces no queda como deberia de ser, a veces una capa queda muy arriba o muy abajo, ves un espacio en blanco y no sabes que es.

Es entonces cuando se usa el css anteriormente visto.¿Para que? Para ver exactamente como estan posicionados tus Div's y hecharle la correccion al DIv que esta causando el problema con la maquetación.

Espero haber respondido a tu inquietud.

Saludos.