Rule DeclarationsSo far I've focused on how you use CSS rule selectors to target tags, but you haven't yet looked much at the other half of a CSS rule, the declaration. I've used numerous different declarations to illustrate the selector examples but have only explained them minimally. Now it's time to look at declarations in detail. The diagram showing the structure of a CSS rule earlier in this chapter (Figure 2.2) shows that a declaration is made of two parts: a property and a value. The property states what aspect of the element are affected (its color, its height, and so on) and the value states what that property is set to (green, 12px, and so on). Every element has a number of properties that can be set using CSS; these differ from element to element. You can set the font-size property for text, but not for an image, for example. In each subsequent chapter of this book, I use real-world examples to show you the properties you can set for different elements and the values you can set for those properties. Because there are only a few different types of CSS rule values, let's look at them now. Values fall into three main types: Words. For example, in font-weight:bold, bold is a type of value. Numerical values. Numerical values are usually followed by a unit type. For example, in font-size:12px, 12 is the numerical value and px is the unit typepixels in this example. Color values. Color values are written as color:#336699 where the color in this example is defined with a hexidecimal value. There's not much I can tell you about word values that would make sense until you start using them, because they are specific to each element. Numerical and color values, however, can only be expressed in certain ways. Numerical ValuesYou use numerical values to describe the length (and I use "length" generically to mean height, width, thickness, and so on) of all kinds of elements. These values fall into two main groups: absolute and relative. Absolute values (Table 2.2) describe a length in the real world (for example, 6 inches), as compared to a relative measurement, which is simply a relationship with some other measurable thing (when you say "twice as long" that's a measure relative to something else).
When writing CSS that relates to fixed-sized elements such as images, I use only pixels. It's up to you, but pixels are also the only absolute unit that I use throughout this book, except in print style sheetsbecause paper is measured in inches, it makes sense to design print layouts with the same units. Although the absolute units are pretty self-explanatory, the relative units (Table 2.3) warrant a little more explanation.
Em and ex are both measurements of type size. The em is equal to the height of the character box for a font, so its size varies depending on which font you are using. Ex is the equivalent of the x-height of the given font (so named because it is the height of a lowercase xin other words, the center bit without the ascenders and descenders that appear on characters such as p and d.) Percentages are useful for setting the width of containing elements, such as divs, to the proportion of the browser width, which is the one way to create "liquid" designs that smoothly change size as the user resizes the browser window. Using percentages is also the right way to get proportional leading (pronounced like lead, the metal), which is the distance between the baseline of one line of text and the next in a multiple-line text block such as a paragraph. You will learn more about leading in Chapter 3.
Color ValuesYou can use several value types to specify color, use whichever one of the following you prefer. Hexadecimal (#RRGGBB and #RGB). If you already know languages like C++, PHP, or JavaScript, then you are familiar with hexadecimal (hex) notation for color. The format is this #RRGGBB In this value, the first two define red, the next two green, and the next two blue. Computers use units of two to count, rather than base 10 like us mortals, and that's why hex is base 16 (2 to the power of 4), using the 16 numbers/letters 09 and AF. A thru F effectively function as 11 through 16. Because color is represented by a pair of these base 16 numbers, there are 256 (16 x 16) possible values for each color, or 16,777,216 combinations (256 x 256 x 256) of colors. You definitely get the most color options by using hexadecimal, although you can get by with far less. You'd be hard pressed (to say nothing of your monitor) to discern the difference between two immediately adjacent hex colors. Don't forget the # (hash) symbol in front of the value. So, for example, pure red is #FF0000, pure blue is #00FF00, and pure green is #0000FF.
You can also use the following shorthand hex format #RGB If you select a color where each pair has the same two letters, such as #FF3322 (a strong red) you can abbreviate it to #F32. Percentages RGB (R%, G% B%). This is notation that uses a percentage of each color like this R%, G%, B% Acceptable values are 0% to 100%. Although this only yields a piddling one million color combinations (100 x 100 x 100), that's more than enough for most of us. Also, it's much easier to make a guess at the color you want in RGB compared with hex notation. So, for example, 100%, 0%, 0% is max red, 0%, 100%, 0% is max green, and 46%, 76%, 80% is close to that dusky green-blue color I demonstrated in hex above. Color Name (red). As you have seen from all the preceding color examples in the selector discussions, you can simply specify a color by name, or keyword to use the official term. However there are limitations. There is no W3C specification to say exactly how you should render a color like olive or lime; basically, every browser manufacturer assigns their own (presumably hex) values to each color keyword. Also, only 16 colors are in the W3C spec and, therefore, you can be sure to find only these 16 in every browser. Here they are, in alphabetical order aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Most modern browsers offer many more colors (usually 140), but if you want to specify colors by name, you can only absolutely rely on these 16. I usually use hex colors because I program, and that's how you do it in the murky world of coding. To save you from struggling to mix up colors yourself, visit www.webcolors.freeserve.co.uk/, which has color palettesthe Web-safe one (see the sidebar "You Don't Have to Limit Yourself to Web-Safe Colors") and othersas well as a great overview of color.
|