Font size shrinks when I add Boostrap 5

Question

The font size changes when I add the Boostrap CDN link.

I found that this is because Boostrap has a default font size. I tried to change the font size by specifying the font size in the external style sheet and putting !import, but it doesn't work. And it only works when I put font size in the inline style sheet.

div.banner {
    font-size: 500% !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<main>
  <div class="banner">
    <h1 class="slideUp" style="font-family: 'EB Garamond', serif">
      Yasuní National Park<br />
      <span style="font-size: 40%">&nbsp; between oil exploitation and conservation</span>
    </h1>
  </div>
</main>

This is the part of my code and I was trying to change the font size of <h1> tag by applying the code below. But it doesn't work. Can you explain why?

div.banner {
    font-size: 500% !important;
}

Answer 1

Firstly, we change the size of font sizes using em, rem, and px.

Given CSS:

Let us say you have you font size declared for your entire document like this

* {
  font-size: 20px;
}

that is in pixel.

If we want to change this part of your code.

<span style="font-size: 40%;">&nbsp; between oil exploitation and conservation</span></h1>

We use rem mostly. like:

<span style="font-size: 2rem;">&nbsp; between oil exploitation and conservation</span></h1>



//2rem means -> default 20px(declared) * 2 = 40px will be the font-size of 2rem, 3 rem is 60, etc.

I see you tagged specificity too..

Not a good practice to use important even in testing.

Highest priority is inline styling -> then IDs -> classes.