DIV Containers

James Rogers
A free video tutorial from James Rogers
Creative Thinker at Udemy
4.7 instructor rating • 1 course • 1,575 students

Learn more from the full course

HTML and CSS: A Guide to Web Design

Learn how to create an attractive and functional responsive website, without overly complicated terms and ideas.

14:07:58 of on-demand video • Updated November 2015

  • take the structure and fundamentals learned to create simple, and complex websites for just about anything
  • take many CSS and HTML fundamentals from example to production
  • find and fix common errors that occur in the coding process
  • Create a responsive site from scratch, or retrofit an existing site
English [Auto] And now we can move on to what I like to refer to as the building blocks of Web sites. These are what are known as div tags and div tags are what you will build. Basically everything out of if you really stop to think about it for just a second and think about how bricks are laid out to build the wall. This is basically how div tags work as well. Are stacked on top of each other next to each other. You can push them to one or to the left to the right. You can put them inside of each other and then you can use the access to completely style them the way that you want. So they really are the most versatile way of carrying your website structure in order to build complex responsive websites that look great operate great and people will be happy with. So we're going to go ahead and let's just clear out a couple of our old styles here. So we're left with just our paragraphs and I'm going to cut this one here in half. We still have our link Taurasi ss. Let's just clear the CSSA out. We don't need all that stuff in there and we've got three paragraphs. OK. So you can use div containers with or without paragraphs for this example. I'm going to take the paragraphs out and just to show you. So we took all the paragraphs out we still see them in our code. But of course over here now it looks like we have one paragraph because of course the H HTML document does not recognize more than one space and it does not recognize returns like a Word document would. So we're going now to go ahead and write our div containers around each one. And then at the end just close the K and what she'll see here. You can't really see it on the second one because of the way the paragraph ends. What you see here that it does cut them off into three separate paragraphs. Again the second one ends right there but the div tags don't have any inherent styles to them like a paragraph does. So there's no spacing or margins or padding or anything. It's entirely up to us to add that in. So if we were to go over down to our CSSA and we were just right DILV we could put in border we'll just make it red so it's easy to see. So save that and now you can see the separation. And we'll go over each of these CSSA commands that you see me using and early on here. We have a lesson specified for each one of these. So we'll go over borders and we'll go over margins and padding and everything. So don't feel like you have to necessarily understand all of this right now. It's important that you follow along and it will help if you sit there and you do this along as I'm doing it right now. So then when we get to the individual lessons it'll make more sense. But if you feel like you're a little lost right now that's ok. Just remember right now what we're trying to focus on our lives and not so much the styles but in order to understand things we have to apply styles to them. So it's kind of a catch 22. Go ahead write in the margin bottom of 10 pixels and you'll see now that there is a little bit of spacing in between there. OK. So that's great. So now you have kind of an idea of how these containers work. You can put them around anything and then stylize and the way you want. Now if you're used to seeing you know three column websites that's easy that's just controlling the width. And then what we want to do is shove everything to the left. So you notice that that's a very crude three column lay out and if we were to stretch this they would all stretch to maintain 30 picks 30 percent. So that's what we told them to do. Of course if I came in and I wanted to I could actually give it a solid amount say two hundred and then no matter what happens they're going to stay that with. So there is some flexibility with the containers on how they're controlled. Now let's talk about applying some classes to these containers because obviously you don't want them all to do the same thing all the time. So I'm just going to keep it simple by doing of class 1 2 and 3 if I come over here and I do a class of one let's say that we change the color to be blue for a class to font size and 3. So you can see where I made a mistake here. I need to make sure my brackets are in the right area. And for this one let's just say we want let's see two text shadow and we'll also change the color to be white. Ok so you can see now that we've got three very different styles for the text inside of our div container and our div container itself is still outlined in red because that's once again applying to the base and then the classes come in afterwards. Now it's important to note that there are some things that apply to the div itself and there are other things that apply to the things inside of the div text châteaux obviously will only work on text color will only work on color. However there is a variant to that and an easy way to do this is just to style these up a little bit more so we can see we could actually add a back ground color and let's just make it kind of this weird color or background color affects the div itself. If you wanted to put a shadow you would add a box shadow instead of text shadow and so now you can kind of get an idea of how these div tags are the div box container element whatever you want to call it how you can utilize these into creating a structure. If we go and visit my Web site use as an example a number of times here already. And let's just pull it all the way out. All of these sections here are created with div containers. There's one here. There's one here. Actually I think that there is a way here I can show you oh here we go outline Let's outline. I guess maybe it's there we go. OK. So this shows you just using the browser here you can see that I have a number of containers inside of other containers. Not all of these are containers. Some of these are h ones and things like that. But it gives you an idea of how many different containers are built on top of each other. To build this structure that eventually creates a Web site. And this is all based on the same foundation as what we see here. So eventually this will become this.