Thread by @jessitron

It's a holiday, I get to do what I want, so let's see what else is in the CSS 2.1 Spec!

It's time for backgrounds and fonts...

background-color is a friendly property. Use it even when you also specify the image, in case the image doesn't load/hasn't loaded.
Defaults to 'transparent' so the stuff behind it shows through.

The background fills the margins and the borders. (It shows under dashed borders)

background-image: url("where-is-it.jpg")
makes a picture show.

How big the picture is depends on the intrinsic properties of the image (width, height, ratio). Anybody know how to find out whether an image file has these?

a too-small image will repeat.
You can turn this off with

background-repeat: no-repeat

or make it only go sideways or down with 'repeat-x' or 'repeat-y'

This doesn't always work for the page body. It does in a div.

background-attachment is strange.

"scroll" is the default and makes sense; the background scrolls with the rest of the page.

"fixed" makes the background freeze. Please only use this for the page body. Using it on smaller elements does something weird.

jessitron.github.io/own-site/play/…

background-position is supposed to let you move the background image around.
I couldn't get it to do anything for the body, but inside an element, you can

background-position: center center

to put the image in the middle.

background-position is weird because if you give it percentages, it's relative to both the image and the space. 100% 100% = bottom right; 50% 50% = center center.

But if you give it lengths, that's an offset. Moves the top-left corner of the image.

'background' is a shortcut property that lets you specify these other properties in one line.

Remember that any property you don't specify gets reset to its default. So do 'background' first if you want to refine the others in later lines.

Order of lines very much matters in CSS.

It's handy for fallbacks. Put your fallback first, top choice last:

background: blue;
background: url("holding-still-sky.png") fixed;

so a browser that doesn't support 'background-attachment: fixed' can ignore the whole line.

Fonts! Fonts are hard!

CSS and the browser need to consider
- sets of fonts the browser has
- poorly standardized properties
- other languages
- available characters
- sizes
- weights

A font-family is a set of fonts - different weights, sizes, italicness.

The browser has some built in ones: serif, sans-serif, cursive, monospace, fantasy (why??)

The font-family property accepts a comma-separated (unusual for CSS) list of font families. Put your favorite first. Put one of the standard keywords last.

font-family: "Hoefler", "Garamond", "Helvetica", serif;

You can usually leave off the quotes around the font family names, but not always (numbers, symbols, overlap with keywords) so why not call a string a string?

'font-style' is only about italicness.
It can be 'italic' which will also accept a font labeled as 'oblique'

'font-variant' is only about small-caps. (why is that so important?)

font-weight is about boldness. Many levels of boldness!

There might be fonts labeled Bold, Black, DemiBold, Book, Roman, Regular, etc.

CSS offers rankings for these, keywords 100, 200... 900. But you really get what you get from the font.

'font-weight' has the important values 'bolder' and 'lighter' which are relative to the parent. So you can escalate.