The CSS Box Model
The CSS Box Model
LEARNING GOAL: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External CSS.
All of the elements on a web page can be broken down into something that looks a lot like a family tree with parents and children. For example, a paragraph (p) element might be inside of a DIV element, so the P element would be a child of the DIV element and the DIV element would be a parent of the P element. This process of looking at the family tree of all your elements is known as the Document Object Model.
But whether you see them all or not, every element in a source code is also surrounded by a box. Without CSS, those boxes are basically invisible. But with CSS, you can make those boxes look however you want.
This lesson is about learning to identify various types of elements throughout an HTML page, but also learning how to manipulate the look of the various boxes we create on a page.
DAILY SCHEDULE (85 MINUTES):
PART 1: CLASS DISCUSSION – The Box Model
Topic #1 – A New Message from Hakon Wium Lie
“HTML represents a document with a tree-like structure. Elements in HTML have children and parents. There are many reasons for having tree-structured documents. For style sheets, there is one excellent reason: inheritance. HTML elements inherit traits from their parents, just like children do. But instead of inheriting genes and money, HTML elements inherit stylistic properties.” (Hakon Wium Lie, Cascading Style Sheets: Designing for the Web)
What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.
Topic #2 – CSS Review Questions (Lesson 3.1, 3.2, 3.3, 3.4, & 3.5)
1. What does it mean when a web designer says “above the fold”?
2. The process of arranging content in straight lines is called?
3. Explain the meaning of proximity on a web page.
4. Explain the difference between symmetrical and asymmetrical websites.
5. White space refers to what exactly?
Topic #3 – The Document Object Model
When you look at one of your HTML codes, what you should always see are a collection of elements (opening and closing tags). But those elements should not be randomly placed all over your code. In most cases, you create your section elements (header, article, footer, etc) and then place content-related elements (h1, p, span, etc) inside of those. All of this is done before you start styling with CSS.
All of the elements on an HTML code can be written out like a family tree that explains what elements are inside other elements. Another way to look at this is that there are parent elements and there are child elements. If you try to imagine your own family tree with parents, grandparents, and great grandparents, this might make more sense. The Document Object Model (DOM) is a way of describing HTML like a tree of objects.
Topic #4 – The Box Model
You may not always see it, but when you open up an HTML page with a browser, all of those elements from the Document Object Model are surrounded by boxes. The paragraph element. The h1 element. The footer element. Every single element is surrounded by a box. And for this reason, web designers often refer to something called The Box Model. The Box Model means that there is a box, whether you see it or not, around every single HTML element. When you style that element with CSS, you can make that box look unique. Click on the link in this paragraph to learn a little more about The Box Model and even experiment with how it works.
Topic #5 – Width, Height, & Backgrounds
If every element is basically just a box, then without style, that box will only be as big as the content inside. For example, if you create a paragraph element (p), but do not style it, that element will only be as big as the text you write in between the opening and closing tags.
In your stylesheet, the width and height declarations help to give your elements a specific dimension. When possible, your width should be written as percentages rather than pixels. If you set the width to pixels, your elements may run out of space on a screen with less resolution. However, height should always be written with pixels or em because the mouse is naturally designed to scroll up and down whenever space runs out.
So much time in this class has been devoted to adding backgrounds, but it’s important to understand that an element with no background will inherit (or follow) the background of the parent element. For example, if you create a DIV element inside of your BODY element, but you don’t give your DIV a background (color, image, gradient, etc), then your DIV element will simply take on the background of your BODY element.
Topic #6 – Padding, Borders, & Margins
As you saw in the Topic 4 demo, an element can contain padding, borders, and margins. But these can be confusing. Try to remember that padding controls how much space is around the content inside of your element. Borders control the edges of your element. And margins control how much space is used around the outside of your element. Let’s try it again.
Topic #7 – Overflows & Hidden Elements
You have probably seen a lot of websites that have scrollbars going left to right (horizontal) and some with scrollbars going up and down (vertical). The reason this happens is because the designer of that website wanted an element to fit an exact amount of space even though the content inside that element was going to take up more room. In CSS, there is an overflow property that allows us to control whether someone can see part or all of our content. Click on the link in this paragraph to learn a little more about the Overflow Property and even experiment with how it works.
But what if you just want to make an entire element invisible? Here is the visibility property.
Topic #8 – The Box Shadow
After learning about the text-shadow property, many of you applied it very well to some of your demos. Well guess what? You can also apply shadows to boxes. Imagine that. If every element is just a box, then every single element could have its own shadow. That might be a little much, but feel free to experiment with the box-shadow property before we get into our design for the day.
PART 2: DAILY DESIGN – Building with a Box Model
During this design, you will be building a two-page website with different unique features of CSS, including the ability to make an element disappear or place information into columns. This design will take us the rest of the class period. Follow the directions below to get started. As soon as everyone has completed Step 9, you will receive further instructions.
Step 1: Go to your “css” folder and create a new subfolder called “demo4”.
Step 2: Open Notepad++ and close down any of the files you had open from the last class.
Step 3: Now create three new files in Notepad++ and save them as boxes.html, columns.html, model.css in your “demo4” folder.
Step 4: In your boxes.html file, copy/paste this code.
Step 5: In your columns.html file, copy/paste this code.
Step 6: In your model.css file, copy/paste this code.
Step 7: Save your work, then open up your “boxes.html” with Chrome or Firefox.
Step 8: Create a split screen (half Notepad++ and half Chrome/Firefox).
Step 9: In Notepad++, go to your model.css file and wait for the teacher.
As a class, we will all build a two-page website while practicing a few of the things we just learned about the Box Model as well as a few new styling skills that did not get covered. If there is time after we build this two-page website, you might be given some additional challenges (adding a third page, changing the text color from page to page, etc).