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:
section,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, observe the changes in the browser!
- On line 9 of the CSS file, change
blacktomagenta - On line 10, change
lightgreytoorange - On line 11, change
10pxto50px - On line 12, change
5pxto30px, then0px
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:
magentafor a color and10pxfor 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.