Hi there. This video. We're going to talk about nesting. Div tags. All it means is we're going to end up doing this where we have our original yellow and pink box and we put other boxes inside of it, it's called nesting. It's not that fancy. You can see here boxes inside of boxes, they end up looking like this. In the end we're going to put text inside a box of position. Side of boxes. Yeah, let's do that. Now. I'll show you envious code. Let's go. All right. What we're doing is in your wire frames folder in your exercise files were looking to make this one here. Html div two. Okay. So same boxes. We'll use the same thing we've created so far. And we're gonna put two boxes inside a gray box and a purple box. Those are the heights. Let's work out how to do it. So India's code. Okay. We're going to do what's called nesting. Just means we're gonna put dibs inside of gives. Okay. So we have one div here and a second div here. Let's work on that first one, which is going to be our gray 100 ...

by 300. Okay. So where does it go? Depends on where you want it. I guess we've got this text in here. We don't really want anymore. That was just I guess I put that P techs in there to show you how we could highlight. And just so the box will have some content on it. Let's delete that for the moment just to make it nice and clean and clear. So what we're going to do is put a div tag just where that tag was. Okay. So if we go angle brackets Div Okay now we're not going to make a div then credit class up here and then come back and name it. We're going to do it all in one go. Okay. So instead of just closing it off here, now going to undo that I'm going to put in class before I finish it, then I'm going to call this one called box three. Okay then I'm going to close it off just to save some time. Okay? Rather than coming back and doing it later. I'm gonna put do I put anything in it? No, I'm just gonna leave it empty. But remember this is where it would go inside of that. Div let's leave it empty. Let's save it and it's not going to appear yet. Refresh, the text is gone and the dog tags in there but I can't see it. Okay, so we need to style it. We do not need this anymore. Okay, because I got rid of it And I'm going to call this one. box 3 curly braces and we're going to steal all of that. Okay. And we're gonna pick gray which is spelled both ways, wow, I get caught up with that every time gray look gray and gray. I don't know why I find that amazing. It's the same gray Davis about the different ways And and this one was a width of 100 and a height of 300. Here we go. Or 3000. That's not gonna work. Let's save it and let's check it out. Let's see if we made it work. Refresh. Look at that. So often when you're making a website, you'll make kind of like an overall website background, a big container and inside of that container you'll nest lots of different div tags, like the header and the navigation and the images and the carousel and all those things that is nesting. Let's do it with the second box. And I just want to show you a couple of things like if you don't get it in the right spot. So let's delete that P tag from here. Okay, that's where it should go. But let's say we do it just outside of here. Okay, so let's go, angle brackets. Div space class. Return. This one's gonna be called box four. Okay. Close it off with the angle bracket. Let's save at the top here. I'm going to copy and paste the whole thing. Real lazy. OK Box four. This one was purple. Is it purple purple? Purple and it was 1 20 by 3 50. So wow, it's actually 3 50 by 1 20. Height of 120. Let's give it a look and see in the browser awesome. Well not awesome. It's in the wrong place. Okay. So if you get it in the wrong place, it's really simple in the code to go actually you cut and you paste. Okay. I'm going to line it up so it looks nice and all the lined, let's save and now refresh it should be in there Awesome. Now if I want to say an H2 inside of that purple text. So here I could just put it here. There's nothing wrong with Typing H2. Closing it off and typing it in here heading to Okay. And that's perfectly grammatically and sin tactically dot that's a word correct. So let's give it a preview. It's in there. What ends up people, what ends up people doing what I like to do to make everything look nice is put returns in between all of this to really expose the nesting. So I know that there's a body tag inside of that is a box one inside of that is a box three. You can kind of see the indentation same with this box to and then inside of that is box four and inside of box four is H two. Does that make sense? All right. So we're getting the hang of this div tag division of space thing and putting boxes inside of boxes. Let's get on to the next video where we set our class project dumb dumb dumb homework time

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

How to Create Nested Divs

How to Create Nested Divs

Lesson Info

10. How to Create Nested Divs

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks