Ïðèãëàøàåì ïîñåòèòü
ßçûêîâ (yazykov.lit-info.ru)

Rule Declarations

Previous Page
Table of Contents
Next Page

Rule Declarations

So 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 Values

You 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).

Table 2.2. Absolute Values

ABSOLUTE VALUE

UNIT ABBREVIATION

EXAMPLE

INCH EQUIVALENT

Inches

in

height:6in

 

Centimeters

cm

height:40cm

2.54

Millimeters

mm

height:500mm

25.4

Points

pt

height:60pt

72

Picas

pc

height:90pc

6

Pixels

px

height:72px

72

*Examples are not equivalent lengths.


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.

Table 2.3. Relative Values

RELATIVE VALUE

UNIT VALUE

EXAMPLE

Emt

em

height:1.2em

Ex

ex

height:6ex

percentage

%

height:120%


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.

Why You Should Use Ems to Specify Type Sizes

There are two important benefits to using a relative sizing method like ems to specify your font sizes:

  • You can use inheritance to your advantage by declaring the body element to have a size of 1em, and this becomes a sizing baseline because it causes all other element's text to size relative to it. Because your content text always goes inside other elements, such as p and h4, you then simply write rules that state that the p tag is .8em, and that text links are .7em, for example. In this way, you establish proportional relationships between all the text elements of your design.

    Note that in Internet Explorer, when you set an em size for the body, paragraphs size in proportion automatically, but h1 thru H6 don't; you have to explicitly set some relative size for them (such as 1.1em for h1, .9em for h2, and so on), otherwise they remain fixed at their default sizes.

    If you later decide to increase the overall size of the text in your site, you can go back to the body tag and set its size to, say, 1.2em. Magically, all your text increases in size proportionally by the same amount (a fifth larger, in this case) because all the other tags inherit their size from the body tag.

  • If you don't define font sizes with relative units, you effectively disable the font sizing capabilities available in the View menu of Internet Explorer (although other browsers can resize absolute font-size units), and therefore disenfranchise visually impaired users who rely on that capability to get your content to a size where they can read it. You need to check frequently during development to make sure that upping the font size in this way doesn't break your page's structure.

For these two reasons, I advise you to set all font sizes in ems rather than in absolute units such as pixels. If you are designing a row of tabs in a fixed horizontal space, the layout has the potential to break if the text gets resized. If you're careful, however, and design with this possibility in mind, you can develop such components of your design so that they can accommodate larger type when the size is changed by the user.


Color Values

You 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.

Rule Declarations

Most colors aren't easy to guess at a glance; for example, #7CA9BE is a dusky green-blue color. But if you just look at the first value in each RGB pair, 7, A, and B in this case, then you can see that red is slightly below half of 16, the maximum value, and green and blue are higher and about the same value. With this information, it's easier to make an informed guess as to what the color is.


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,
Rule Declarations 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.

You Don't Have to Limit Yourself to Web-Safe Colors

If you use Macromedia Dreamweaver or other Web development tools, you are used to picking colors from a Web-safe palette. This is a set of 216 colors that only an engineer would have come up with, comprising mostly bright and saturated colors, with limited choices in dark and pale colors. These colors, you may (not) be interested to know, comprise twin hex pairs like this, #3399CC or #FF99CC, and only use the values 0, 3, 6, 9, C, and F. So any color you can come up with that meets these criteria is Web safe. These colors are a large subset of the 256 colors (40 are reserved for the system) that a monitor driven by an 8-bit VGA card can display (remember 8-bit?), so for years, we were told not to use any others. But today, under 1 percent (source: www.thecounter.com) of the world's surfers still use 8-bit color, so you can confidently use any color in your designs that you can create with the methods listed in this chapter.


    Previous Page
    Table of Contents
    Next Page