Define Root Colors Variables and Set up Box-Sizing for a CSS Layout
We will discuss the necessary CSS styles that we will need to start using CSS Grid. First, you'll download an index.html file and style.css from this GitHub repo - lesson1 folder.
This will contain some set up that will help you get up and running quickly. We'll discuss how to set and use CSS variables as well as box-sizing. box-sizing allows you to add border and padding without increasing the box-size, important for CSS grid!
Instructor: [0:00] Go to the GitHub repo linked in this lesson and download style.css and index.html starter files from lesson one folder. The style.css file has basic styling, like root colors, background color, and the header styling.
[0:14] The root colors allow you to set a name for specific colors. As you can see, I've set gray to be DADEDF. When I call the color gray in the style.css, as I did here using var, it will call DADEDF instead of a generic gray.
[0:31] Box-sizing border-box allows you to add borders and padding to boxes without increasing the box size. If you try to make things fit somewhere or wondered how you can stop boxes from bleeding out of the screen, you probably know what issue this would address.
[0:46] Here, we'll inherit the box-sizing from the HTML class. Making sure these two box-sizing lines are present will make your CSS grid life much easier.
[0:55] Now we have a preview for the lesson, it's worth noting that there is nothing currently showing up because there is no content in the index.html. We have the styling with the CSS, but nothing will be showing up.