0
1
00:00:02,980 --> 00:00:04,930
Let's start by styling our headline.
1

2
00:00:10,940 --> 00:00:14,420
Any new text that we add to our page by default,
2

3
00:00:14,420 --> 00:00:16,370
is set in a Ariel font.
3

4
00:00:16,370 --> 00:00:22,160
Wouldn't it be nice, if we could somehow give them a default style? Like make all headlines Poppins
4

5
00:00:22,580 --> 00:00:29,150
and all paragraph text Roboto? So we don't have to style them every time we add a new headline? On a small
5

6
00:00:29,150 --> 00:00:30,170
one page like this,
6

7
00:00:30,170 --> 00:00:30,770
that's fine.
7

8
00:00:30,770 --> 00:00:36,700
Not much work. But what happens on a large website with 20 different pages and even more blog posts?
8

9
00:00:36,750 --> 00:00:41,560
We could, of course, use CSS classes, but there is even better way to go about this.
9

10
00:00:41,570 --> 00:00:45,220
Remember this Selector field? You are already familiar with this. From here
10

11
00:00:45,230 --> 00:00:49,190
we applied CSS classes to our elements. By applying a class to an object,
11

12
00:00:49,190 --> 00:00:52,800
we're basically saving the information on styles and properties.
12

13
00:00:52,850 --> 00:00:58,460
Later we can apply the same class to another similar object. In the selector field you'll see it says,
13

14
00:00:58,460 --> 00:01:04,840
select a class or tag, this tag is what will enable us to set default styles on our text.
14

15
00:01:04,850 --> 00:01:07,060
So what the heck is a tag? A tag,
15

16
00:01:07,060 --> 00:01:11,120
is part of HTML, whereas class is part of CSS.
16

17
00:01:11,150 --> 00:01:15,090
The tags are exactly what we have been adding to our page.
17

18
00:01:15,110 --> 00:01:24,230
Div block is a tag name Div. And a heading is a tag name H1 and a paragraph is a tag named P. Inside HTML
18

19
00:01:24,260 --> 00:01:26,370
this is how new elements are being added.
19

20
00:01:26,390 --> 00:01:30,100
Just tags. It starts by telling the type of the element it is,
20

21
00:01:30,120 --> 00:01:39,170
div, h1, p etc. And right after it, if there is any CSS class applied to it, then the name of that CSS class.
21

22
00:01:39,650 --> 00:01:43,000
You see how it says  class="hero-section"?
22

23
00:01:43,070 --> 00:01:47,430
That's exactly the class we have created manually and named it that way.
23

24
00:01:47,450 --> 00:01:50,790
So, how do tags help us with setting default styles?
24

25
00:01:50,810 --> 00:01:56,630
Well just like we define a set of properties and styles of a class, we can do exactly the same for a
25

26
00:01:56,630 --> 00:01:57,750
generic HTML
26

27
00:01:57,810 --> 00:01:58,370
tag.
27

28
00:02:01,250 --> 00:02:08,150
For example, for the heading. Instead of applying a class to it and then styling it, we can select all
28

29
00:02:08,240 --> 00:02:12,740
H1 Tags from here. And then style it, as we usually do.
29

30
00:02:29,510 --> 00:02:35,960
Now, every time we add a new heading, the default style will be applied to it, without needing to use classes.
30

31
00:02:47,750 --> 00:02:52,190
And just like classes, we can make a change on every single instance at once.
31

32
00:03:02,780 --> 00:03:03,670
Besides H1,
32

33
00:03:03,680 --> 00:03:05,540
we have more heading tags.
33

34
00:03:05,540 --> 00:03:10,900
Just click on the settings of the heading and you'll see we have all the way down to H6.
34

35
00:03:10,910 --> 00:03:16,210
The use of these different heading tags is basically the level. H1 should be our highest level heading
35

36
00:03:16,220 --> 00:03:20,320
style. For a secondary heading we can use H2 and so on.
36

37
00:03:20,360 --> 00:03:25,190
If you look at our designs in Figma, we could definitely define different levels of headings from there.
37

38
00:03:25,190 --> 00:03:28,980
The heading on the hero section is the largest, so that can be the H1.
38

39
00:03:29,120 --> 00:03:35,410
The headline on the section afterwards can be H2. And maybe those footer headings can be H3 or H4.
39

40
00:03:36,600 --> 00:03:43,080
So if we wanted to define an H2 tag, we would select it from here. And again go to the selector. This time
40

41
00:03:43,080 --> 00:03:49,140
selector will show us all H2 headings instead of H1. Because that's what we have selected. And we can
41

42
00:03:49,140 --> 00:03:51,640
style all H2 tags across our website.
42

43
00:04:05,970 --> 00:04:10,890
Now when we select H2 tag, on a headline, this style will be automatically applied.
43

44
00:04:15,920 --> 00:04:21,710
As a side note, unlike classes, tags don't keep being selected. So moment you are done editing and you
44

45
00:04:21,710 --> 00:04:22,870
exit the element,
45

46
00:04:23,060 --> 00:04:25,130
this tag selector will go away.
46

47
00:04:25,130 --> 00:04:28,750
So if you do this and come back to the heading to edit a little more,
47

48
00:04:28,820 --> 00:04:33,310
now any new edits will create a new class and it won't be applied to the tag.
48

49
00:04:33,380 --> 00:04:37,990
So every time you make a new edit to the tag, make sure to select it each time.
49

50
00:04:38,090 --> 00:04:43,280
Until today I keep on forgetting about this. To be able to select the tag the class field needs to be
50

51
00:04:43,280 --> 00:04:43,670
empty.
51

52
00:04:43,730 --> 00:04:49,460
Otherwise, as you can see, it doesn't show the option to edit the H2 to tag anymore. But there is another way
52

53
00:04:49,460 --> 00:04:53,970
to select and edit the tag itself, even if you have a class applied to the element.
53

54
00:04:54,110 --> 00:04:55,730
You can do that from here.
54

55
00:04:55,820 --> 00:05:01,310
This dropdown here shows all higher level classes and tags that you can directly select and edit. Blue is
55

56
00:05:01,310 --> 00:05:03,830
for class and pink is for tags.
56

57
00:05:03,950 --> 00:05:07,270
For example, let's take our heading and make it red. But not the tag,
57

58
00:05:07,280 --> 00:05:09,770
but just this particular instance of the heading.
58

59
00:05:13,040 --> 00:05:18,500
As you can see, the default H1 heading is unchanged. Because we applied the red color using a class, not
59

60
00:05:18,500 --> 00:05:19,580
using a tag.
60

61
00:05:19,580 --> 00:05:26,030
Now, if we want to edit our default H1 style, of course, we can do that on the headline below, but we can
61

62
00:05:26,030 --> 00:05:30,230
also do that on the red one by selecting a higher level tag in the selector.
62

63
00:05:33,620 --> 00:05:39,720
Any changes that we make now, is going to be applied to the default H1 style as well. And you can see
63

64
00:05:39,720 --> 00:05:40,810
this happening in life.
64

65
00:05:46,150 --> 00:05:49,930
Another thing to point out you'll notice the color style is scratched out.
65

66
00:05:49,930 --> 00:05:51,040
Why is it scratched out?
66

67
00:05:51,340 --> 00:05:57,600
It's basically Webflow telling us that the color property is being overridden by a more specific selector.
67

68
00:05:57,790 --> 00:06:04,840
So classes are more specific sort of like children elements. And tags are more like parent elements.
68

69
00:06:04,840 --> 00:06:11,620
So classes override tags. Similar to children inheriting styles from the parent until we set a specific
69

70
00:06:11,620 --> 00:06:13,660
style on the child element.
70

71
00:06:13,660 --> 00:06:14,650
Same goes here.
71

72
00:06:14,650 --> 00:06:22,150
H1 tag is a higher level selector. And it will act as a default style until a more specific class overrides
72

73
00:06:22,180 --> 00:06:22,950
that style.
73

74
00:06:25,500 --> 00:06:28,560
A good example of this hierarchy is a body tag.
74

75
00:06:28,590 --> 00:06:33,810
If you look inside the navigator, you can see that the body is the biggest box, where everything else
75

76
00:06:33,810 --> 00:06:34,730
goes inside.
76

77
00:06:34,740 --> 00:06:40,770
Nothing goes next to the body or on top of it. While you have body selected, go to the selector and click
77

78
00:06:40,770 --> 00:06:42,660
on Body (All Pages).
78

79
00:06:42,660 --> 00:06:49,050
Now you can set some certain styles on this body tag, that will be passed on to all the children elements.
79

80
00:06:49,110 --> 00:06:56,200
However, only for the inheritable properties like textiles. Other properties like sizes, display, borders
80

81
00:06:56,220 --> 00:06:57,540
won't be inherited.
81

82
00:06:57,540 --> 00:07:01,530
You can see webflow has already applied some default font styles.
82

83
00:07:01,530 --> 00:07:06,180
We can see that because it's highlighted in blue. What default styles can we set here?
83

84
00:07:06,210 --> 00:07:12,480
For example, we know that Roboto is our main font on paragraphs and everything else, besides headings.
84

85
00:07:12,840 --> 00:07:15,390
So why not say Roboto here?
85

86
00:07:15,390 --> 00:07:21,760
Also, we can set a default font size, color and line-height. This way every new text we add to our website,
86

87
00:07:21,830 --> 00:07:26,250
will begin with these settings and we'll have much less styling to do.
87

88
00:07:26,280 --> 00:07:31,770
Of course, we're not stuck with these values. H1 and paragraph tags are more specific selector, so they will
88

89
00:07:31,770 --> 00:07:33,470
override these settings.
89

90
00:07:33,510 --> 00:07:36,180
That's why the paragraph changed when we were editing.
90

91
00:07:36,180 --> 00:07:41,550
But the heading didn't. And classes are even more specific selectors, which will override all the other
91

92
00:07:41,550 --> 00:07:43,890
tags, be it heading or body tag.
92

93
00:07:51,210 --> 00:07:57,360
Now every new text element that we add to the page, will be in Roboto and in grey color, unless having
93

94
00:07:57,360 --> 00:08:09,990
more specific styles.
94

95
00:08:10,060 --> 00:08:17,490
There are other tags we can style, but headings and body tag is the most common and most useful. So in
95

96
00:08:17,490 --> 00:08:19,770
our case we have H1 tag that we styled
96

97
00:08:19,800 --> 00:08:25,590
just like our designs. And we have styled the body tag according to our paragraph designs. After styling
97

98
00:08:25,590 --> 00:08:26,300
the body tag,
98

99
00:08:26,310 --> 00:08:29,450
you'll notice sometimes some text will change where you don't expect.
99

100
00:08:29,450 --> 00:08:35,780
For example, our navigation links. They grew in size to match the 18 pixel we set for the body tag.
100

101
00:08:35,880 --> 00:08:42,000
And if we click on the font style, we can see that this value is being inherited from the body. Even though,
101

102
00:08:42,000 --> 00:08:44,340
we have a nav link class applied to it.
102

103
00:08:44,340 --> 00:08:45,720
Why is this happening?
103

104
00:08:45,780 --> 00:08:51,270
Because originally when we styled navigation links, we didn't have to change the font size and line
104

105
00:08:51,270 --> 00:08:56,880
height. Whatever was set on the body by default, was the same font size we needed at the time. But now,
105

106
00:08:56,880 --> 00:09:01,320
because we have changed the font size on the body tag, we get this.
106

107
00:09:01,480 --> 00:09:05,590
Let's style these navigation links to whatever sizes they are supposed to be.
107

108
00:09:05,590 --> 00:09:09,270
14 pixel for the font size and 16 pixel for the line height.
108

109
00:09:19,220 --> 00:09:27,180
And that's much better. So to recap. We have CSS classes and HTML tags. HTML tags are elements
109

110
00:09:27,180 --> 00:09:35,120
themselves, like paragraphs, headings, images etc. Just like classes, many HTML tags can be styled to create
110

111
00:09:35,120 --> 00:09:42,360
a general default style for those types of elements, like all H1 headlines or all paragraphs. Styling
111

112
00:09:42,360 --> 00:09:43,540
tags is a pro habit.
112

113
00:09:43,560 --> 00:09:48,330
It takes a lot of time down the line, and it's efficient, and creates a cleaner code.
113

114
00:09:48,360 --> 00:09:51,010
Highest level tag we can style is the body tag.
114

115
00:09:51,060 --> 00:09:56,910
If we set up font style on the body tag, then every other text element across the website, not just the
115

116
00:09:56,910 --> 00:10:04,110
page, will inherit that font from the body tag. Until we override it with other more specific tags or
116

117
00:10:04,140 --> 00:10:04,860
classes.