Back to Setup Page

Modifying the Lite-Brite CSS

CSS allows us to “dress up” the content on our page.

Tour the Existing Code

  • CSS allows us to target types of elements (ex: body, div) and specific elements based on class name (ex: dot-container).
  • Once we’ve targeted an element, we can write rules for that element to follow. Rules can be things like “the text of this element should be red” or, “the background color should be grey”.

Explore to Learn:

After you complete each task that follows, re-run the program and observe the changes in the browser!

  • On line 9 of the CSS file, change black to magenta
  • On line 10, change lightgrey to orange
  • On line 11, change 10px to 50px
  • On line 12, change 5px to 30px, then 0px

You may be wondering, “how does one know all these special keywords and commands to create these rules?”. Great question! With time and practice, and the use of documentation like MDN and CSS Tricks, developers slowly build their toolkit. Even the most experienced developers need to continually research and google to find the tool they need.

Modify the Existing Code

Now that we can see how some of the pieces come together with CSS, let's continue in this process of "making it our own". You'll do this work below line 22 of the CSS file.

  • Change the size of the dots on your Lite-Brite board.
  • Change the amount of space around/between the dots on your Lite-Brite board.
  • Optional: tinker with the colors used throughout your app!

Play around with these sizes until you are satisfied with your board. This may be the time where you also decide to go back to the HTML file and add more dots!

CSS Summary

  • CSS allows us to target an element and write specific rules for it to follow.
  • Based on the type of rule, CSS will expect different values (ex: magenta for a color and 10px for a measurement).
  • There are many types of rules we can write; with practice, we become familiar with more but don’t need to memorize them all.

Next Section: Exploring JavaScript