CSS

I learned way back in the 1980s to always reuse code whenever possible. First, reinventing the wheel every time is stupid. Second, since the reused code has already been debugged, there is far less chance of error.
I always disliked CSS. I don’t like its convoluted syntax any more than javascript’s. I gritted my teeth and learned javascript anyway (I still have the fat book on it) because when I first got on the web it was about the only way to do certain things, like mouseovers. We used IE at work, and almost every web page I viewed in that browser was screwed up, stupid things like photos covering part of the text (see the image taken from Rolling Stone). Not only was it convoluted, messy, and error-prone, it was unnecessary, so I put off learning it until it became useful and necessary to do so.
They first developed CSS because morons didn’t know how to code properly, and used tables for everything and did the tables wrong; screen readers for the blind couldn’t make heads or tails out of them. I use tables as they were meant to be used, as tables. But tables got a bad name because of the bad coders.
When I saw that you could use CSS for mouseovers, I finally had a use and could get rid of the javascript. I put a <script> section with the six short lines in mcgrew.info and later at mcgrewbooks.com. Everything seemed to work well on all the devices I could test it on.
Then the big Samsung tablet died a couple of years ago and I replaced it with a new Acer. I was horrified to find that on the Acer in Firefox my pages all rendered in a sans-serif font rather than one of the three fonts I’d specified (Gentium Book Basic, Times New Roman, and Times).
So of course I started researching. I searched for an answer for months, and a search for Android fonts led me to a font called Droid Serif, so I added that.
It didn’t work. It was still sans-serif. It showed serif in the other browsers, but not Firefox. It was annoying. More annoying was that other sites’ pages would show a serif font. I downloaded them to study the code, and they were all machine generated messes. Nothing to see there.
Then my searching found a CSS answer: browsers could use fonts not installed on the device with a short bit of code. I made a test page, uploaded it—and it didn’t work. I fiddled with it, searching the web for an answer, and finally found it. Of all the pages I’d read, only one mentioned that the font code had to be places first in the script. I modified it and uploaded it again, and it worked! Gentium Book Basic on the Acer!
While I was searching, I found a “margin” statement. I had previously had a one row, three column table with the outside cells empty to add a fake margin. This didn’t confuse screen readers, but using the CSS made the pages a little shorter.
Then I spent the next few days adding it to the hundreds of pages on the site. Now there were two tasks left. One was to make a style sheet so I only had to change all those pages one more time, even if I find more useful CSS.
The second was the Bible. The titles are rendered in Olde English, written in Open Office, saved to PDF, and converted to JPG with GIMP. Adding the Olde English font allows me to delete dozens of graphics, saving space and making load times a little shorter. It also looks better.
I now have serifs in all the books, in the same fonts as the printed books.
I did run across one fairly large problem: the line height of The Hunchback of Notre Dame was fine before chapter two, and there the line spacing is widened. Odd, since the code heading for the rest of the chapters seemed identical to the code headings in the preface and first chapter. I finally found my error; not CSS but HTML.
Also, the Franklin Gothic font works in it on the computer, but not the tablet. So I just did away with the Franklin, which is similar to the Gentium, anyway,
I’d like to put the style sheet in the root, instead of one in each directory, but one site said IE has trouble if you do that. Is it correct?