Voiceover: Now that we're familiar with colors, 2 2
we are going to talk about two new selectors, 3 3
classes and IDs. 4 4
In the last lecture, we used H1, H2, P, and buddy selectors, 5 5
to select the corresponding HTML elements. 6 6
But now, suppose you wanted to style only one 7 7
of the paragraphs, not all of them. 8 8
That's why we have classes and IDs. 9 9
We can attribute class or ID names to elements 10 10
and then use these classes or IDs to select them 11 11
in the CSS code. 12 12
So let's do that. 13 13
First, I need to tell you that the same class can 14 14
be attributed to as many elements as you like, 15 15
while an ID can be used only once inside each HTML document. 16 16
So let's see what we can do here. 17 17
So, we have three paragraph elements, if you remember. 18 18
It's this paragraph, this paragraph here, and also 19 19
the author name is also a paragraph. 20 20
So now let's say we want the author paragraph to be bigger 21 21
than the main text. 22 22
So we have two text paragraphs, and we can use classes 23 23
for that. 24 24
So let's go back to our index HTML file. 25 25
Just close this. 26 26
And so, here in the P tag, just add class, class, 27 27
and then choose a name. 28 28
It can be anything. 29 29
I will call this "main text". 30 30
And then, the same thing with the second paragraph. 31 31
This is also "main text," right? 32 32
So, "main text." 33 33
Now, there's only one paragraph for the author name, 34 34
so we can use an ID here. 35 35
So it's just, as you can imagine, "ID", and I will call it 36 36
"author texts". 37 37
And now, let's go back to our CSS file. 38 38
And here, down here, we can now add the new selectors. 39 39
So, style the paragraphs with the "main text" class. 40 40
We'll add dot, 41 41
main text. 42 42
And you see, on the right page, with the live connection, 43 43
two brackets, that there's a blue square around 44 44
this paragraph, and the other one too, 45 45
but not the author paragraph, which means that we 46 46
selected these two elements. 47 47
What I can do here is to say that we want these paragraphs 48 48
to have a justified text align. 49 49
Text, align, justify. 50 50
And now, down here, we have the author paragraph, 51 51
if you remember, and it's an ID. 52 52
And to select that ID, we use the hash symbol and say, 53 53
"author 54 54
text." 55 55
All right, and as we said, we want this to have a larger 56 56
font size, like 22 pixels, maybe. 57 57
Font size, we'll set it to 22 pixels, and you see, 58 58
it's bigger now, and, yeah, 22 pixels looks just right. 59 59
So, nice, it works. 60 60
We actually don't need this one anymore, 61 61
it's kind of redundant, because, in this rule, 62 62
I already said that I want these two paragraphs 63 63
to be justified, and since this one doesn't need 64 64
to be justified, I can just delete this, 65 65
and nothing will happen. 66 66
Let's clear some lines, save it, 67 67
never forget to save. 68 68
And yeah, I think that's it for the coding. 69 69
Now using IDs is actually not a good practice, 70 70
because, I said, they can only be used once. 71 71
So, usually, we use classes for all our styling, 72 72
even if we have only one class with a specific name, 73 73
because we will never know what will happen to our code 74 74
down the road. 75 75
So let's just quickly change from ID to class right here 76 76
first. 77 77
I want this to be a class, and then I will also change it 78 78
in the CSS, and now it's back to normal as we want it. 79 79
Great! 80 80
This was an important lecture because we'll be using 81 81
classes all the time. 82 82
Next up, I will teach you another very important 83 83
thing in CSS: 84 84
the so-called Vox Model. 85 85
See you there.