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

CodePudding user response：

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

CodePudding user response：

You also can define a global body style and will apply to all elements if they haven't set any style. Also it's a good practice to define some default styles to body element.

Something like this:

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  color: black;
  -webkit-font-smoothing: antialiased; // Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
}