当我添加 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/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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.