Original subtitles

1 1

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.