7.4.3
html and body selector declarations
These are a bit interlinked so I’ll explain them together (with pictures to make things easier). If all I had in the html and body sections was this:
html {
background-color: #fbfaf6; /* cream page bkgrd */
}
body {
}
i.e. just a background colour then I would get this:
So that’s pretty much as expected, it gives a pale cream background and nothing else.
- The browser window in Figure 7.8 is about 1700 ×1200 px. It needs to be wider than 1276 px for the effects I’m describing to be observable.
Now let’s add a bit of body styling:
html {
background-color: #fbfaf6; /* cream page bkgrd */
}
body {
max-width: 1276px;
height: 1000px;
margin: 0 auto;
background-color: #fff; /* make body area white */
}
Now we get:
It’s made the middle bit white; what’s more that middle bit is exactly 1276 px wide and is positioned in the centre of the browser window.
It works like this, the body declaration max-width: 1276px does exactly what is says, it restricts the body area to a maximum width of 1276 px; if the browser window is wider than this, the body area will be limited to a maximum width of 1276 px.
I’ve included the height declaration so that you can see the body area, it will be 1000 px high (remember the <body> area in the HTML is empty, it has no content and since we have defined the margins and padding of everything to be zero, it would have no visible height. This would change if we started adding content to the body in the html, but at the minute it’s empty — hence the height declaration)
The background colour is set to white (#fff) so we can see a white panel where the body area is, this panel is in the middle of the browser window because of the margin: 0 auto declaration. This sets the top and bottom margins to zero and the left and right margins to auto, this forces the body area into the centre of the screen. The auto value when applied to both left and right margins makes them equal in width, putting the body area in the middle (it’s a very commonly used CSS trick).
The next thing is the border properties in the body selector. Add them in:
html {
background-color: #fbfaf6; /* cream page bkgrd */
}
body {
max-width: 1276px;
height: 1000px;
margin: 0 auto;
background-color: #fff; /* make body area white */
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
}
All this does is put a grey border down each side of the body area:
That’s it for the body selector, but take out the height declaration, we’ll let the body area set its own height based on its content.
That just leaves some styling points in the html selector, add the following three lines:
html {
background-color: #fbfaf6; /* cream page bkgrd */
font-size: 24px;
color: #404030;
text-rendering: optimizeLegibility;
}
Taking these in order:
The font-size: 24px sets the default text size for the website; this is set at 24 px and I arrived at this size based on the long discussion in § 3.3.3 and its preceding sections.
This is the default point size that the rem unit is based upon (§ 3.2.6 & § 5.6.2). I.e. text that is sized in rems will use 24 px as its base value; for example text anywhere on the page that is set to 2 rems will be 48 pixels high; similarly text at 0.5 rem will be 12 pixels high.
The text colour is set to a shade that is just off grey, it’s set with the color: #404030 property, it is this colour:
When I was researching websites, one thing I noticed was that very few of the good looking ones used pure black for their text colour; they used various versions of dark grey — this got me thinking; when I write by hand I use a blue-black ink (yes, I write with a fountain pen†2— not a quill, I hasten to add — I’m not that old); even black biro is actually a very dark purple.
So maybe it makes sense not to use pure black — from what I’ve read, the eye prefers a dark grey to black and so I’ve used a dark grey just slightly shifted away from the blue; it’s about 77% black. I like it, its hex value is #404030.
Finally: text-rendering: optimizeLegibility — yeah, I don’t think that’s how you spell optimise either. Strictly speaking this isn’t part of the CSS standard, but it seems to be widely supported. Think of it as an instruction to the browser’s rendering engine, telling it how to render a font, the other options are optimizeSpeed, geometricPrecision and auto. The reason I’ve chosen optimizeLegibility is that this supports font kerning.
Font kerning is where certain pairs of letters are adjusted to give better spacing and to make them fit together properly, like this:
|
Kerning off | |
|
Kerning on | |
Mr Butterick gives a full explanation of how kerning works on his practical typography website.
I want the fonts on the website to use kerning and setting text-rendering: optimizeLegibility turns this feature on (albeit at the expense of rendering speed).
Ok, that’s it for the preliminary stuff.
| †2 | My old Dad used to say “Only ever sign your name with a fountain pen”. He’s dead now, but I like to think he would be please with me passing on his pearls of wisdom. | ||
