Coding 101: HTML | Div Tag | Nesting Divs | Tutorial and Coding Example

hey everybody and welcome back to my channel what we're gonna be doing today is we're gonna be talking about the div tag and how it's used in HTML let's go ahead and get started okay so a div tag is a division on an HTML document it is a container that can house HTML elements you can use all different types of content inside of the div tags and then you can style them with CSS or manipulate them with JavaScript and so I'm going to show you an example and I'm going to show you how to nest divs or boxes that's what we're gonna call them inside of one another so let's go ahead and get started with that code okay so I went ahead and opened a new project in PyCharm and I went ahead and created a index.html file and then a style dot CSS file and those are the two files that we're going to use then I went ahead and linked my stylesheet right here like we learned before to my HTML document and so when I start adding styles to my divs then it'll already be connected so inside of my body tag I went ahead and created my first div tag right here and as you can see it's just div now because we are going to be creating multiple divs and we're gonna have boxes nested inside of each other then I want to name each one of these divs and so I'm gonna give them an ID so this first one when I want to differentiate between the different divs then I'm gonna give it an ID for like a name so this ID is going to equal box 1 okay so this will be my first box and as you can see when I run my code over here in the browser nothing shows up and the reason why nothing shows up is because I have to add CSS to this first box so I have to add the height and the width and if I want it to be a color or whatever contents I want to be inside I need to put in here because right now it's just an invisible container in my browser so if I go over to CSS now that I've labeled this box 1 what I'm gonna do is when I'm trying to grab this div with this ID of box one I have to say hashtag box 1 so when using an ID we have to say hashtag box 1 me zoom in so you can see so hashtag box 1 so in box 1 I want the width to be 400 pixels and then I want the height to also be 400 pixels because I want it to be a box and then I'm gonna choose a background color and again you can choose literally whatever color you would like okay I'm gonna save that save and then I'm gonna refresh over here in my browser and as you can see now I have this box or container here in the browser so if I wanted something inside of it I could say h1 this and save it and refresh and then as you can see now it's labeled this is box 1 Cakery so now I'm gonna repeat the steps but I'm gonna change the size of the boxes and then I'm also gonna keep the div tags the upcoming big div tags inside of this initial div tag because I want the boxes to be nested inside of each other and I know that sounds like a whole lot but it'll make sense as I code along here ok so after my h1 tag I'm gonna hit enter and then I want to create a new div and I'm gonna say div id oops ID equals and this one is gonna be called marks - and I'm just gonna hit enter right here I'm gonna save and now I'm gonna go back to CSS and so just like I did before this has an idea of box - so to grab that so I can style it I'm gonna say hashtag box - and inside I'm gonna do the width and I'm gonna make it a little bit smaller so it's nested inside so I'm gonna say 300 pixels and then I'm gonna have a height then I'm gonna choose another background color any color doesn't matter I'm gonna save this and then refresh and so now I have another container and I'm gonna put an h1 tag inside and I'm gonna call it box to save so now you say the see that this says this is box one this is box - all right we're gonna keep repeating this stuff so now I'm going to do div ID I'm gonna say box now I have box three and then I have an h1 tag inside that says this is box three so now I'm gonna go again to my style sheet I'm gonna say - tag box three I'm gonna do a width this time of 200 pixels all right and I'm going to choose and in your background I'm gonna say that refresh and see now I have the third box inside of my other place all right so let's just do one more so we can kind of see what that it look like all right so I'm gonna do this again div ID so the name of this box is gonna be box for it inside I'm gonna put an h1 tag this is ours for nothing shows up yet because I need to go add the height and width of the box and then the color that I want so I'm gonna choose box for it I'm gonna stay with pixels right pixels and then I'm gonna choose a new background say refresh and now this says this is box four so this is just a cool way to show how divs work and what they are and then that you can also put things inside of the div so you can put pictures you get the videos different titles all sorts of things and you will continuously see divs as you are working I am going to link some more resources below so that you can keep practicing with divs and also check out my coding challenge on aligning divs and changing the colors of them and getting them centered and I'll link that as well thanks for tuning in and please subscribe to my channel to check out more coding tutorial videos

Channel: Awakening STEM

Views: 5,752

Keywords:

Id: VmDrVTshE2k

Length: 8min 17sec (497 seconds)

Published: Fri May 29 2020