Hi guys.
Welcome to another lesson on CSS.
In this lesson, we're going to 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 want to 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 HTML 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 h1's.
If your HTML is any good, you should only have a single h1, but it will be different for other tags.
If you had anchor tags or if you had paragraph tags or h2's 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 stylesheet.
And inside our index.html we've just got 3 h2's: red, green and blue,
and when displayed or run they will 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?
So 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 h2's.
And this element selector here selects all of the h2's 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 want to select a particular type of HTML element.
The next one I want to 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 words "id", and then after the equal 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 h2's you can't select all of them using the element selector like this because
that would select all of the h2's.
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 attribute 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 will 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 the 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 an equal to false.
And what this selector is going to do all of this is it's going to look inside our file and it's going
to 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 want to talk about is the universal selector.
And it's really simple.
It's just an asterix (*).
And after the Asterix 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 attribute set, which
different elements,
if you select all, it's going to apply the style to everything where the stylesheet 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 an 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 stylesheet for you, so we've got an external stylesheet 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 TODO's 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 going to 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,
I 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 going to 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 going to 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 paragraphs, 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 going to be centered, it's going to 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 going to do is we're going to 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're 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 going to 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 number one.
Done.
Let's move on to the next TODO so.
In this one, we want to 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 h2's.
So that's TODO number two 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 the 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 capitalized 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 number four, which is to set the CSS for the "li" elements that have the value
attribute set to 4.
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 an ordered list, by default, it starts numbering from 1 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 2, 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, it's 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 3
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 going to be covering this in Section 7 for our Advanced CSS module.
So that's something you get to look forward 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 4, then I have to go a little bit further and set this equal to 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 asterisks (*),
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 TODO's
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.