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".

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!

You may notice that the layout of the dots in your dot container is responsive to the size of the window. This is because the dot container takes up as much space as it can horizontally, unless we tell it to do something different. If you want your dots to be in a fixed location, without considering the size of the window, set the width property on your dot container to be a fixed pixel value, like 500px. You may have to play around with the right number of dots, size of the dots, space around the dots, and width until you get it lined up perfectly.

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