In this video, we'll introduce you to div tags, using IDs, and page formatting.
Continue to learn to code HTML & CSS in our NYC Web Development classes. For those outside New York, find and compare the best HTML & CSS classes near you or live online HTML & CSS classes.
Video Transcription
Let me introduce you to div tags. Using IDs and thinking about the formatting of this page beyond just having basic content, so here I have a heading 1, heading 2, some paragraphs, and as you can see this page has no limit on the width of the content, so it gets very ugly when it gets super wide like this because the text paragraphs just get so wide and it's not nice to read. So, in general, you want to probably put some sort of limits on the width of your page to make it look better.
We might also want to put a background color on the page, maybe have this column of content be a different background color than the background color of the page to kind of set the content off from the rest of the page. And because we want a different background color for the page and the content, I'm going to need a container for this content. Because while I do have a container for the page which is the body, I need two containers, one for the background color of the page which I'm going to put on the body, and another one for the content.
So, I'm going to start by adding a background color to the page. Now, everything in the main part of the window here, this is the body of the document, so I'm going to put a background color on the body tag. The body tag is a container of sorts, it wraps all of the content, so it contains all the content and I can make a style for that. Now, it's the most kind of high-level generic tag, so I typically like to put these first, although this style could work anywhere in my list of CSS here. And I'm going to put a background color on this, and the background color that the designer gave us, I'm just going to copy and paste that in from our design specs here.
A lot of times you work with the designer who gives you the colors that they want you to use, so I'm just putting in that hex code from the designer and I'm going to save that and refresh here. The whole page gets that background color, so instead of white being the default now, I've changed that.
So, everything has a default in a web page and we use our custom CSS to override those defaults. The default body background color is white, and now I've just changed that. I want to make the content stand out against this background color though, what I'd like to do is limit the width of the content and maybe give it a white background with a border so it stands out against this darker background, being brighter it'll draw attention to the content.
For that, I need an additional wrapper because I don't have another place to put this background color on. So, I'm going to need to wrap all of this content in some sort of tag. Now, in a previous video, I talked about span tags. A span tag is a way to span across a section of content and span tags are one way to group a set of content together. But, in terms of a web page, the span tag is what we call an inline element, and like images are inline that you could put three different images next to each other. If you put three different span tags, they'll go next to each other.
The difference between a span and a div is the div is a block-level element like headings and paragraphs, stack on top of each other like building blocks. Divs are block elements, if you make three different div tags, they will stack on top of each other. You make three different span tags, they're going to go next to each other. That's really the only difference. Since this is a huge block of content and if I was going to make multiple sections of content, I'd want one to be on top and another one down to be below this, I'm going to use a div tag to create a block-level type wrapping.
I'm going to come up here and before all my content right inside the body tag here, I'm going to create a div tag. I'm going to open the div tag up. Now, I do have to wrap it around all the content to finish this. I could actually pull this out here just so I can see that it's containing all of this content. Now, I'm going to go to the end and I have to end that div tag, so I'm wrapping it around all of the content on the page. Everything in the page is sitting inside the div tag, and the div tag is sitting right inside the body. Now, I can divide it up into more sections but right now, I just have one section of content that needs a different background.
You're going to have multiple div tags typically in a web page, so you want to give them a name. You could give them a class, that's one way to assign a name to something, and this would allow you to reuse that class on other div tags as well. This is going to be my like page wrapper, I'm only going to really have one of those. So, I could use a class, but you could also use an ID. So, I just want to introduce the idea of using an ID. You could use either an ID or a class in this case, you could use either one.
Let's just see the difference. I'm going to call this wrapper (an ID of wrapper). I'm just making up that name, so it's not a pre-made thing in CSS. You cannot use spaces in your IDs; you can use a dash or an underscore. You can technically use upper and lower case letters, but you must be case sensitive when creating a CSS rule that refers to that.
It's a little easier if you just go with everything lowercase and don't have to worry about upper and lower case. Whatever you name this (e.g. page wrapper, container, rapper Bob, etc.), you want to come up with a name that kind of describes what it's being used for. An ID can only be used once on a page, whereas a class can be used as many times (it could be once, but it could be more). I want to show you how to use an ID with CSS. When you refer to something that's an ID, it's hashtag. So, hashtag wrapper means an ID of wrapper.
Period is a class, hashtag is an ID. Go and find something with an ID of wrapper and how do we want to make it look? I could put a background color on this and make it white (#FFFFFF). You can actually shorten that up to just be three (if all three sets of values are pairs - e.g. one one two two three three - it can be shortened to one two three). You can't shorten it if the pairs don't match (e.g. a1). I'll make it three and then that container (wrapper) is white. We still have the page being that color, but we don't see much of that because there is some margin space inside the body.
I want to set a size on this container. Right now the div is filling out its container. I'm going to put a width on this - there's max width and width. First I'm going to show you width and why you actually want maximum width typically. Let's say I want to put a specific size on this, let's say 580 pixels. That will limit the width of this content, but it will force it to be that exact size regardless of the window size. If the window is bigger, you see some extra space. If the content is bigger than the window, it will force it to scroll side to side (which people don't typically like to do).
If this were visible on a phone, you'd have to zoom in and out to see all the content because you are forcing it to be bigger than a phone (which is a smaller screen). You really want max width in this case; the biggest it can be is 580. If you have extra space, it limits the growth of this div to 580, but it can be less. Maximum is 580, doesn't set a minimum, just says it can be up to 580.
That's going to allow you to deal with smaller screens that are smaller than 580. So it just reflows the content inside it as needed. Now, all the content is in the container, but there's extra space. How is that extra space distributed? Right now, it's all on the right. I want the extra space to be split between the left and the right. And that extra space, outside of this box, is called margins. There are two types of spacing that we can do on an element: space inside the box, and space outside the box. If I put space inside the box, that would be called padding. So let's do 30 pixels of space just so you can really see it. Now I have 30 pixels inside this box and that looks better with the text right up against the edge.
I don't know the number for the margins, so I'll say auto. By saying auto for the left and right margins, that will automatically balance them and, in effect, center the whole section. I remember the first time somebody told me that this is how you center a section; I thought that wouldn't be intuitive for me to figure out. I agree, it's not the most intuitive code, but once you understand it, it is just two lines of code.
I could also just shorten that up to be margin auto, so that all the sides would be auto. That would put nothing on the top and bottom, but it would even out the stuff on the side, so that would be even shorter code, which would still work fine. So margin auto would center this section within its container, and its container right now is the body tag.
I could also set the size of the border and the kind (e.g. solid, dotted, dashed) and then specify the color. Let's make it 13 pixels just so you can really see it. Now we have a much bigger border there. There is actually a bunch of keyworded colors where it's like red, green, blue, and papaya whip.
If you just want to quickly throw in a color and don't know the hex code, you can use pre-named colors. When working with designers, however, it's best to use hex codes. To specify padding, margin, and border on a box, you can use a shorthand property of "border" which requires size, style, and color. This is quicker and easier to write, and is known as "keeping your code dry"--don't repeat yourself.
You can also use longhand properties like border width, border style, and border color. In the beginning it doesn't matter which one you use, but shorthand is easier to write and is less code to work with. To make your code more efficient, set the font on the container and everything in the body will get that font. Some children can go off on their own and do more things, however, if you don't specify something they will follow the parent container's rule. This makes the code more efficient and creates a better looking page that accommodates different size screens.