HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [74]
4. Preview the scheme.
The Designer has several options for previewing your color scheme, including the ability to create quick Web pages using the scheme. You might also look at the color blindness simulators to see how your page appears to people with different kinds of color blindness.
5. Export the color settings.
If you want, you can export the color settings to a number of formats, including a very nice HTML/CSS format. You can also save the colors to a special file for importing into GIMP or Photoshop, so the exact colors used in your page will be available to your image editor, too.
Picking a color scheme
The various color schemes use mathematical relationships around the color wheel to predict colors that work well with the primary color. Here are the basic schemes, including what they do:
♦ Mono (monochromatic): Takes the base hue and offers a number of variations in saturation and value. This scheme is nice when you really want to emphasize one particular color (for example, if you’re doing a Web site about rain forests and want a lot of greens). Be sure to use high contrast between the foreground and background colors so your text is readable.
♦ Complement: Uses the base hue and the complementary (opposite) color. Generally, this scheme uses several variations of the base hue and a splash of the complementary hue for contrast.
♦ Triad: Selects the base hue and two opposite hues. When you select the Triad scheme, you can also choose the angular distance between the opposite colors. If this distance is zero, you have the complementary color scheme. When the angle increases, you have a split complementary system, which uses the base hue and two hues equidistant from the contrast. Such schemes can be jarring at full contrast, but when adjusted for saturation and value, you can create some very nice color schemes.
♦ Tetrad: Generates four hues. As with the Triad scheme, when you add more hues, keeping your page unified becomes more difficult unless you adjust the variations for lower contrast.
♦ Analogic: Schemes use the base hue and its two neighbors.
♦ Accented Analogic: Just like the Analogic scheme, but with the addition of the complementary color.
Chapter 2: Styling Text
In This Chapter
Introducing fonts and typefaces
Specifying the font family
Determining font size
Understanding CSS measurement units
Managing other font characteristics
Using the font rule to simplify font styles
Web pages are still primarily a text-based media, so you’ll want to add some formatting capabilities. XHTML doesn’t do any meaningful text formatting on its own, but CSS adds a wide range of tools for choosing the typeface, font size, decorations, alignment, and much more. In this chapter, you discover how to manage text the CSS way.
A bit of semantics is in order. The thing most people dub a font is more properly a typeface. Technically, a font is a particular typeface at a particular size with a specific set of decorations (underlining, italic, and so on). The distinction is honestly not that important in a digital setting. You don’t explicitly set the font in CSS. You determine the font family (which is essentially a typeface), and then you modify its characteristics (creating a font as purists would think of it). Still, when I’m referring to the thing that most people call a font (a file in the operating system that describes the appearance of an alphabet set), I use the familiar term font.
Setting the Font Family
To assign a font family to part of your page, use some new CSS. Figure 2-1 illustrates a page with the heading set to Comic Sans MS.
If this page is viewed on a Windows machine, it generally displays the font correctly because Comic Sans MS is installed with most versions of Windows. If you’re on another type of machine, you may get something else. More on that in a moment, but for now, look at the simple case.
Here’s the code: