Why and How font sizes specified in HTML and CSS as "small" and "x-large" work together!?

Question

When we write in HTML <p class="small">
Para in small <\p>
And in CSS
p.small {
font-size: x-large;
}
The output comes out In X-large!!
So which is the deciding factor!?
https://code.sololearn.com/Ws17uyxjIWj5/?ref=app

Answer 1

The class name doesn't matter, it could be anything; the content of it counts

Answer 2

Yes the class=“small” is a container word, like in Algebra, X=whatever. So ‘small’ in this situation is a container word. You then tell the browser using CSS what ‘small’ means, in this case your telling the browser small means ‘x-large’ so now every time the browser sees the word ‘small’ in your HTML it knows to make your text x-large, because you told it to in your CSS.

In this solo learn app, making the class name ‘small’ when your actually assigning the size in your CSS, makes the class name alittle bit deceptive because the class name doesn’t mean anything, it can be, essentially, whatever you want it to be.

It could be class=“bananas” as long as your CSS assigns the desired attributes bananas can mean whatever you want it to mean. So this:

HTML
<p class=“bananasForYou”> This is my text </p>

CSS
p.bananasForYou {
font-size: x-large;
}

this will also make your text X-large.

The reason why they use class=“small” in HTML and then in your CSS font-size: small;
is to make your code a little eaiser to read/navigate. Especially if someone else is reviewing your code.