Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I explained what the CSS box model is and why it is important when we start building visual displays for web pages.
When it comes to creating visual layouts for web pages, the first thing we need to consider is the CSS box model.
All HTML elements have four different areas you can style using the CSS box model.
Each of the four areas you can style is shaped like a rectangle.
The box model, then, will allow us to set or change an HTML element's height and width.
It can also help us when we decide where we want to start placing HTML elements within our pages.
It also allows us to add some background color to HTML elements and will allow us to add borders to HTML elements.
The first feature of an HTML element we can style using the box model is the content area, the actual area where the content of that HTML element will be displayed, the text, images, et cetera
The second area we can control is called padding, this is a transparent area between the content and the edges of the HTML element.
The third area we can style is known as the border area, here's where we can place a border.
Note that it sits around whatever padding we decided to add to our content.
The last part of an HTML element we can control is what is known as the margin, this is a transparent area that sits between the border of an HTML element and the next HTML element on the page.
So let's take a look at how we can adjust each of those four areas using CSS.
Before starting today's tutorial, make sure you have your HTML editor open and have created a new HTML document.
Then look for and click the link that reads "click this link to access the text used in the tutorials."
Once you've located the text that we are going to be using in the tutorial, highlight it, copy it, go into your HTML editor, and pasted it between the open and closed body tag of your HTML document.
Once you have the tutorial text pasted it into your HTML editor, the next step in the process is to go up into the head section of the document and add an open and closed style tag.
The first thing we're going to do with our document is add some color to our HTML elements.
To do so, we're going to use what is known as the background property.
So we're first going to put our h1 in as our selector, and make sure we put in our curly brackets.
We're going to type in background as the property and green as the value, making sure to add our semicolon.
Our paragraphs on the other hand, are going to have a background value of pink.
So let's save that, let's take a look in our browser to see what that looks like.
As you can see, our headings are now formatted with a green background and our paragraphs are now formatted with a pink background.
Next, what I want to do, then, is I want to go ahead and play with the size of our heading elements.
What I'm gonna do here, is I'm gonna add a property of with and give it a value of 500px.
I'm also going to change the height to 100px.
So if we save that, go back to our browser, you can see that our headings are now formatted to be 500 pixels wide 100 pixels high, regardless of how much text is inside those elements.
Now, if we go back to our HTML editor, the next thing I want to do is I want to change the margin value.
I want to change how much space shows up around my heading.
So, I'm going to go ahead and type in margin for the property.
I'm going to give it a value of 20px.
Save it, go back to our browser, and refresh.
As you can see, 20 pixels have been added.
Margins are cool because you can target the top, right, bottom, or left hand side of the HTML element individually.
So, what I can do, then, is I can go ahead and type margin-bottom as my property, and I'm going to include a negative value here, -20px
Basically, what I'm telling the Internet browser is that everything below my heading should be moved up 20 pixels.
So, let's take a look and see how that works.
As you can see, my paragraph tags, then, move closer to my heading.
Now, let's go back to our HTML editor and what I want to do is I want to demonstrate padding and borders.
To do so, I'm going to create a new class called new, making sure to add my curly brackets
As you can see, I've added that class name to my second heading tag, that way the formatting I do only impacts the second heading.
And what I'm gonna do is I'm going to change the padding to 20px.
Now, we're going to save that and let's take a look at it in our browser.
As you can see by adding a padding value to that HTML element, the Internet browser has added twenty additional pixels on each side of my element.
Also notice that the size of the element itself changed.
It is now 540px because it starts with the 500 and then adds 20 to the left 20 to the right.
The height has change too because it adds 20 to the top and 20 to the bottom so it's now 140 pixels high.
Next, then, let's give this thing a border.
When we add borders, we have to account for three different variables.
We have to tell the Internet browser how thick we want the border, what type of border it is, should it be a solid line, should it be dash, should it be a double line, and then we also can adjust the color of the board.
So, first let's go ahead and type in border-width and we're going to say 20px. So that's our border thickness.
Next we're going to define the type, so we say border-style. In this case, we're going to say solid.
And then we give our border a color, so that we can actually see it, and to do so we say border-color. In this case we're going to say red.
So, if we save that, back to our browser, refresh our page, you can see we now have a very thick red border. Again, notice that the size of the element has changed again.
It's added five pixels to its height and width because of that border.
So now if we add it up we are at 580 pixels, 500 from the base, 20 for the padding, 20 from the border
Now, we can, however, change this, so that the HTML element will only be as tall and as wide as we specify. It won't add any additional space.
To do so, we're going to include a universal selector, we're going to add an *
What it says is that every HTML element in this document, including the body and HTML tags, should follow this formatting rule.
In this case, inside our curly brackets, we're going to add the property box-sizing and the value we are going to include is border-box.
That way all of our values are based upon the height and width we identify in our CSS.
In this case, all of our h1s will revert back to 500 pixels wide 100 pixels high regardless of how much padding or border we add to them.
To demonstrate, if we refresh the page, you'll see that the value of the padding and the value of the border have been accounted for as the Internet browser renders that element.
There's one last thing that I want to show you.
As I said earlier, we can also start playing around with the position of some of our elements based off the box model.
And what we can do is change their location on the page.
So, the first thing we want to do is add a width value to our paragraph tags, in this case 300px.
Then what I'm gonna do is I'm going to include the property float and a value of right.
You can float to the left, you can float to the right depending on how you want to do it.
What the float property does is it removes it from the normal order in which the page is read by the browser and moves it.
So, let's take a look and see what happens
As you can see, both my paragraph tags, then, have been removed from the normal order and pushed all the way to the righthand side as far as they can go.
There are a lot more things that we can do to our HTML elements based off the box model, for now, however, just remember that using the box model you can adjust the content area, the padding value, the margin value, and the border property.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.