Is there a way to define input in css style?

Question

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

Mohit Kushwaha · Accepted Answer · 2021-11-21 05:34:15Z

1

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

edited Nov 21, 2021 at 5:34

answered Nov 21, 2021 at 5:27

Mohit Kushwaha

1,0511 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Norman Kuo Over a year ago

Thank you, is it possible to do for color too?

Norman Kuo Over a year ago

Like font-size:12px, color:red

Mohit Kushwaha Over a year ago

@NormanKuo yes you can pass as many inline css as you want example - style="font-size:18px;color:red;"

Rounin Over a year ago

This certainly isn't wrong - but I'd recommend as a best practice keeping CSS in the stylesheet (ie. separated from HTML) and not using inline styles via style="" where possible.

Mohit Kushwaha Over a year ago

@Rounin I agree with your point

Carles Rider · Accepted Answer · 2021-11-21 09:34:05Z

0

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

answered Nov 21, 2021 at 9:34

Carles Rider

313 bronze badges

Collectives™ on Stack Overflow

Is there a way to define input in css style?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related