Instructor: Hi, guys, welcome to another lesson on CSS.
In this lesson, we're gonna be talking about CSS selectors,
and this is going to help us choose where to apply our CSS.
We've seen previously that we can create CSS rules
by simply specifying two things.
One is the property we want to change.
And after a colon,
we get to specify the value to change that property to.
In this case,
what we're saying is we wanna change the text color
into a blue color.
Now we've come across some of these rules already
and I'll be showing you in a later lesson
in the next section how to find out more about these rules.
But more importantly, in this lesson,
what I want to talk about
is the part outside of these rules.
It's the part that comes right here.
And this is known as a CSS selector.
What is a CSS selector?
Well, it's the part that selects the HTML
in order to apply whichever rules
go in between these curly braces.
How do we know which part of our HMTL file
to make the text color blue?
Well, we look at this part
and we can see we're targeting the h1.
Now this style of selector
is one of the simplest CSS selectors.
It's called an element selector,
and all it does is it selects a particular HTML tag.
So in this case it's targeting all h1s.
If your HTML is any good,
you should only have a single h1,
but it'll be different for other tags.
If you had anchor tags, or if you had paragraph tags,
or h2s, or any of the other HTML tags,
then when you select each of these in your CSS,
it means apply to all elements
that have that particular tag.
Let's see this in action.
Here, I've got two files.
One is the index.html and another is our style sheet.
And inside our index.html,
we've just got three h2s, Red, Green, and Blue.
And when displayed or run,
they'll look like this, three headings.
Now, if we go ahead and add a little bit of CSS
and target our h2 element,
in this case, we're using an element selector
which is simply the name of the tag,
and then after the curly braces,
we can define whichever CSS rules we want.
In this case, turning the color of the text red.
If we go ahead and run this code,
I want you to imagine what you expect to happen,
which of these texts will turn red?
Let's go and run the code.
And once this change is incorporated, this is what we see.
Red, Green, and Blue all turn red
because they are all h2s.
And this element selector here
selects all of the h2s, turning them red.
So pretty simple so far.
Now, let's look at another type of selector,
a class selector.
This requires a special symbol, which is the dot,
and then after that dot,
immediately with no spaces, right here,
then you have the name of the class.
So this is the actual name
of the class that we're selecting.
In this case, I've called it red-heading.
And then after the curly braces,
again, we have the same CSS rule to apply,
change the text color to red.
Now, what is a class?
Well, a class is something that we can add as an attribute
to any HTML element.
And this attribute is kind of like saying,
"Well, let's group these particular elements into a class."
So it's used for grouping elements in your HTML file
to apply the same CSS rule to all of them.
So in this case, we've only got one h2 that has a class,
and the class is set to red text.
Now, when I go ahead and write some CSS
and I target the class,
which, remember, requires the dot
and then the name of the class, which is this,
and it has to be spelled exactly the same.
These two cannot have any differences.
So you can't have, for example, a capital R or a capital T.
This will not work.
Instead, what we have is our class selector
and our CSS rule.
What do you expect will happen
when the code is run in the browser
when this CSS gets applied?
Well, it'll look like this.
It selects the only element that has that class
and turns the text color red.
Now what if we had multiple elements with the same class?
So here you can see we've actually got
two different types of HTML elements.
One is an h2 and another is a paragraph element.
Even though these two are completely different elements,
we can tag them using the same class.
We're saying the h2 should have the class of red text
as should the paragraph.
Now, if we write our CSS
and we select, again, all the classes that have red text,
then what do you think will happen?
Well, in this case, it doesn't matter if it's an h2
or if it's a paragraph,
as long as they've got that class,
they've been converted into red text
and the style has been applied to these two HTML elements.
As you can see, the class selector is really versatile.
It allows you to group different parts of your HTML file
into having the same styling.
And this can be really, really useful
on multi-page websites with lots of different elements,
and you don't just wanna select
a particular type of HTML element.
The next one I wanna show you is called the ID selector.
And the id selector, it has its own special symbol
which is a pound sign or a hashtag,
and you put that pound sign, and again, no spaces
in between the pound sign and the actual name of the id.
And this selects all elements
with a particular id attribute.
This is what an id attribute looks like.
It's simply the word id,
and then after the equals sign,
we can give it a particular id.
And it works similarly to the class selector
because if I go ahead and select this id of main
and I apply these CSS changes,
then you can see it will add the styling
and apply it to the only element that has that id.
So then what is the difference
between the id and the class selector?
Well, the class selector can be applied to many elements,
whereas the id should be only applied
to one element in a single HTML file.
In a single HTML file, like our index.html,
there should only be one id of this particular name, main.
It should be completely unique.
And this is the difference,
if you had, say, three h2s,
you can't select all of them
using the element selector like this
because that would select all of the h2s.
Instead, you apply the id to the unique element
that you want to apply your style to
and it selects it in the HTML file.
Again, remember, ids are unique,
only one element per file,
and classes, you can put on as many elements as you like
to group them together.
Another way that you can select parts of your HTML
is using the attributes selector.
So we know that we can create a HTML tag
and add as many attributes as we like.
So we had attributes such as id, or class, or draggable,
or src for the images, or href for the anchor tags,
or alt for the images, and a whole bunch more
that we'll get to see in the future as well.
Now, we can select these elements
that have particular attributes
or particular attributes values by using this notation.
Notice the first part here is the HTML element
that you want to select,
and then using a set of square brackets,
these ones right here,
then inside we can include the attribute
that you want to select.
What this entire selector says
is select all paragraph elements
with the attribute draggable,
and then apply this CSS style to it.
What does this look like in HTML code?
Well, here we've got three paragraph tags,
but only one of them
has the attribute draggable set to true.
If we go ahead and apply the CSS style
where we select the paragraph element
with the draggable attribute and give it this CSS style,
then when this CSS is applied to our HTML,
this is what will happen.
It will find the unique paragraph tag
with that particular attribute.
Now, you can go one step further with attribute selectors.
You can actually select the value of the attribute
that you want to apply your CSS to.
So in this case, you can see we've got all three paragraphs
with the same attribute,
all the draggable attributes are set,
but they're set to different values.
So the first one is set to true
and the other two are set to false.
So now, we can actually write our CSS like this.
We can select all the paragraph elements
which has an attribute of draggable set and equal to false.
And what this selector is gonna do, all of this,
is it's going to look inside our file
and it's gonna find these two paragraph elements
in order to select and apply the CSS.
When this CSS is applied,
instead of the first one which previously was selected,
we actually have the other two selected and turned red.
This is again, a really versatile way of applying CSS,
but as you can see, it selects on different things
than what we've seen before,
the element, the id, or the class selectors.
The final selector I wanna talk about
is the universal selector.
And it's really simple, it's just an asterisk.
And after the asterisk, you have your CSS rules.
But what this means is it means select all.
And when you apply this,
it doesn't matter what class you've got, what id,
what attributes set, which different elements,
if you select all, it's going to apply the style
to everything where the style sheet is active.
And this is probably
one of the simplest selectors to understand.
So now that we've seen all the different ways
that we can apply our CSS
to different parts of the HTML using selectors,
let's try and exercise where we experiment hands-on
and see if you've understood
all the concepts in this lesson.
Now, once you've downloaded and extracted the starting files
and have it open in VS Code,
then I want you to go into the index.html file.
And here, you'll notice a couple of things.
Firstly, we've already set up the style sheet for you.
So we've got an external style sheet set up using a link,
and it's pointing to this file right here, the style.css.
The part that we want you to do
is to revise what you've learned about CSS selectors.
And I've set up five TODOs for you
and I want you to do them in order.
So start from one, and then go to two,
and continue downwards.
What this is gonna involve
is for you to write actual CSS code.
I don't want you to actually touch anything
inside the index.html
because I don't want you to change any of the HTML
with the classes or values or ids.
Want you to leave it exactly as it is.
And instead, your job is to write the selectors
in the style.css.
Notice when you open up the style.css,
there's a little bit of CSS already here for you.
And I want you to leave this alone.
Don't touch it, don't change it.
It's important so that the final styling looks right
when we haven't covered
all of the different CSS styling rules.
In the next section,
we're gonna be talking about all of this
in a lot more detail,
where to find out about different rules and how to use them.
But for now, I want you to ignore this part
and write your CSS below.
Similarly, I'm not expecting you to know
which CSS rules to use
because I'll provide all the rules for you.
In TODO 1, I want you to change the text color to red.
In TODO 2, I want you to change the font size
or change the text-align.
And this is all gonna be provided for you
completely formatted.
So it's got the property, the colon,
and the value I want you to set it to.
Now, the part that you need to think about
and where your challenge comes in
is how to select the correct parts.
So how to select all the paragraph, for example,
or how to select parts with a class of this
or an id of this.
So that is the challenge.
And this is what you need to do in this exercise.
And if you take a look at the preview,
right now, it's very plain, all black, no styling at all.
But if you take a look at the goal.png,
you'll see this is what the final outcome will look like.
It's gonna be centered, it's gonna have different colors,
and you can almost even use this website as a revision tool
because each of the bullet points
are linked to a particular style of CSS selection.
This hopefully will be quite a fun challenge for you.
And if you get stuck,
be sure to rewind a little bit in the video
to see how to do the different things
as seen in the previous examples.
And I want you to really give it a good go
before you continue and watch the solution.
Pause the video now, give this a go.
All right, so the first thing we're gonna do
is we're gonna pull up our preview
to make sure we are doing the right things.
And to begin, the first TODO is to set the CSS
for all paragraph tags to this color.
Now, remember, I said we are not writing any code
or changing anything in the HTML side.
We're doing it all in our CSS,
but it's still really important
that we look at what's in our HTML code
in order to complete each of the steps of the challenge.
The first one's easy.
We're gonna target all paragraph tags
and we're going to apply this CSS style.
So let me copy the CSS style, paste it in.
And now, I've got an error because I haven't selected
what this style should be applied to.
In this case,
we're applying it to all the paragraph elements.
So we're using the element selector.
And all we have to do there
is simply add the name of the tag and then apply it.
And you can see the first line of our bullet is now red.
That's TODO 1 done.
Let's move on to the next TODO.
So in this one we wanna set the CSS
for all the elements with a class of this to this CSS rule.
So let me, again, copy the CSS rule and then paste it below.
And now, we're going to use a class selector
and select all the elements.
So notice how we've got many elements with the same class
even though they're applied to different elements,
but we can select across them using the class selector.
The class selector, if you remember, requires the dot,
and then immediately afterwards,
we add in the name of the class
and then we enclose our CSS rule
in between the curly braces again.
And what this has done is it's applied a larger font size
to all of the HTML elements
that have that class applied to them,
which is all the bullets here, but not the h1 or h2s.
So that's TODO 2 done.
Next one is to set the CSS for the element
with a particular unique id.
And the id is this one.
So which one has that id?
It's this particular list element,
and we're going to set it to have a CSS rule
to turn to color green.
With id names or class names or attribute names,
any of that,
it's very important that you don't make any spelling errors.
What I normally do is I normally just copy it
and then paste it in
so that I don't actually mistakenly add a capitalize S
or something else that I could write incorrectly.
So remember, the id selector is a pound sign or a hashtag.
And once we enclose our rule inside that selector,
you'll see bullet number three turn green
because that is the only item,
and it should be only one item that has the same id.
Now, let's move on to TODO 4,
which is to set the CSS for the li elements
that have the value attribute set to four.
And notice now that all of the items in the ordered list,
I've set a value attribute.
And what this does,
if you take a look at the MDN Web Docs
for the list item element,
is this attribute can indicate the current ordinal value
of the list item.
When you have a list item inside a ordered list,
by default, it starts numbering from one, like so.
This is this list item.
But because I've got that paragraph tag above
and I want to format this
so that we have an interesting CSS exercise,
I've set the value attribute
so that the list starts from two, which is totally valid.
And I've set it for all of the other items as well
so that we continue the list.
In this case,
we're going to use the attribute selector
to select this value attribute and turn the text blue.
Let's paste in the CSS rule.
And then, remember,
the way that we use the attribute inspector
is we first select the element, in this case, list item,
and then we add some square brackets.
And inside the square brackets,
we add the attribute that we want to select,
which in this case is called value.
And if right now I already close these curly braces,
so we select on that attribute,
is going to turn all the list items
that have a attribute of value set,
which is basically all four of these.
Now, some of you might have noticed
that bullet number three remain green
instead of turning blue like the rest of the list elements.
Now, if you're curious about why this is,
this is to do with something called CSS specificity,
relating to how specific the rule is.
Now, we're gonna be covering this in Section 7
for our Advanced CSS module.
So that's something you get to look forwards to
in the future.
Now, if we want to set the attribute
that we want to select to a particular value,
which in this case is the one that's four,
then I have to go a little bit further
and set this ="4".
And now you can see it's only selecting this fourth bullet
and turning it blue.
Now, attribute selectors can be a little bit tricky.
So if you didn't understand this at all,
be sure to rewind in the video
and watch that section of the video again
just to make sure that you fully understand what's going on
before you move on.
The final TODO is the easiest.
All we have to do is set all the elements
to text-align to center.
When we want to select all the elements,
we use our universal selector, which is the asterisk.
And then once we paste in this rule,
you'll see now our preview looks exactly the same
as what we wanted for our goal.
Everything center aligned.
There's lots of different styling being applied.
And we've now managed to achieve
all of the TODOs in our exercise.
So hope that made sense and it helped you review
all the things we learned in this lesson.
Once you're ready, head over to the next lesson
where we've got our final project for the section.