How HTML Inheritance works with conflicting styles rules in CSS? - html

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.

Related

Font size shrinks when I add Boostrap 5

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.

Can I set font-weight for <h5> tag or h5 bootstrap class?

I need to use either tag or .h5 bootstrap class to increase font-size, but I don't want text bold.
<p class="h5 font-weight-light">Whatever</p>
and
<h5 class="font-weight-light">Whatever</h5>
and
<h5 style="font-weight: 300">Whatever</h5>
Doesn't work for me. They are all bold.
Do you have any idea how to make it work?
You are missing !important for that style to be active, so:
<h5 style="font-weight:300 !important;">Whatever</h5>
It would be best to put that CSS in a separate file not directly in html.
There is no need to use h5 when you can just set the font size directly.
style { font-size: 2rem ; }

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

Style a DIV in the same way as a certain tag

I have a DIV to which I want to apply a style currently prescribed for a certain tag (not class).
I want to use that as a base style for my container element, which will be used by its child elements that will use relative offsets for position and percentage for size.
Say, <h2> has font-size:x-large; font-weight:bold; by default. I could do:
<h2>
<div style="font-size: 50%;">something</div>
<div style="font-size: 80%;">something else</div>
</h2>
But this is invalid HTML, because div cannot be inside h2.
So I need a way to say:
<div style="whatever is currently applied to h2">
...
</div>
Is this possible without JavaScript (like sniffing out style properties using .css())?
Couldn't you use span's?
<h2>
<span style="font-size: 50%;">something</span>
<span style="font-size: 80%;">something else</span>
</h2>
And if you need them to be display: block:
h2 span {
display: block;
}
http://jsfiddle.net/HfQWz/
Although I would say you probably want to more specifically select the span's with a class on the h2, wrapping div.className, or something.

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.