Welcome back, everyone, in this lecture, we're going to be talking about common style attributes,
things like backgrounds and borders.
And we're also going to discuss how divisions like Div and Span can come into play in order to contain
certain sections of our website.
Let's get back to the code editor.
OK, here I am back at our code editor.
What I'm going to do is I'm going to start from scratch again.
Let's delete this CSS code that we have so far and then come back to example that each HTML and I'm
also going to delete this.
And what I'm going to do is the following inside the body or create a paragraph tag.
And I'm going to say this is outside a div.
And then right below it, I'm going to create a dip.
Remember, this is kind of like a container that is going to create a division that contains things
inside of it.
So I'll create another paragraph tag that says inside the div.
There we go.
And then the other thing I want to do is create another paragraph tag that says inside the div and this
is a span.
And then what I'm going to do is actually call a.
Span and then here in all caps, I'll say span.
OK, so notice what I have so far in the HTML.
It kind of all looks the same as the outside of the inside the div and inside a div, and this is a
span as far as the results.
But here I can see I have the actual paragraph tags and I have two of the paragraph tags inside the
div.
So we're going to do is come back to our CIUSSS and begin doing a little bit of styling just to see
how it affects.
So if I say Div.
Curly braces, I can actually affect the background color by saying background color, and then let's
go ahead and choose color just to make it really obvious, I'll choose one that's green so we can see
here that I can actually begin to affect multiple elements by creating a little container for them using
this division.
That's why Div is actually a useful element because it allows us to break up our website or web page
into containers.
And you can also see I have a span that could actually then override the diff so I could come here and
then call the span tag.
And then give that, let's say, a background color of just again to make it obvious of red.
And you'll notice there is what's known as specificity.
Specificity basically says that there's a certain hierarchy of which tags are going to overrule other
tags.
You'll notice that it actually doesn't matter what order I play season in the CSIS.
If I said span first, it's still going to be able to overwrite the div, or if I put Spann next, it's
still going to be able to overwrite the div.
So keep in mind, there is a specificity, there is a hierarchy ordering to what is going to be able
to overwrite what.
And you can check that out by Google searching KSAZ specificity.
It's not super important for us right now to dive into it, but just keep that in mind that there's
going to be certain calls that are going to overwrite other calls and typically kind of the smaller
scale is going to overwrite the larger scale.
Hopefully, it's quite clear that Spann should probably overwrite div because we're focused on this
very specific portion, and that's actually where the word comes from specificity.
We want to be kind of overwriting for more and more specific things.
Now you'll also notice that back in the HTML, I actually have a body tag.
If I wanted to do something for the entire body, I could also call that here in the CSIS.
So what I could do is, say the body type.
And let's give this a background color, so we can say background color.
And again, to make it obvious, let's choose something like cornflower blue.
Now you can see I have a background for the entire web page, so calling things on the body allows us
to have styling effects on the entire web page.
Other things we can do that are common style attributes are to begin dealing with the borders.
This is going to be especially useful when we deal with things like tables.
So let's actually do it on this device.
Remember, that's a little green division here.
I can say a border.
And I can say border color is going to be equal to and let's try to make it obvious, orange.
However, notice it doesn't show up yet because I haven't actually assigned the thickness to it or a
style, so I can say.
Border.
And let's give it a width.
So the border with you actually have many ways of classifying this.
You can say 10 pixels.
And we'll say border.
Style, and let's have it be a dated style.
And once you actually have the style in place, you can then see the border.
So notice we have the fine, a couple of things the style, the width and the actual color in order
to see everything working together.
There's definitely many different styles you can choose from as you begin to type border style again.
We have a lot we can actually do, so dashed is another style.
Clearly, this is a kind of a really ugly website, but you get the idea.
You have things like border color with style, etc. many different attributes you can use.
And this would be useful for something like a table, which you know is going to have borders.
And that's really it for this lecture.
We just wanted to plant the seed of the idea that you have the visions and spans available to you in
case you're trying to deal with the same type of elements, but want to separate them out into different
containers.
So you can think of this device as its own larger container.
And you also have span as it's a little smaller container.
And typically, as you get more and more specific on an element that's going to overwrite the less specific
so you can think of body as kind of the least specific out of everything because it's all technically
in the body.
And then as you get more specific like this division that's going to overwrite the background color
of body and then you get more specific on span, that's going to overwrite the background for div and
so on.
OK.
So that's it for this lecture.
Again, you have properties like backgrounds and border colors that you can edit and then you have divs
and spans.
However, we're going to go into even more detail for other options for selections known as classes
and ideas.
I'll see you at the next lecture.