Welcome back, everyone, to this lecture, we're going to briefly discuss divs and spans.
Divisions in our HTML can be created with the div tags.
These will allow us to separate out our HTML into different sections, which in turn will become useful
later.
We'll want to apply certain styles to certain sections of our HTML code.
Spans are very similar to Dibbs, except they're used to create inline containers, so spans use the
span tags.
Now it's not going to be entirely clear what the effect of these tags are beyond just simple organization,
because once we know CIUSSS, then we're really going to see why divs and spans are useful, because
then we can actually use those tags to apply styles to only the content contained within a div or spam.
So let's quickly explore these tags in our code editor.
All right.
Here I am back inside Visual Studio code.
Now what I'm going to do is just create a simple paragraph here, and let's call this sentence one,
and I'm going to create yet another paragraph or call this sentence, too.
And a couple of spaces create another paragraph and call this sentence.
Three.
Now what if I wanted to actually organize sentence one and sentenced to three within their own container
or division that we later on when I actually can apply effects to them?
I could only apply it to sentence one and sentence two and not apply sentence three.
Often you may just want to say something like apply an effect like a text color to everything of a paragraph
tag.
But if you only wanted to apply it to certain paragraph tags, it's better to start separating them.
That's where the div or division comes into the.
So I'm going to create a division or div, and then I'm going to stick sentence one and sentence to.
Inside of that div, and let's create another division here and then stick sentence three.
Inside of that.
OK, so since we technically only know each HTML so far, you may be thinking, well, I don't really
see a difference in the sexual page between what you had before and then separating out into the visions
to really see this change.
I'd have to style one of these divisions.
So I'm going to add some CSS styling here, but don't worry too much about understanding the actual
code.
This is just for demonstration purposes only.
We'll learn about CSS in the next section.
So what I'll do here is inside my div tag.
I'll say style is equal to and then in double quotes.
Say color, colon, red, OK, and then don't worry about this little square here, it actually allows
you to change the color on the spot visually, but I'm just going to ignore that for right now.
So what's actually happening?
Well, I've been able to apply a style to an entire division.
That way, everything inside that division ends up getting that style.
This then allows me to separate out different chunks of my web page into having different styles, which
is quite useful.
Instead of having to rely on having to apply styles across maybe an entire paragraph tag for every item
on the page.
I can begin to organize my HTML code using divisions now spans.
You can think of them as an even smaller container that only applies to things inline.
Let's imagine I only wanted to color something like three or only apply something to three.
That is the word three.
I can use the tag spam and then put.
Three inside of that spin now to actually show you the style change.
I'm going to inside of that span.
Copy this.
And let's place it inside that span.
And again, don't worry too much about understanding the CIUSSS code, but you can see here that I'm
applying that style only to what's inside this tab, which is the spam.
So what's the main takeaway here?
The visions allow you to organize your code into the vision sections span, allow you to basically make
these little containers in line.
So the use of a division is for a kind of large containers of your website.
Span is for affecting something just a little portion in line of something, so maybe part of a heading
or part of an actual list item.
You get the idea.
Don't worry again too much about the code for the CSIS.
As long as you were able to understand this portion of organized divisions and then tagging something
within another set of tags for a span.
You should be good to go.
We're going to revisit this later on when we talk about CSIS.
OK.
That's it for Divs and Spann's.
I'll see you at the next lecture.