Doctype and font-size Aren't Compatible

StackOverflow https://stackoverflow.com/questions/20197014

  •  04-08-2022
  •  | 
  •  

Question 

<!DOCTYPE html>
<html>
<body>
  <p style="font-family:Algerian;color:red;font-size:34">Bridge</p>
</body>
</html>

Copy/Paste this source code. The font-family and color work. The font doesn't size. Remove the Doctype tag, the font sizes beautifully. PC based browsers Chrome, Firefox, IE, and Opera work fine without the tag, but what about mobile devices?

Tried styling the paragraph from the head. Didn't work. Tried listing the style attributes in different orders. Didn't work. Tried suggested doctypes: html5, different transitional and loose doctypes. None of them worked.

Ran the code in W3C Validator. Followed the suggestion to add a UTF-8 meta tag. Didn't work.

So, what's the fix? Is there a doctype I didn't find that will work? Is there another way to style the font-size? A font tag works, but the tag is deprecated, and might get removed for newer browsers. And, I'm still not sure about mobile devices. Will they work without the doctype? I'm stumped. What woul;d be the best coding approach?

Was it helpful?

Solution

You forgot to add px to the font-size so font-size: 34px;

Without a Doctype, Web Browsers enter Quirks Mode where sizes are defined as pixels (px) if the unit is left off

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top