Font size shrinks when I add Boostrap 5 - html

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%"> 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;
}

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%;"> between oil exploitation and conservation</span></h1>
We use rem mostly. like:
<span style="font-size: 2rem;"> 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.

Related

How to reduce width of outlined material icon?

Is there any way to make this icon look thinner? font-weight and stroke-width is not working.
.material-icons-outlined,
.material-icons.material-icons--outlined {
font-family: 'Material Icons Outlined';
font-size: 60px;
font-weight:100;
stroke-width: 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons material-icons--outlined">assignment</i>
</section>
</body>
</html>
it is not possible to change the font weight. is icon pattern. you change the font size, reduce the icon size.. what the icon looks like with a smaller border
You can use scale() OR scale(). (added two links just for reference)
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
Syntax
The scale() function is specified with either one or two values,
which represent the amount of scaling to be applied in each direction.
scale(sx)
scale(sx, sy)
.material-icons-outlined,
.material-icons.material-icons--outlined {
font-family: 'Material Icons Outlined';
font-size: 60px;
font-weight:100;
}
.icons_scale{
transform: scale(0.5);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons material-icons--outlined icons_scale">assignment</i>
</section>
</body>
</html>
UPDATE:
Actually, the stroke-width property is used to set the thickness of a line, text, or outline of an element inside the SVG tag. In this case, changing the font size will fix it.
I think material-icons stroke width cannnot be modified. But instead we can use "material symbols", which can be modified.

How to set bold font instead font weight in Bootstrap 4 SCSS?

I'm trying to build Bootstrap from SCSS, but I'm not experienced in front-end technologies at all. Is there any way to set a bold-by-default font instead font-weight everywhere it's used? The font-weight version is rendered distorted. I'm using a custom CSS now overriding the font-family everywhere where it's needed (h1...h6, b, strong, etc.) but it's not too convenient.
use font-weight-bold class to get bold font.
Load a bold font by default:
*{
font-family: 'Lato', sans-serif;
font-weight: 900;
}
<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>etc.</p>
<span>everything is bold now</span>

How HTML Inheritance works with conflicting styles rules in CSS?

I just got confused when reading on HTML inheritance and when implementing font-size property in CSS.
As it is mentioned in the book that I'm reading, the cascade mechanism governs how styles are applied when conflicting rules apply to the same elements. So, when you adjust font-size property in the body and in the <p> element inside the body in the same time, the <p> element font-size should override.
However, this didn't happen when I used the following code:
body {
font-size: 62.5%;
}
<p style="font-size: 1em">In em</p>
<p style="font-size: 16px">In px</p>
<p style="font-size: 12pt">In pt</p>
<p style="font-size: 100%">In percentage</p>
Why? Any explanation?
This is the intended behavior. Font sizes set in px or pt do not inherit from the parent element. 16px is 16px, no matter what. Font sizes set in em or percent are relative to the parent element, so 100% or 1em is the same as the parent font size.

CSS: How to override a class style with an enclosing div

I have a P element with style which I can't change.
I want to enclose it with a DIV to enforce a new font-size.
Why does the inner P ignore the div font-size?
Example:
<html>
<head>
<style>
.para1 { font-size:small; }
</style>
</head>
<div style="font-size:300% !important">
<p class="para1">I must have been asleep, for certainly if I had been fully awake I must have noticed the approach to such a remarkable place. In the gloom the courtyard looked of considerable size, and as several dark ways led from it under great round arches it perhaps seemed bigger than it really is. I have not yet been able to see it by daylight.</p>
</div>
</html>
You can set a class to the wrapping div, like I did here:
http://jsfiddle.net/3Zvrg/
HTML:
<div class="out_of_para1">
<p class="para1">
CSS:
.out_of_para1 p {font-size: 300%;}
EDIT: based on last comment from OP
I know you cant change the class but why cant you do this.
<div style="font-size:300% !important">
<p>I must have been asleep</p>
</div>
and not associate your "p" with any class??
Styles are only inherited if the value of the property is inherit. On the paragraph, the value of the property is small. Thus the font size of the div is 300% but the font size of the paragraph is small.
You have to explicitly set the font size on the paragraph element.
You could do this with a descendent selector in the stylesheet:
div .para1 {
font-size: 300%;
}

Can anyone explain "em is relative to the font size and % is relative to the parent element" by example?

Can anyone explain "em is relative to the font size and % is relative to the parent element" by example?
What is the means of relative to the font size and relative to the parent element?
Consider if you're defining the height of a box inside another box. If you specify the height at 50%, it will be half as tall as the box it's contained within. if you specify the height in ems instead, its height will depend on the size of the letter m in whatever font you're using, and not be dependent on the size of anything but your text.
Look at this example:
<div id='contain' style='height: 400px'>
<div style='height: 1.5em'>Test 1</div>
<div style='height: 50%'>Test 2</div>
</div>
In Test 1, the height of the box is 150% of the size of the text. If the font size is 10px, the height is 15px. In the second example, the height is 50% of the parent element; in this case, Test 2 is 200px, since #contain is 400px.
If I remember correctly, if you apply percentage to font-size, it will be mapped the same as em. font-size: 150% is the same as font-size: 1.5em (I think).
I find it more useful to use em for height or width. If you use it for width, then the text won't change wrap points when changing the size of your font (when the user changes font size). It's useful to use it when your page is heavy with text, and having a font size that is too small would cause the page to be too wide. (See this article on Em Widths)
<div style='width: 80em`>Lorem ipsum...</div>
em is a typographic measurement - essentially % of fontsize. while %, as you have said is relative to the parent element.
so lets take:
body {font-size: 12px;}
p.rel-to-font { font-size: 1.5em;}
<body>
<p class="rel-to-font"> Some cool text</p>
</body>
in this example p.rel-to-font will have an effective font-size of 18px. 150% of 12px.
body,p {font-size: 12px;}
div {font-size: 15px;}
p.rel-to-parent { font-size: 150%;}
p.rel-to-font { font-size: 1.5em;}
<body>
<div>
<p id="test-1"class="rel-to-parent"> Some cool text</p>
<p id="test-2" class="rel-to-font"> Some cool text</p>
</div>
<p id="test-3" class="rel-to-font"> Some cool text</p>
<p id="test-4" class="rel-to-parent"> Some cool text</p>
</body>
in this example #test-1 will have an effective font-size of 22.5px, #test-2 will be 18px, #test-3 will be 18px, and #test-4 will be 18px.
I hoe that helps.. i couldn't really come up with a good example set... In most cases % and em generally work out to the same thing - not always obviously but just most of the time in practical implementations.