add layers to task

Author: estelle

learn/tasks/cascade/cascade.html

@@ -10,15 +10,25 @@
     </style>
 
     <style class="editable">
-    #outer div ul .nav a {
-      background-color: blue;
-      padding: 5px;
-      display: inline-block;
-      margin-bottom: 10px;
-    }
+    @layer yellow, blue, green;
 
-    div div li a {
-      color: yellow;
+    @layer blue {
+      #outer div ul .nav a {
+        background-color: blue;
+        padding: 5px;
+        display: inline-block;
+        margin-bottom: 10px;
+      }
+    }
+    @layer yellow {
+      div div li a {
+        color: yellow;
+      }
+    }
+    @layer green {
+      a {
+        color: lightgreen;
+      }
     }
     </style>
 </head>
@@ -35,17 +45,27 @@
       </div>
     </section>
 
-    <textarea class="playable playable-css" style="height: 250px;">
-#outer div ul .nav a {
-  background-color: blue;
-  padding: 5px;
-  display: inline-block;
-  margin-bottom: 10px;
-}
+    <textarea class="playable playable-css" style="height: 400px;">
+      @layer yellow, blue, green;
 
-div div li a {
-  color: yellow;
-}               
+      @layer blue {
+        #outer div ul .nav a {
+          background-color: blue;
+          padding: 5px;
+          display: inline-block;
+          margin-bottom: 10px;
+        }
+      }
+      @layer yellow {
+        div div li a {
+          color: yellow;
+        }
+      }
+      @layer green {
+        a {
+          color: lightgreen;
+        }
+      }               
     </textarea>
 
     <textarea class="playable playable-html" style="height: 170px;">