Welcome back, everyone, to this lecture, we're going to discuss selectors.
We've seen already that we can use divs and Spann's to create containers that apply styling to only
certain elements within those dips and spans.
Even if they share the same tech like a paragraph outside of a div versus a paragraph inside a div,
however, we can use selectors like Class An ID to have a lot more control and flexibility over this.
Let's imagine a situation where class and it would be very useful to us more than what we can do with
just a div.
Imagine the following HTML code.
I have three paragraphs here.
Two are outside the div and one is inside the div.
I can see the text says outside div.
The next text says inside div and then the third text says also outside div.
Now imagine I wanted to apply some sort of unique styling to each individual paragraph, so I want these
three paragraphs to each have their own unique text color, for instance, right now with the use of
divs and span's.
We don't really have a good way to do this.
I right now have separated out the paragraphs from being inside the device, but then I also have a
paragraph tag within the div, and I'm not really sure yet which one's going to be more specific.
So I'm running into a bit of a conundrum here where I can't figure out a way, even with divs, to uniquely
style each of the three paragraphs.
This is where classes and ideas can come to help us.
So we can assign elements a class attribute with a specific name for CIUSSS purposes.
Classes are typically use friendships to group the styling everything inside the div container together
and classes can be repeatedly used across a web page across elements.
Then there's also an ID attribute, which can be used to also connect for CSA styling, but the IDs
should be completely unique and used for only a single element on the web page.
So classes you can use more than once and for many different types of elements.
IDs should be unique for that particular element that you want to style.
Let's revisit our HTML example, where I want to apply some sort of CSS styling to each individual paragraph
that is different and unrelated to each other.
What I could do is for the paragraphs that are outside the div is assign them a unique ID.
So what I do is inside the HTML, I create an ID attribute and assign it to a unique value.
Notice how the first paragraph tag has an ID equal to the value one.
That's just a string code.
You can choose and then at the very bottom outside the div, I have the paragraph with the ID attribute
equal to two.
I cannot use this as unique identifiers for those specific paragraphs, so I don't need to worry about
having to assign some text color to all paragraph elements.
I can now assign it to the specific IDs, then for something like a div.
If I wanted to style everything inside that div, I could assign that a class and the class is something
I can use over and over again on the web page.
So if I create another div on this web page, it's OK for me to assign it to the same class.
And note now I have three essentially unique ways of grabbing these elements and assigning them styles.
So now CIUSSS is going to be able to actually style these paragraphs different things like different
text colors.
So let's check this out in HTML and CSS in order to really understand it.
All right.
Here I am back inside our code editor.
Let's go ahead and delete some of the CSIS that we created from the previous lecture.
And I'm also going to.
Delete.
The HTML code lets actually create the same situation we had previously in those slides, so I'm going
to say above the div for a paragraph tag, then I'll create a div and inside this div I'll create some,
Texas says inside the div.
And then what I'll say here is create another paragraph that says.
Below that, if.
OK, so it looks like the same here in the output, but clearly we want to be able to add styling to
each of these paragraphs.
How can I do that?
Well, I can make use of things like classes and IDs, so classes typically go with divs and we can't
actually reuse them.
So we're going to say class is equal to let's create a string here called my class.
Now the question is, how do we actually refer to my class here?
Previously, we were referring to elements just by their name, something like Div, and then I would
say something like color for text.
And maybe use Orange, for instance.
OK, so that's one way I could do it, but if I want to only apply it to this specific div, so I'm
actually going to create a div here, and let's also create a paragraph that says 2nd div.
Notice the second div is orange as well.
So maybe what I want to do is instead of using the div, I'll only use the class to tell CST, Are you
using a class?
Use a period first and then you type out the class name, which in our case was my class.
Then you have your curly braces and you can assign the styling like color red.
And note now, since I'm only referring to my class.
Notice how only that first div paragraph and everything inside of that div is going to have that text
color read, but it doesn't affect any of the other paragraphs or any of the other dibbs because I'm
only referring to my class if I connect that class to this other div by saying something like class
is equal to my class.
You'll notice then it's actually connected.
So that is how a class works and the difference between a class versus an ID that we're about to see
is that class is expected.
It's OK to use it multiple times on the same web page.
If you want something that is a unique identifier for just a specific instance of an element.
That's where you use it.
So I can say something like ID and set this idea equal to one.
Then if I want to actually apply styling to the ID element one, I come back to master's thesis.
And then the next item I can do for an ID is you use a hashtag so ID selectors use hashtags and there
are to single out an estimate element.
So we named that ID one.
And then here, I'll say color is blue.
All right.
So use hashtags for IDs and periods and the class name you can see now, I've specifically targeted
that ID.
And let's say we want to also have a specific target for below the div.
I can give this an ID of two.
Then I'll come back to the case.
Say hashtag to.
And let's give this a color green.
OK, so I have above the div inside the div, below the div and second div, and even though these are
all paragraph tags you can now see, I have a lot more flexibility in how I can style things.
And let's imagine I wanted everything inside a div to have the color red.
Well, then I can just put my paragraph tags inside the div so I can say also inside the div.
And then if I wanted this to also have that effect, I can grab class again.
Put it in here and now you can begin to see.
Also in second, if you can begin to see how you can begin to organize containers in order to style
only certain things.
So the takeaway here is you use IEDs for a specific element and these should be unique.
You should have two IEDs on the page that have the same name, even though it will technically still
work.
That's not really what they're meant for.
They're just meant for unique identification of a specific element.
If you do want something to be reused, you can use classes for that.
Now, the classes need to be inside a div.
No, not necessarily.
You can have this be a class instead.
So I could put this class attribute inside a paragraph as well, and it's going to work totally OK.
So I can assign everything here with the class and notice.
Now everything is read.
And if I remove a class from something, you'll notice it turns black over here.
So classes are OK to put in on a single element level.
You'll typically see them inside a device because it just kind of works out that way that you get this
nice little container.
But you can then pass in styling codes, too, but it's totally up to you, and it depends on the situation.
OK.
So that's it for the idea of classes.
And its main takeaway here is you can assign classes and IDs.
Classes use a period in order for that selector to work IDs, use a hashtag in order for that selector
to work.
Thanks, and I'll see you at the next lecture.