Pitfalls of styling the HTML element
This was fun painful.
On the new ablesense.com website design, I had foolishly applied some styles to the <html> element — specifically my font stack for the website. The particular selection of fonts was very important in making this mistake obscure:
html { font-family: helvetica, arial, sans-serif; }
Browsers have default fonts
The fonts all looked fine in Firefox, Safari, Chrome, and Internet Explorer (Helvetica on Mac, and Arial on PC). This lines up with the CSS rule above, so it seemed like everything was fine — but it was not.
Opera has a purpose after all
To satisfy some sense of thoroughness, I took a look at the website on Opera. Kaboom! All the text was displayed with “Lucida Grande” — which appeared nowhere in the website CSS! However, the developer tools revealed that “Lucida Grande” was in fact being applied quite on purpose. As it turns out, “Lucida Grande” is the default font for Opera, at least on Macs.
Faulty rationale
If putting CSS rules on the <body> tag is convenient for the cascade, then putting them on the <html> element must be — well — even more convenient! Right? Wrong.
Getting smart, after out-smarting myself
body { font-family: helvetica, arial, sans-serif; }
Let’s move on, and quickly
So to wrap up, don’t style the <html> element in CSS. You probably already knew this, but now you have another example of why it’s a bad idea.