HTML & CSS for Absolute Beginners: Divs and Spans

Key Takeaways

divs and spans are two elements you're going to be using a lot of especially divs divs might be the most common element you actually use in everything that you build but there's a reason that I've waited a while within this course to actually talk about them first of all they're kind of useless not completely but mostly useless if you don't have classes to be able to style them because they're generic in what they do and also because I wanted to spend a lot of time talking about the semantic elements first because divs and spans are elements that don't carry any semantic meaning to them we use them for organizational purposes so we can style things in certain ways but not to add any actual meaning to what we're creating and so an example of that we can actually see in our design here uh that we've been focused on for this course where we have this grouping over here of of things right there's two paragraphs that are grouped together and if I want to be able to style this I can't give each one of those paragraphs a background color and a border cuz that just wouldn't work that just create a border around one paragraph and then a border around another paragraph So instead of that if we come and take a look this is right here where I've actually broken this up into multiple paragraphs now as well so if we come down into that one that's in my index what is bouldering right here and so it would be I'm just looking for bouldering strips I'm going to turn off my word wrap here at the beginning here's my experience so I'm just looking for where the bouldering sentence is right there so I'm just going to close this paragraph off and then I'm going to create a new one and this is why word wrap can be a little bit awkward cuz it's getting a little bit squished there let's make this a bit bigger so if I do that and then we can separate those two so I'm just have one paragraph there and one paragraph here and it's refresh so we can see now we have these two separate paragraphs instead of one like we had in the original design that we were doing and I want to give both of those a background so what I would do is I can come over here and I can create a div and then it's just like that div it stands for division so we're creating like a division of content and there's absolutely no semantic meaning it's just for me to be able to grab and basically make this into a box that I can style and do my own thing with so this division of content for me to style on my own and I can close that div there so open div paragraph paragraph and then I have my closing div and because these two paragraphs are inside there I'm going to select it all and push tab to move it over just so visually I can see that they are inside of that div now I could select this div by coming into my Styles here and making a div selector and that would select it but we're going to have to use divs for a lot of other things in this project and if I add a background color to this div then every div I have on my page is going to have a background color and that would be kind of annoying so that's why I wanted to wait until we knew about classes so instead of that let's jump back on over to here and give this a name and I do want to talk a bit about meaningful names too cuz if if I just put a you know I could call this anything I wanted really let's go look at the design like I could just call this grouped paragraphs if I wanted to but it's not really a great name I could call it box if I wanted it to but that's not really a good name either so why don't we just come through and call it like teal background right so I'm going to come here and say class is equal to teal BG for teal background area and we're going to hit save on that and that whole div will be something that has the teal background it's going to come with the Border it's going to change the fonts and everything else and then we can come over to my Styles and instead of the div selector it's a class selector so it has to start with the dot and then it would be teal BG opening close curly braces and then on this now I could come through and add the colors I need so for the background color we could say background color is and I've got it from offscreen I had uh this color right here and let's go refresh and take a look we can see that's coming in that's awesome uh I'm also going to make this a bit smaller so we can look at both at the same time CU it makes life easier when you're looking at your browser and your editor at the same time uh then looking at this we just have to apply the right things to it if we compare that to the design well we have the border that needs to come on there we have a different text color and we have some padding so if you're following along with me I'd actually encourage you to pause and add those things in here yourself and then once you're done on pause cuz we're going to do that and fix up a few other things uh after that CU we need to talk about spans still too all right and so for the Border here we can let's start with the Border anyway we can come in and it's this color is the color of my border uh then that's going to be solid and I'm going to do 10 pixels it might be a bit big but at least we'll be able to see it come in there and that looks pretty good the color of the text should be white so we can say color is FFF ffff which is our white color you could also just use three fs and that would also work and you could also just write white and that would also work uh so the color comes in that's great and we don't want it touching the edge of our box so we can also come in here and uh I'm going to do it right here we can add some padding and I don't know we don't need too much I'll just add 10 pixels maybe it's 10 or maybe 20 pixels of padding right there to give us the spacing around that that we want and now one of the things is I've just set these Styles up here but you know what if we come and take a look at our design now I when we had the version one our footer looked a bit different we had a footer that had this different blue color and I updated the design and we changed the color and we're using the same color on the footer now so you know what might be a good idea is instead of taking all these same Styles and applying them to the footer is removing all of these from here CU we don't actually need them or we do want the textaline center so I'm going to delete this and delete all of these things so the footer can keep my text align Center on there we go take a look we just get a text align Center all the way at the bottom but then what I can do is we can go over to my index go all the way down and class is equal to tbg and that gets it here too so they're identical and then we can go over to our getting started page CU that needs the same thing class is equal to tbg and now if we go on over to the second page and we go all the way down we get the same look of it there and if we ever needed to update anything say the color isn't say the Border got updated and we come through and for now we need a different color and we're going to make this a double border for some reason it's probably going to look really ugly but we can have that double border coming on and now if I go back to my homepage all of those will be updated at the same time so the nice versatility of having a class like that if elements look the same they should be sharing the same class on them now I don't really like that change so I'm going to undo it and go back and to match the design uh that we had and there we go they're all the same now so I'm happy with that uh we can keep on going with this because another thing that I wanted to talk about was spans and spans are a very much like divs in that there this meaningless box that we can put things in a div though is a block level element so here when I added it in let's go find it I'm going to turn off word wrap because it'll make my life a bit easier to find we have this div we have this div here with two paragraphs in there and the div is forcing new Lines Just the Way divs work if you were to put a div in the middle of a paragraph it would actually break your paragraph into two separate paragraphs and add this box in the middle of it divs are block level elements just like our sections our main our body our paragraphs our headings all of those things always stack one on top of each other sometimes we need to select something in the middle just like we've had our strong tags that were coming through and making things bold or over here we were adding italic with our emphasis tag we might need to do the same thing but we just want to change the style of something for example in this layout I just want the word bouldering to be a different color it's not necessarily more important it's just a stylistic change that I want make to my text Cu it looks like that it's very common to have highlighted words in titles or headings within websites just because stylistically you know it's the choice of the designer just to add a little bit of stylistic interest to the page and so if we come all the way up here I can't put a div in the middle of a sentence here because this is like running text so for that it has to be an inline element and that's what our spans are for and you can think of spans like a strong or an M but with no default styling on them just like a div actually has no default styling it's just this box that comes in you won't even know it's there until you start styling it so a span is the same thing we do a span close span drag that over to here and you generally want to give it a class so in this time let's give this a class and I'll call this one teal text because it's going to make my text teal we had the teal box now we have some teal text so I can hit save on that go over to my Styles teal text and I'm guessing it was this color right right here so I'm just going to copy that one without looking at my notes and say the color is this hit refresh and then I can see that the color there has changed and I also see that I'm pretty sure it's the wrong color I think it needed to be a bit lighter so we'll try that one instead so I have this class of teal text and it's coming and it's highlighting this word for me but interestingly enough let's go look at the design again while I'm using this for a span here if I come and look through this design this heading is orange if I go to my second page this heading is still orange one of my H2S is a different color and so I need to be able to change the color of this and you could pause the video now and think about how would you change the color of it we already have a class so we don't need a new thing to change it we have a teal text that change this element right here so how could we use that to change the one that's over here I'll give my solution in a second but pause to think about it for very quickly and hopefully you did just that and what we're going to do is let's go over to my index go and find that other H2 so there was the second one y bouldering I want this one to be the other color and what a lot of people who are watching this did is they came in here and they added the span and if you did this awesome it's not what I would do but at least you're thinking about things in the right way class is equal to TL text and we'll see that will work and right there awesome it worked if you did that you did the job that you wanted it worked you're good to go but I can show you a more effective way of doing the same thing uh spans in general I want you to think about them if I wanted to do something like this where I'm changing the middle like there where I have two different colors within the same string of text that's where spans are really useful the same way I used it up here where I have one title and I need to change a word within of there just like I said like we've been doing with the m tags or our strong tags to make bold or uh to make bold or italic text or for our links even where we're linking text within a sentence if we have the entire thing is changing a class can be used anywhere just like we used our class on our div here and a class on our footer down here we can do the same thing with the class here where I can take this span out and I can just put the class directly on the H2 itself and like that the H2 will change cuz I'm telling this H2 to that it's teal text so it's changing over and it's getting that color while leaving the other ones to be the way they were before