覆盖特定区域的CSS规则

Question

In my code, I have <p> style at font-size 16px.
But, for a "card" I want to apply a font-size of 20px to any <p> text in there, without applying a slightly larger font-class to each <p> I may include.

So that any "card" class across the site, will have the same overwritten 20px, instead of 16px.

Answer 1

What is a "card"? If it's just a div with class card:

.card {
  font-size: 20px;
}

That will override the initial 16px if it is has higher specificity than the initial 16px. Read up on CSS Specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

I assume that you are using bootstrap class -> 'card'.

.card p
{
 font-size: 20px !important;
}

define above class in your stylesheet. It will work smoothly , it will apply the mentioned font size in every p tag you use inside a class 'card' anywhere on your page.

Good Luck.