Mastering Cascading Style Sheets involves knowing how to use a large number of CSS properties that control the appearance of text, images, tables, and forms. To help you in your quest, this appendix gives you a summary of the properties and values you'll use to create your own styles. This list covers nearly all of the CSS 2.1 standard properties—the ones that most web browsers support.
This appendix leaves out properties that no (or hardly any) browsers recognize. Otherwise, the following descriptions mention the browsers with which each property works. For full details straight from the horse's mouth, visit the World Wide Web Consortium's CSS 2.1 specification at www.w3.org/TR/CSS21. You can read about some of the newer CSS 3 properties in Chapter 16. (They don't work in all browsers.)
Every CSS property has a corresponding value. The color property, which formats font color, requires a color value to specify which color you want to use. The property color: #FFFFFF; creates white text. Different properties require different types of values, but they come in four basic categories: colors, lengths and sizes, keywords, and URLs.
You can assign colors to many different properties, including those for font, background, and borders. CSS provides several different ways to specify color.
A web color keyword is simply the name of the color, like white or black. There are currently 17 recognized web color keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Some browsers accept more keywords, and CSS 3 promises to offer many more in the future: for one example, RGBA color, see RGBA Color. You can read a lot more about CSS 3 at www.w3.org/TR/css3-color.
Computer monitors create colors using a mixture of red, green, and blue light. These RGB values can create (nearly) the full spectrum of color. Almost every design, illustration, and graphics program lets you specify colors using RGB, so it's easy to transfer a color from one of those programs to a CSS property. CSS represents RGB values in several ways:
Hex values. The method most commonly used on the Web for identifying color, hex color values consist of three two-character numbers in the hexadecimal (that is, base 16) system. #FF0033 represents an RGB value composed of red (FF, which equals 255 in normal, base 10 numbers), green (00), and blue (33). The # tells CSS to expect hex numbers ahead, and it's required. If you leave off the #, a web browser won't display the correct color.
RGB percentages. You can also specify a color using percentage values, like this: rgb(100%, 0%, 33%). You can get these numbers from image-editing and design programs that can define colors using percentages (which is most of them).
Decimal values. Finally, you can use decimal RGB values to specify a color. The format is similar to the percentage option, but you use a number from 0 to 255 to indicate each color: rgb(255, 0, 33).
It doesn't matter which method you use—they all work. For consistency's sake, you should pick one way of specifying RGB values and stick with it. The Windows and Mac operating systems both have color pickers that let you find the perfect color from a palette of millions, and then show you the RGB value. Alternatively, you can use this free online color picker: www.ficml.org/jemimap/style/color/wheel.html. Or, for more advanced color picking (including the ability to create and save a pallet of colors), check out http://kuler.adobe.com.
CSS provides many different ways to measure the size of type, the width of a box, or the thickness of a borderline. To indicate type size, you can use inches, picas, points, centimeters, millimeters, em-heights, ex-heights, pixels, and percentages. However, even though there are a lot of options, most don't apply to the world of onscreen display, for reasons discussed on Using Pixels. You really need to think about these three only—pixels, ems, and percentages.
A pixel is a single dot on a computer screen. Pixels give you a consistent method of identifying lengths and font sizes from computer to computer: 72 pixels on one monitor is 72 pixels on another monitor. That doesn't mean the actual, real-world length is the same for everyone, though. Since people set their monitors to different resolutions—800 X 600, 1024 X 768, 1600 X 1200, or whatever—72 pixels may take up 1 inch on one monitor, but only half an inch for someone else. Nevertheless, pixels give you the most consistent control over presentation.
There's just one drawback to using pixels: Folks using Internet Explorer 6 or earlier can't resize any type that's sized using pixels. If your text is too small for someone's eyes, the visitor won't be able to enlarge it to make it more readable. (See Using Pixels for more on pixel measurements.)
Originally from the typographic world, an em is a unit that represents the height of the capital letter M for a particular font. In web pages, 1em is the height of the web browser's base text size, which is usually 16 pixels. However, anyone can change that base size setting, so 1em may be 16 pixels for one person, but 24 pixels in someone else's browser. In other words, ems are a relative unit of measurement.
In addition to the browser's initial font-size setting, ems can inherit size information from containing tags. A type size of .9em would make text about 14 pixels tall on most browsers with a 16 pixel base size. But if you have a <p> tag with a font size of .9ems, and then a <strong> tag with a font size of .9ems inside that <p> tag, that <strong> tag's em size isn't 14 pixels—it's 12 pixels (16 X .9 X .9). So keep inheritance in mind when you use em values.
CSS uses percentages for many different purposes, like sizing text, determining the width or height of an element, and specifying the placement of an image in the background of a style, to name a few. Now, what you're taking a percentage of varies from property to property. For font sizes, the percentage is calculated based on the text's inherited value. Say the general font size for a paragraph is 16 pixels tall. If you created a style for one special paragraph and set its font size to 200 percent, that text is displayed at 32 pixels tall. When applied to width, however, percentages are calculated based on the width of the page or on the width of the nearest parent element. You specify a percentage with a number followed by the percent sign: 100%.
Instead of color or size, many properties have their own specific values that affect how the properties display and are represented by keywords. The text-align property, which aligns text on screen, can take one of four keywords: right, left, center, and justify. Since keywords vary from property to property, read the property descriptions that follow to learn the keyword appropriate to each property.
One keyword, however, is shared by all properties—inherit. This keyword lets you force a style to inherit a value from a parent element. You can use the inherit keyword on any property. This keyword gives you the power to make styles inherit properties that aren't normally inherited from parent tags. For instance, say you use the border property to add a border around a paragraph. Other tags, such as <em> and <strong>, inside the <p> tag don't inherit this value, but you can force them to do so with the inherit keyword:
em, strong {
border: inherit;
}That way, the em and strong tags display the same border value as their parent <p> tag. So the <em> and <strong> elements of the paragraph each get their own borders, as does the entire paragraph, so you'd end up with boxes within boxes (a good reason why that property isn't inherited normally). If you change the <p> tag's border value to a different color or thickness, the <em> and <strong> tags inherit that value and display the same type of border, too.
URL values let you point to another file on the Web. For example, the background-image property accepts a URL—the path to the file on the Web—as its value, which lets you assign a graphic file as a background for a page element. This technique is handy for adding a tiling image in the background of a page or using your own graphic for bulleted lists (see Graphic Bullets).
In CSS, you specify an URL like this: url(images/tile.gif). A style that adds an image called tile.gif to the background of the page would look like this:
body { background-image: url(images/tile.gif); }Unlike in HTML, in CSS, quotes around the URL are optional, so url("images/tile.gif"), url('images/tile.gif'), and url(images/tile.gif) are equivalent.
The URL itself is just like the HTML href attribute used for links, meaning you can use an absolute URL like http://www.missingmanuals.com/images/tile.gif, a root-relative path like /images/tile.gif, or a document-relative URL like ../../images/tile.gif. See Controlling Repetition for the full story on these kinds of paths.
