Nueva herramienta: CSS Editor

Hace algunos días he estado adaptando una nueva herramienta online para que puedan practicar un poco más de CSS, la herramienta está actualmente bajo correcciones y por lo tanto cualquier problema que pueda presentar por favor notificar.

¿Cómo trabaja?

Simplemente deberán establecer un selector y automáticamente se generará un texto Lipsum, por ejemplo:

ejemplo1 {}

Deberán escribir dentro de éste los atributos para comenzar a practicar, se pueden usar varios selectores, pero sólo se mostrarán todos al seleccionar el código completo.

Ejemplo: Copia el siguiente código y pégalo en el cuadro de texto, para que puedas ver los 2 contenedores es necesario seleccionar el código completo o bien situar el cursor al final del código:

lorem1 {width:40%;float:left;padding:5px;background:#2d2d2d;color:#fff;}
lorem2 {width:40%;float:right;padding:5px;background:#2d2d2d;color:#fff;}