This is the fourth part of some posts on using CSS in and with DT/DTTG. Though I wrote it as a single piece, I broke it up in smaller installments to keep the posts (barely) managable. Please let me know (preferably by a PM) if you find errors of any kind or are missing details. I’ll correct the first ones and try to help with the second ones.
Previous post | Next post
What about fonts?
If you want different fonts in your running text and your headline, you have to specify a different font-family for the headlines:
h1, h2, h3, h4 {
font-family: Avenir, Helvetica, "sans serif"
}
This font-family applies to headlines level 1 through 4. Note that font names containing spaces must be enclosed in double quotes. The selector is an example for specifying the same style for several HTML elements: just list the elements (or even more complicated selectors liks blockquote > p) separated by commas.
Usually, the default font sizes for the different headings are ok. If you want to change those, use the attribute font-size and specify an em value, for example 2.0em for a h1. Do not use pixels or other absolute values here: The person viewing your HTML might have chosen their own preferred font size in the browser settings and specifying absolute values for font sizes plays havoc with these settings.
Other font attributes you might want to use are font-weight to specify light or bold variants, text-decoration and text-transform. And perhaps color, of course.
What about colors?
The preceding samples used named colors. While that might seem natural (at least for English speaking people), it is a bit awkward. What if you want a particular type of light green with a blue tint? It would be a challenge to even come up with a single english word to describe that color. And you couldn’t be sure that your browser (or any browser) understands what you mean. Therefore, you can also specify colors by three hexadecimal digits like #fff (for white) or #f00 (for a dark red) or by six of them (#ffffff or #ff0000). These values represent values for red, green and blue components. So instead of going with the lightgrey understood by browsers, you might want to use #eee which is more a dirty white.
Other ways to specify colors are using rgb(red, green, blue) where the values in parenthesis are numbers between 0 and 255 or hsl(hue, lightness, saturation). MDN describes these variants in an article on color values.