Font size not changing in HTML-CodePudding

So, after I tried all the answers in the forums over here, the font size of my webpage won't change. Here's what I currently have: Hello Okay, it will set to 40px, but if I try to make another one using 20px it won't change the font size: World
Whole code for those who want to check for themselves

<html>
<font size="40px" face="Didot">Hello</font>
<font size="20px" face="Didot">World</font>
</html>

CodePudding user response：

 tag is deprecated. ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font )

Use CSS styling instead. See the example below.

.size40 {
  font: 40px/1.5 Didot, serif;
}

.size20 {
  font: 20px/1.5 Didot, serif;
}

<span >Hello</span>
<span >World</span>

CodePudding user response：

If you are looking for ways to do inline styling you can follow this approach

<html>
<div style="font-size:40px; font-family:Didot">Hello</div>
<div style="font-size:20px; font-family:Didot">World</div>
</html>

But I would recommend to create a separate css file and define styles there. And import those styles in your html using script tags

CodePudding user response：

As said in the previous answer the source is deprecated but if you insists on wanting to try you can use the following:

<font face="Verdana, Geneva, sans-serif" size=" 7">Hello</font>
<font face="Verdana, Geneva, sans-serif" size=" 4">World</font>

If it still doesn't work, use CSS:

<p>Hello</p>
<p>World</p>

⠀

p:nth-child(1){
   font-family: Didot;
   font-size: 40px;
}
p:nth-child(2){
   font-family: Didot;
   font-size: 20px;
}