7Website preliminaries

The first proper bit of coding I’m going to do is to use someone else’s software — common plagiarism, you might think — well not quite.

I mentioned in § 6.2.1 that browsers are inconsistent in their interpretation of HTML and CSS, they also tend to impose their own values for things like default line heights, margins, the font sizes of headings and so on and so on. I sometimes think browsers are the last thing you should use to display a web page.

Fortunately better minds than mine have looked into this (I actually think some people might do this for a living — there might be some potential in this internet thing after all).

Two such people are Nicolas Gallagher and Jonathan Neal (Nicolas Gallagher also had something to do with certain versions of the clearfix hack § 6.4.1), they came up with a CSS file called normalize.css that can be downloaded and used on any website. I give full accreditation in the acknowledgments section.

Normalize is a small CSS file that fixes common desktop and mobile browser discrepancies and bugs. It provides a degree of cross-browser consistency by defining the styling of the HTML elements — in short, it tries to make a websites look the same on all browsers.

Best of all they let you use it for nowt^†1.

You can download normalize.css from the normalize website here. It’s also included in the downloadable zipped folder structure in the previous section.

I recommend you use the version included in the downloadable zip, this is because I’ve fiddled with it — read on:

Firstly, and most importantly, I renamed it — normalize with a ‘Z’ is ok for Americans (and peculiarly for the Oxford University Press), but for rufty-tufty Englishmen (and simple slow spoken Yorkshire folk like me) it’s normalise with an ‘S’. So on my site it’s normalise.css.

Secondly, I’m not using the latest version of Normalize. I’m using version 4.1.1 and the latest version is 8.0.1. There is no particular reason for not updating; the truth is I just didn’t notice the new releases.

That said, I haven’t tried the latest version and until I’ve had a chance to test it, I’ll stick with 4.1.1. This is the version in the zipped download, I don’t know if it’s still available on the normalize website.

Thirdly, I changed the file (just a little bit). I did two things and they are both very minor:

html {
  font-family: serif; /* 1 */  /* changed from san-serif by MG */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
. . .

h1 {
  font-size: 2em;
  margin: 0 0; /* changed from 0.67em to 0 by MG */
}

The first change was to make the default html font-family a serif font (a change from sans-serif). This is just a personal preference; my body text is Equity which is a serif font, my thinking was — if it all goes to shit at least it will be in a serif font.

The other change was to set the <h1> top and bottom margins to zero (a change from 0.67 em). My reason for doing this was that I wanted to define the margins for each element I use in the style.css file and not have to go looking in other places to see why things weren’t working. I want all margins to be zero to start with.

And that’s it — don’t worry about normalise.css, it just works — it’s actually fairly straight forward if you look through it, but for the moment just use it.