Introducing Divs and controlling them with classes and ids

in this tutorial we're going to discover how to use divs in our webpages and how to's can be used to layout our webpages better so to start off with I've just got a basic HTML page with just a head section with a title and a link pointing to a style 1 CSS and I've got my style 1 by CSS file over here as well with nothing in it at the moment so straight away I'm going to put in a div tag that's all these divs are they are just another HTML tag and I'm just going to put some content in it I'm just going to put the word test in it and then I'm going to close off the div with an end div tag let's save that and let's see what it looks like in the browser and there it is we just get the word test doesn't look as if anything is there other than just the word test and from that point of view I supposed to use our slightly similar to paragraphs divs and observes don't actually do anything by themselves we can't see them they don't give any height or width unless it's content in them and so therefore we have to use styles to make them useful or valuable so I'm going to go back to my text editor and then I'm going to go into my strategy that's connected to this HTML page and I'm going to put in the selector did and I'm going to open up a rule section here and in there first thing we're going to do just to make it obvious adversative there I'm going to put the background color and I'm going to set it to a red okay let's save that go back to our browser and let's take a look when i refresh so you can see again without putting any width or height on it and the width just spans across the whole window width the height is dictated by the actual content that's in the div unless I tell it otherwise and just to show you that if I go back into my code and I'll go back into my HTML if I take the content away from inside this div because I haven't got any with a high spitted defined in the style sheet and I'll go back to my browser now and refresh I don't see anything at all the div is actually technically still there but because there's no content to define any Hyginus and I haven't defined height in any other way it just disappears let me go back to my code I'm going to put that content back in there and save that and then I'm going to go back into my stylesheet as well and I'm going to define a width and a height for this did so high I'll define it as a pixel value 150 pixels and the width I'll define it is the same so I'm going to get a square date let's save that let's go back to the browser and see how that works so I can see I've got a square Dave there I can do lots of other different rules on that div I go back to my strategy for instance I might want to put in a border so border I'll do the short end version so I'll put a 5 pixel border on it I will make it solid and I will color it black so I'm going to go back and refresh and I see the border come on that div and there are a multitude of other different rules I could apply to that if background images I could alter the margins the border size the padding's and many other items as well but for the moment where we want to go that's fine for me now I'm going to go back to the code and I'm going to go into my HTML and rather than just have one Dave I'm just going to add in another three days now remember in my stylesheet when I actually made the rule I just had a single Dave as a selector so that means any Dave that props up in the HTML pages that point to this strategy they will all take on these rules of this div selector so if I go back to my browser and refresh I should see all four of my Dave's there pop-up now as you can see unless the browser is told otherwise through rules in the CSS sheet the tips will just come in one after the other and that will come in on separate lines that's because by default there's no flow set on any of these divs so they are in line meaning that the whole div if you like takes rights over the whole line that the dot and so it won't allow anything else beside it and really all that I can do there without floating it is I can just change the margins left and right and move into the center of that kind of thing every other div that comes in it goes on to the next line and the browser puts the third one in on the next line after that and so on rather than keep it that way what I'm going to do is I'm going to get all my deeds to float in beside each other and I'm going to do that again by putting it into my strategies in the div section and remember all the divs that are in the HTML page because this tip selector is here and it's got to pick up on all of these rules so when I actually put in this property flows and I ask all the dudes to floss left and all the dates should pick up on that rule so I'm going to save that and I go back and let's refresh by setting the floor property to left it changes all the objects that follow that rule and it changes them into like floating objects on on top of a pool of water so if the browser can it will fish anything that comes after it in beside the property that is floated left and so because all of these different objects they all follow the floor property left they all saltine as long as it's room but you'll find eventually change the browser window size and I move it down you can see that it's only if the actual browser has room to actually fit the properties inside the width of the browser window that allows them to come in beside one another it's a lot a bit of a little buffer in between each of those different tips I'm going to go back to my strategies and again in a dip selector I'm just going to put in a slight margin all the way around I'm going to do margin left right or any of those it's just margin all the way around it is and I'll set it to something small like 20 pixels so I'll save that go back and refresh we can see that they're all spread out by 20 pixels now it's not that this is 20 pixels here because this first div it's got a 20 pixel margin all the way around and this second div also has a 20 pixel margin all the way around this distance between these two dates is actually 20 pixels on this side and 20 pixels on this side so that's actually 40 pixels looking at the divs that I have so far they are all identically formatted because they are all following this div selector that is in the actual style sheet doing that it's a little bit restricted because I may want other divs the two slightly different things from one another and then they have unique properties and if I just have one single tip selector I can only have the more looking the same so I want to change that I want to have some of the properties being the same of all these different divs because most of the time I want them to keep the same size I want to keep the same black border at but each individual div I would like them to have different background colors so let's have a look at my strategy and let's see how we can achieve that the first thing I'm going to do is all of these properties that all of the divs have in common I'm going to define them as a class and the way I do that is I nip in here beside the div selector and I put in a dash to note denote a class and then I put in a label a label that I choose myself just to describe what type of class until this is so I'm saying that all of these divs are content divs that label once I've decided that that is the label of the class I need to go back in to my index.html page and I need to show that all of these different divs they are of class content so I put in a class attribute in the start tag of each of these divs and call it content I'm labeling them all content so they will all still pick up on those rules so I copy that there there and there that's fine all of those divs now are off class content and they should pick up on any rules that have that content as the class so going back to my browser nothing is actually changed when i refresh that but it just allows me a little bit more flexibility now to actually then go ahead and define nine unique IDs for individual dibs that have unique properties so like I said what I would generally want is that each of these different divs that they have different background colors but all the other properties remain the same so I'm going to go into my style sheet again and I'm going to create IDs and I'm going to say there are particular days with unique properties that only they hold so any time that I want to do an ID I put in a div selector and this time I'm actually going to put in a hash symbol to denote a particular ID just like with the class I get to choose what label I put on any particular ID so for the first div I'm just going to write in the label first and I'm going to open up the curly braces there and just for this first div I'm going to define what the actual background color is now I'm going to take the background color from the actual content class so I'm not defining the background color in the class anymore that all of the different dates will pick up I am just defining it for each separate ID and so any div that has an ID attribute in the HTML and that is set to the value first will pick up on this background property here any of the divs that have a class attribute identified are set to content will take up on all these content rules so I'm just going to save that and again I'm going to go back into my HTML and I'm going to say that this first div is of ID first so that first div will pick up on all the rules in the content class as defined in the strategy and also all the rules in the first ID as defined in the statute all the rest of the divs for the moment they are just going to pick up the rules on the content class and remember and after taking out the background color rule from the content class so what I would expect to see is that the first div picks up all the rules from the content class and is colored red because that background color has now been moved to the first ID in the stylesheet here and then all of the other divs will remain white because no background color has been defined for them let's go to the browser take a look and that's what happens now I'd like to go back to my stylesheet and I'd actually like to keep on going with this idea of IDs and create three more IDs second third and fourth with different background colors for each so let me go ahead and do that I'm going to copy what I have there for that selector two three four I'm going to change the actual ID names to second third and fourth and I'm going to change the colors so I'm going to have red for the first one green for the second blue for the third and I am going to put yellow in as the fourth color so now last piece of the jigsaw is I have to go back into my HTML and identify this second third and fourth ID div sorry the second third and fourth did as ID second third one has an ID of third and the fourth as an ID of fourth there we go so again all of the divs pick up the rules from the content class and have them just defined in one place at the top of my stylesheet here and then each of the individual divs depending on what ID they have pick up the different rules from those different ID areas so what we should get now is all of the divs look the same at from their background colors it each of them have a separate background color so let's go back to the browser and check something's happening with my I just had an extra digit in my hexadecimal color sorry about that so save that go back and refresh and there's the yellow so organizing my dears in this way where I've got all of the rules they share in common in one class and then each of their individual rules in different ID selectors it makes it very efficient I can make sure that any of the rules that they all share together that I only write the mods and that means that if I have to change them I only need to change them at one place whereas any of the different things that make them unique well I can do that as well in the different ID areas so for example if I decided that I wanted to make all of the difference content is a little bit bigger so instead of being 150 by 150 I made them 250 by 250 I could easily do that just in one place refresh and they all pick up on it and also if I wanted to change one of the unique properties so for example if I wanted to change the background color of this fourth content div to purple I could just do that by moving down here to the fourth ID and just changing the color to purple the back and refresh should I get my purple color so I've complete control and the great thing about it is is that my CSS rules are very very efficient I'm only writing the bare minimum of CSS rules so my CSS stylesheet is that kept nice and tidy and easy to change

Channel: Q Visible

Views: 254,659

Keywords: Span And Div, HTML, CSS, IDs and Classes, Divs, UX design

Id: kGA9RIFiyIE

Length: 15min 19sec (919 seconds)

Published: Sat Nov 16 2013