Basics of CSS: the box model

Tutorial to follow. For now:

What you need to know from the lecture:

1. Draw “invisible boxes” around your designs so you can begin to visu­alize how you’ll structure your code
2. Make div elements in your HTML document for every box that you drew on your designs. (Be cognizant of where your opening and closing tags are if you have boxes within boxes)
3. Give each of these div elements a unique class
4. Copy the name of the classes into your CSS file and append them with a period
5. This will be the foun­dation for our file and we’ll have what we need to start styling

Your HTML should have div elements that look like this:

<div class="my_class_name">Some text that goes in my div box</div>

<div class="my_second_class_name">Some text that goes in my div box</div>

And your CSS file should have corre­sponding class names like this:

.my_class_name { }

.my_second_class_name { }

Please note!

There are no spaces in the class names! And the spelling of the class name on the HTML document must match EXACTLY the spelling of that name on the CSS document, or else your styles will not work!