Is there a way to define input in css style?

November 21, 2021

I am really new to this CSS style, I learned you can define style like the following:

.header {
        color: black;
        font-family: "Calibri, sans-serif";
        font-size:18px;
    }
    .body {
        color: black;
        font-family: "Calibri, sans-serif";
        font-size:12px;
    }
    .footnote {
        color: black;
        font-family: "Calibri, sans-serif";
        font-size:10px;
    }

Then put it in the code:

<p class = "header"> THIS IS HEADER </p>
<p class = "body"> THIS IS BODY </p>
<p class = "footnote"> THIS IS Footnote </p>

My question is, since the header, body, footnote all share same font, the only change I need is change the font-size, is there a way I can do to just call the style one time and change the font size?

Thanks

>Solution :

.header,.body,.footnote{
        color: black;
        font-family: "Calibri, sans-serif" ;
}

<p class = "header" style="font-size:18px;"> THIS IS HEADER </p>
<p class = "body" style="font-size:12px;"> THIS IS BODY </p>
<p class = "footnote" style="font-size:10px;"> THIS IS Footnote </p>

or you can create a common class and use it instead and pass inline css which is different for each element

.common-style{
        color: black;
        font-family: "Calibri, sans-serif";
}

<p class = "common-style" style="font-size:18px;"> THIS IS HEADER </p>
<p class = "common-style" style="font-size:12px;"> THIS IS BODY </p>
<p class = "common-style" style="font-size:10px;"> THIS IS Footnote </p>