Modifying the Lite-Brite CSS
CSS allows us to “dress up” the content on our page. Let’s quickly demonstrate what CSS can do for the Click Counter app we looked at earlier.
Tour the Existing Code
- CSS allows us to target types of elements (ex:
div) and specific elements based on class name (ex:
- 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
- On line 10, change
- On line 11, change
- On line 12, change
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.
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 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:
magentafor a color and
10pxfor 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