Let's start by styling our headline. 1
Any new text that we add to our page by default, 2
is set in a Ariel font. 3
Wouldn't it be nice, if we could somehow give them a default style? Like make all headlines Poppins 4
and all paragraph text Roboto? So we don't have to style them every time we add a new headline? On a small 5
one page like this, 6
that's fine. 7
Not much work. But what happens on a large website with 20 different pages and even more blog posts? 8
We could, of course, use CSS classes, but there is even better way to go about this. 9
Remember this Selector field? You are already familiar with this. From here 10
we applied CSS classes to our elements. By applying a class to an object, 11
we're basically saving the information on styles and properties. 12
Later we can apply the same class to another similar object. In the selector field you'll see it says, 13
select a class or tag, this tag is what will enable us to set default styles on our text. 14
So what the heck is a tag? A tag, 15
is part of HTML, whereas class is part of CSS. 16
The tags are exactly what we have been adding to our page. 17
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
this is how new elements are being added. 19
Just tags. It starts by telling the type of the element it is, 20
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
You see how it says class="hero-section"? 22
That's exactly the class we have created manually and named it that way. 23
So, how do tags help us with setting default styles? 24
Well just like we define a set of properties and styles of a class, we can do exactly the same for a 25
generic HTML 26
tag. 27
For example, for the heading. Instead of applying a class to it and then styling it, we can select all 28
H1 Tags from here. And then style it, as we usually do. 29
Now, every time we add a new heading, the default style will be applied to it, without needing to use classes. 30
And just like classes, we can make a change on every single instance at once. 31
Besides H1, 32
we have more heading tags. 33
Just click on the settings of the heading and you'll see we have all the way down to H6. 34
The use of these different heading tags is basically the level. H1 should be our highest level heading 35
style. For a secondary heading we can use H2 and so on. 36
If you look at our designs in Figma, we could definitely define different levels of headings from there. 37
The heading on the hero section is the largest, so that can be the H1. 38
The headline on the section afterwards can be H2. And maybe those footer headings can be H3 or H4. 39
So if we wanted to define an H2 tag, we would select it from here. And again go to the selector. This time 40
selector will show us all H2 headings instead of H1. Because that's what we have selected. And we can 41
style all H2 tags across our website. 42
Now when we select H2 tag, on a headline, this style will be automatically applied. 43
As a side note, unlike classes, tags don't keep being selected. So moment you are done editing and you 44
exit the element, 45
this tag selector will go away. 46
So if you do this and come back to the heading to edit a little more, 47
now any new edits will create a new class and it won't be applied to the tag. 48
So every time you make a new edit to the tag, make sure to select it each time. 49
Until today I keep on forgetting about this. To be able to select the tag the class field needs to be 50
empty. 51
Otherwise, as you can see, it doesn't show the option to edit the H2 to tag anymore. But there is another way 52
to select and edit the tag itself, even if you have a class applied to the element. 53
You can do that from here. 54
This dropdown here shows all higher level classes and tags that you can directly select and edit. Blue is 55
for class and pink is for tags. 56
For example, let's take our heading and make it red. But not the tag, 57
but just this particular instance of the heading. 58
As you can see, the default H1 heading is unchanged. Because we applied the red color using a class, not 59
using a tag. 60
Now, if we want to edit our default H1 style, of course, we can do that on the headline below, but we can 61
also do that on the red one by selecting a higher level tag in the selector. 62
Any changes that we make now, is going to be applied to the default H1 style as well. And you can see 63
this happening in life. 64
Another thing to point out you'll notice the color style is scratched out. 65
Why is it scratched out? 66
It's basically Webflow telling us that the color property is being overridden by a more specific selector. 67
So classes are more specific sort of like children elements. And tags are more like parent elements. 68
So classes override tags. Similar to children inheriting styles from the parent until we set a specific 69
style on the child element. 70
Same goes here. 71
H1 tag is a higher level selector. And it will act as a default style until a more specific class overrides 72
that style. 73
A good example of this hierarchy is a body tag. 74
If you look inside the navigator, you can see that the body is the biggest box, where everything else 75
goes inside. 76
Nothing goes next to the body or on top of it. While you have body selected, go to the selector and click 77
on Body (All Pages). 78
Now you can set some certain styles on this body tag, that will be passed on to all the children elements. 79
However, only for the inheritable properties like textiles. Other properties like sizes, display, borders 80
won't be inherited. 81
You can see webflow has already applied some default font styles. 82
We can see that because it's highlighted in blue. What default styles can we set here? 83
For example, we know that Roboto is our main font on paragraphs and everything else, besides headings. 84
So why not say Roboto here? 85
Also, we can set a default font size, color and line-height. This way every new text we add to our website, 86
will begin with these settings and we'll have much less styling to do. 87
Of course, we're not stuck with these values. H1 and paragraph tags are more specific selector, so they will 88
override these settings. 89
That's why the paragraph changed when we were editing. 90
But the heading didn't. And classes are even more specific selectors, which will override all the other 91
tags, be it heading or body tag. 92
Now every new text element that we add to the page, will be in Roboto and in grey color, unless having 93
more specific styles. 94
There are other tags we can style, but headings and body tag is the most common and most useful. So in 95
our case we have H1 tag that we styled 96
just like our designs. And we have styled the body tag according to our paragraph designs. After styling 97
the body tag, 98
you'll notice sometimes some text will change where you don't expect. 99
For example, our navigation links. They grew in size to match the 18 pixel we set for the body tag. 100
And if we click on the font style, we can see that this value is being inherited from the body. Even though, 101
we have a nav link class applied to it. 102
Why is this happening? 103
Because originally when we styled navigation links, we didn't have to change the font size and line 104
height. Whatever was set on the body by default, was the same font size we needed at the time. But now, 105
because we have changed the font size on the body tag, we get this. 106
Let's style these navigation links to whatever sizes they are supposed to be. 107
14 pixel for the font size and 16 pixel for the line height. 108
And that's much better. So to recap. We have CSS classes and HTML tags. HTML tags are elements 109
themselves, like paragraphs, headings, images etc. Just like classes, many HTML tags can be styled to create 110
a general default style for those types of elements, like all H1 headlines or all paragraphs. Styling 111
tags is a pro habit. 112
It takes a lot of time down the line, and it's efficient, and creates a cleaner code. 113
Highest level tag we can style is the body tag. 114
If we set up font style on the body tag, then every other text element across the website, not just the 115
page, will inherit that font from the body tag. Until we override it with other more specific tags or 116
classes.