Vocabulary is what adds diversity to a language. In the examples I have presented so far, I kept the vocabulary simple so that we could concentrate on the syntax and semantics. Now, it is time to broaden your horizons—not to mention your design possibilities—with a slate of new CSS vocabulary.
I want to say up front that this is not a comprehensive list of CSS properties and values. It is a vocabulary list intended for designers to reference while working. But, just as when you are learning a new spoken language you wouldn’t start off memorizing the dictionary, you don’t need to know all of the nuances of the vocabulary to create great Web designs with CSS.
A CSS rule is made up of a selector with one or more declarations separated by semi-colons, and each declaration is made up of a property and a value (see Chapter 3 if you need more details). This chapter presents the various properties you will be using when describing your designs in CSS with a list of possible values underneath. The values come in two basic types: keywords and variables.
Many of the values you will assign to a CSS property are keywords—words you type exactly as you see them—and most are self-explanatory, but a few need some additional explanation:
auto. 
The browser calculates the value.
inherit. Sets the property to use the same value as its parent element.
none. Removes any specific value, which prevents the property from being displayed or removes any limitations.
normal. Sets the property to its default value.
transparent. Sets the color value to 0% opacity, allowing anything behind the object to show through. However, any length values associated with the property are still honored.
Values listed in chevron brackets <> are variables. You will need to determine the exact value based on the type of variable:
<color>. A chromatic value, based on the amount of red, green, or blue for the hue. Color values are most commonly expressed using the hexadecimal notation, RGB values (using percentages or the 0–255 scale), or as a keyword color name.
Note
See Appendix A for more details on values used in CSS.
<font-name>. The name of any font family you want to use. Keep in mind the browser can only use the font families that are installed on the end-user’s computer.
Note
See Appendix C for a list of Web-safe fonts.
<length>. A relative or absolute length. Relative lengths vary based on context, while absolute values remain constant.
<number>. An integer, either positive or negative.
<percentage>. Generally calculated as a percentage of the inherited value. For example, if the parent’s font size is 12px and the element’s font size is 50%, then the rendered font will be 6px. Whenever a percentage value is required, what it is a percentage of will be indicated. For example: <percentage-parents-font-size>.
<url>. A URL can either be a relative path or an absolute URL. If in doubt, use the absolute URL for a resource. Be careful, though, as this can cause trouble if you move the site to another location.
Font properties apply directly to individual letter forms to change their nature and shape. These styles are generally associated with a unique version of the font within the same font family, or require that the computer create a faux version of the font on the fly. For example, italics are associated with a specific version of the font that has been created in the italic style—typically slanted and made to look more hand-written than the default style. However, if no such independent version of the font exists on the end user’s computer, the browser will synthesize an italics version by slanting the default version by 15 degrees. Browser-synthesized fonts are not as readable or attractive as those created by a typographer, so it’s best to use only styles with a true version of the font available.
font. The shorthand property that lets you set all of the font properties listed below at the same time, as well as line height.
Values: inherit | <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>
font-family. Sets a specific font family by name or a generic font family of serif, sans-serif, monospace, handwritten, or fantasy. Font names with two or more words must be in quotes (for example, “lucida sans”). Generic values will use a font defined by the browser for that style.
Values: inherit | <font-name> | serif | sans-serif | cursive | fantasy | monospace
Multiple Values: Include as many font-names as desired, separated by commas. The browser will try each font in sequence until it finds one it can use.
font-weight. The boldness of the font, generally a thicker version of the default. If a bold version of the font does not exist, the browser will simulate one based on the default pattern.
Values: normal | bold | bolder | lighter | inherit
font-variant. Sets the small-cap style, where all letters are capitals, but capitalized letters are slightly larger.
Values: normal | small-caps | inherit
font-style. Sets whether a font is italic or oblique. Most browsers will treat both values as italic if a true italic version of the font exists. If an italic version does not exist, the browser synthesizes an oblique version of the font by slanting the default version of the font to the right by 15 degrees.
Values: normal | italic | oblique | inherit
font-size. Sets an absolute-size, length, relative-size, or percentage based on the size of the font of the parent element.
Values: <length> | <percentage-parents-font-size> | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large | inherit
Text styles are properties applied to an entire block of text within an element, but that do not affect the individual letters themselves. This includes text spacing properties such as letter, word, and line spacing, as well as text alignment, indents, underlining, overline, strike-through effects, and text capitalization.
color. Sets the text color.
Values: <color> | inherit
letter-spacing. Places an exact amount of space between each letter in a block of text to control the letter tracking. This is not to be confused with kerning, which uses data from the font to adjust spacing between letters based on pairing context. Letter spacing is a crude way to adjust spacing between letters, since it does not take into account the visual appearance of the letters. It is best reserved for large text such as headlines.
Values: <length> | <percentage-font-size>% | inherit
word-spacing. Places an exact amount of space between each word in a block of text. Like letter spacing, this is a rough way to adjust spacing and is best used with large text.
Values: normal | <length> | inherit
line-height. Controls the spacing between lines in a block of text. Adjusting line height to at least 1.5 (=150%) or higher is generally recommended to make large blocks of text more readable.
Values: normal | <number> | <length> | <percentage-font-size>% | inherit
white-space. By default, Web browsers collapse multiple spaces in HTML code into a single space in the Web page and will automatically wrap text rather than allowing a horizontal scroll. White space allows you to override both of these defaults to preserve all white space or prevent text from wrapping.
Values: normal | pre | nowrap | pre-wrap | pre-line | inherit
text-align. Sets the justification of text to left, right, center, or full justification of the left and right edges.
Values: left | center | right | justify | inherit
vertical-align. Sets the vertical positioning of a block of text in relation to adjacent elements in the same line. Although seemingly useful for aligning elements, experience shows it does not behave as designers would expect, since it only works on inline elements and can not be used to vertically align blocks of text. The most common use is for super-scripting and sub-scripting text.
Values: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage-line-height>% | <length> | inherit
text-indent. Sets an indent for the first line in a block of text.
Values: <length> | <percentage-width>% | inherit
text-decoration. Sets a line to be placed over, under, or through the text in an element. The style of the line cannot be controlled and will be the same color as the text.
Values: none | line-through | underline | overline | blink | inherit
text-transform. Sets the capitalization of letters in a block of text, regardless of the state of the originating text.
Values: lowercase | capitalize | uppercase | none | inherit
All elements have a background that fills the area of its element box behind any content and padding, up to its border (see the next section for details on the element box). The background can be a solid color or an image that can be tiled, with its starting point positioned horizontally and vertically within the box.
background. The shorthand property that lets you set all of the background properties listed below at the same time.
Values: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> | none
background-color. Sets the color to fill the area of an element behind the content up to its border. Any area of the background not covered by a background image will fill with the background color.
Values: <color> | transparent | inherit
background-image. Sets an image to appear behind the element’s content and padding. You can use PNG (8, 24, or 32), JPEG, or GIF image formats.
Values: url(<url>) | none
background-attachment. Controls whether an image will scroll with the content of the element or stay fixed behind it.
Values: scroll | fixed | inherit
Note
For ideas on using backgrounds in layout, see Chapter 8, “Layout.”
Background image tiling is how a lot of visual design is accomplished, so it’s important to understand how the different tiling methods work and what they are for.
background-repeat. Controls whether or how the background image repeats (or not). You can set the background to tile, tile horizontally, tile vertically, or just appear once.
Values: repeat | repeat-x | repeat-y | no-repeat | inherit
repeat. Tiles the background image in the box horizontally and vertically to fill the entire area. Repeat is most often used for textured backgrounds.
no-repeat. The background image appears once and does not tile. Any area not covered by the background image is filled with the background color. No-repeat works well for water-marks and graphic bullets.
repeat-x. The background image tiles horizontally across the element. Any area below the tiling background is filled with the background color. Repeat-x is often used to create header designs by repeating a pattern or gradient across the top of an element.
repeat-y. The background image tiles vertically in the element. Any area of the box to the right of the tiling background is filled with the background color. Repeat-y is useful for creating column boundaries.
By default, all backgrounds are positioned in the top left corner of the element they are in, but you can offset that position in a number of different ways. Background positions can be set using one value or two values to set its horizontal and vertical positions.
background-position. Uses one or two values separated by a space for the distance from the top or left side of the element to specify where the background will start to appear.
Values: <length> | <percentage-box-width+padding>% | top | bottom | center | left | right | center | inherit
Multiple Values: One value for both top and left position, two values separated by a space for top and left respectively.
<length>. Places the background a specified distance from either the top and/or left side of the element. For example, 0 0 is the top left corner. 10px 15px pushes the background starting point down 10px and over to the right by 15px.
<percentage-box-width+padding>. Places the background a distance from the top and/or left side of the element, calculated as a percentage of the width or height of the element. For example, if the box was 10px by 20 px, and the background position is set to 25%, the background would be pushed down 5px and over to the right by 3px (rounding up from 2.5).
top. Places the top of the background image against the top of the element.
bottom. Places the bottom of the background image against the bottom of the element.
left. Places the left side of the background image against the left side of the element.
right. Places the right side of the background image against the right side of the element.
center. Places the top and/or left corner of the background image in the center of the element.
All elements are rectangular in shape—a box. Every time you add an HTML tag to create an element, you are creating an element box. All element boxes have a top, right, bottom, and left side that you can style, setting the margin, padding, border, width, and height, as well as the visibility and float.
Boxes can be set to automatically position themselves in context to surrounding boxes in one of two ways:
Inline boxes flow side-by-side horizontally, from left to right, with their left and right sides butting against each other, unless separated by a margin. Inline boxes will flow until they reach the right edge of the element and then will have a soft-return to the next line. Boxes that cannot break, such as images, will go off the right side and either be hidden or require a horizontal scroll.
Block boxes stack on top of each other vertically, with a hard return above and below the box, with bottom and top sides butting against each other, unless separated by a margin. Block boxes will continue down the page, requiring a vertical scroll if the height of the box does not allow all content to be shown.
All elements will have a default display type, which you can override using the display property that tells the element how to behave in relation to the elements around it.
display. Sets whether the element’s box will be inline, block, a list item, or whether it appears at all. A value of none removes the element from the page completely so that a dynamic action can show it at the right time.
Values: inline | block | list-item | none | inherit
inline. Element boxes flow horizontally next to each other from left to right.
block. Element boxes flow vertically, stacking on top of each other from top to bottom.
list-item. Element boxes flow vertically, stacking on top of each other from top to bottom, like block, but with a list-marker and indented lines of text.
none. The element is completely removed from the document.
inherit. Uses the display style of the parent element.
One way to hide an element is to set the display property to none and completely remove it from the document. If you want the element to remain in the document but be invisible, you have other options:
visibility. Sets whether the box is visible or invisible. A hidden element will still take up space but will appear to be empty, like the invisible man in a rain storm.
Values: visible | hidden | inherit
opacity. Sets the opacity of a box on a scale from 0.0 (clear) to 1.0 (opaque). This value affects the opacity of the element and all of its content and cannot be overridden by child elements. Opacity does not currently work in IE.
Values: <0.0-1.0> | inherit
filter: alpha(<0-100>). Sets the opacity of a box in IE on a scale from 0 (clear) to 100 (opaque). This is not a true CSS property, but it can be added to any CSS rule. If you set both the filter: alpha and the opacity, you can be sure you have the same value set for all browsers, including IE.
A floating element is one whose box aligns itself to the left or right. Surrounding content then wraps around it. This is often used to float images with or without captions, but can also be used for sidebars, pull quotes, or any other elements with a close association with the main text.
Note
The float property has become crucial to multi-column Web layouts, as explained in Chapter 8, “Layout.”
float. Positions the box to the left or right within its parent element. Any content below the element will wrap around it in moving up into the available space. If multiple elements are floated next to each other, then they will line up horizontally as space allows.
Values: left | right | none | inherit
clear. When applied to an element that has been placed below a floating element, floating stops, with the cleared element again appearing beneath the floating element. Floating can be specifically cleared on the left, right, or completely cleared on both sides.
Values: none | left | right | both | inherit
Width and height properties allow you to specify the dimensions of the content area of the box. Padding and border are then added to this to create the apparent width and height of the box, which is how much space it will take up in the design.
width. Sets the horizontal length of the content area of the box.
Values: <length> | <percentage-parent-width>% | auto | inherit
height. Sets the vertical length of the content area of the box.
Values: <length> | <percentage-parent-height> | auto | inherit
overflow. Specifies how to treat excess content if the specified area for the box is not large enough to accommodate it. You can choose to hide the excess content, show the content, thus overriding the height value, force a scroll, or allow the browser to determine whether a scroll is needed or not (auto).
Values: hidden | visible | scroll | auto | inherit
One of the key differences between designing for the Web and designing for other media, such as print or TV, is that the user controls the size of the browser viewport—the area in which your designs are viewed in—and can change the width and height at will. Instead of setting an absolute width and height, you also have the option of setting a width and height range to allow the content to stretch to fit the viewport area, while still not allowing it to shrink or grow to uncomfortable dimensions.
It is important to note that these properties do not work in IE6, so an absolute width and height should be set first to accommodate that browser.
max-width, max-height. Sets the maximum width or height of an element. The element will grow to that size if the area is available, but no further.
Values: <length> | <percentage-parent-width/height> | auto | inherit
min-width, min-height. Sets the minimum width or height of an element. The element will shrink to that size when the area is limited, but no further.
Values: <length> | <percentage-parent-width/height> | auto | inherit
An element’s border is the rule around its box on the top, right, bottom, and left. A border can have any thickness and color, and you can select from a limited number of styles. Set the border on all four sides to be the same, or set each side individually.
border. The shorthand property for setting all of the border properties for the box in one line, with values separated by a space. All three values must be declared in order for the border to appear.
Values: <border-width> <border-color> <border-style>
border-width. Sets the thickness of the border.
Values: <length> | thin | medium | thick | inherit
Multiple Values: One value for all four sides, two values separated by a space for top/bottom and left/right, or four values separated by spaces for top, right, bottom, and left, in that order.
border-color. Sets the hue of the border.
Values: <color> | transparent | inherit
Multiple Values: Same as border-width.
border-style. Sets one of the predefined border patterns.
Values: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Multiple Values: Same as border-width.
border-top, border-right, border-bottom, border-left. The shorthand properties for setting the border properties on the indicated side of the box.
Values: <border-width> <border-color> <border-style>
border-width-top, border-width-right, border-width-bottom, border-width-left, border-style-top, border-style-right, border-style-bottom, border-style-left, border-color-top, border-color-right, border-color-bottom, border-color-left. Sets the indicated property for the indicated side of the box.
Values: Varies depending on property.
Padding is the space between the content of the element’s box and the border. Padding is easily confused with the margin, especially if there is no visible border. Padding, however, is intended to separate the content of the box from its edges, whereas the margin is meant to separate the element from other elements on the screen.
padding. The shorthand property for setting the padding on all four sides of the box simultaneously.
Values: <length> | <percentage-box-width>% | inherit
Multiple Values: One value for all four sides, two values separated by a space for top/bottom and left/right, or four values separated by spaces for top, right, bottom, and left, in that order.
padding-top. Sets the space between the content and the top of the box.
Values: <length> | <percentage-box-width>% | inherit
padding-right. Sets the space between the content and the right side of the box.
Values: <length> | <percentage-box-width>% | inherit
padding-bottom. Sets the space between the content and the bottom of the box.
Values: <length> | <percentage-box-width>% | inherit
padding-left. Sets the space between the content and the left side of the box.
Values: <length> | <percentage-box-width>% | inherit
The margin is the space between the border of an element and all other elements on the page. As mentioned, in the absence of a border or background, margin and padding will appear to be identical, but it is important to remember that they are different values. Margin should be used to adjust an element’s position in relationship to other elements on the page, while padding should be used to keep content from bumping up against the edge of the box.
margin. The shorthand property setting the margin on all four sides of the box simultaneously.
Values: <length> | <percentage-box-width>% | inherit
Multiple Values: One value for all four sides, two values separated by a space for top/bottom and left/right, or four values separated by spaces for top, right, bottom, and left in that order.
margin-top. Sets the space between the top of the box and the bottom of other elements.
Values: <length> | <percentage-box-width>% | inherit
margin-right. Sets the space between the right edge of the box and the left edge of other elements.
Values: <length> | <percentage-box-width>% | inherit
margin-bottom. Sets the space between the bottom of the box and the top of other elements.
Values: <length> | <percentage-box-width>% | inherit
margin-left. Sets the space between the left edge of the box and the right edge of other elements.
Values: <length> | <percentage-box-width>% | inherit
The CSS box model describes how an element should behave in your designs: The width and height are applied to the content area of the box, while padding and border lengths are added to get the apparent width and height, sometimes called the rendered width and height. At least, this is how the W3C CSS Work Group specified that the standard for the box model should work. Unfortunately, the folks who made IE6 didn’t get the memo in time. They decided that width and height applied to the entire box, including the margin and padding.
You are OK as long as you do not set the width/height with padding and a border. But, as soon as you add padding and borders, in IE6 your designs will look different from standards-compliant browsers, even IE7.
Fortunately for us, the makers of IE6 missed another memo. When a declaration in a CSS rule has an underscore (_) in front of it, ignore the declaration. The upshot is that we can set a different width and/or height that only IE6 will see as long as we put an underscore at the beginning.
Known as the “underscore hack,” this technique can be used anytime you need to provide a different value for IE6.
All element boxes can be positioned on the screen, either relative to their natural position (where they would appear if left untouched) or absolute distance from the edge of its most immediate parent element with positioning set. To set the position of the box on the screen, you need to set both its position type and then its actual position.
Think of setting the position type as turning on positioning. Until this is set, all elements have a “natural” position, which is where the element would appear if left untouched by positioning. To turn on positioning, you define how you want the element placed.
Note
Fixed elements are a great way to create headers, footers, and menus that stay on the screen at all times. Unfortunately, fixed does not work in IE6. The good news is that you can use the box model (shown in Appendix C, “Fixing IE6”) to set the position to absolute for that browser.
position. Defines the positioning type that the element’s box will use.
Values: static | relative | absolute | fixed | inherit
static. The element’s box cannot be repositioned from its natural position.
relative. The element’s box is positioned from where it would have natural position in the design.
absolute. The element’s box is positioned relative to the immediate parent with a position type set.
fixed. The element’s box is positioned relative to the browser window, and the element does not scroll with the rest of the page. Instead it stays fixed in its position.
inherit. The box inherits the position type from its most immediate parent with a position type set.
Setting the position type does not change an element’s position. It merely prepares the element for one of the positioning properties to be applied to it.
top. Moves the element down from its normal position (relative) or from the top edge of its parent element (absolute), or top of the Web page (fixed).
Values: auto | <length> | <percentage-parents-height>% | inherit
right. Moves the element to the left from its normal position (relative) or from the right edge of its parent element (absolute), or right edge of the Web page (fixed).
Values: auto | <length> | <percentage-parents-width> % | inherit
bottom. Moves the element up from its normal position (relative) or from the bottom edge of its parent element (absolute), or bottom of the Web page (fixed).
Values: auto | <length> | <percentage-parents-height>% | inherit
left. Moves the element to the right from its normal position (relative) or from the left edge of its parent element (absolute), or left of the Web page (fixed).
Values: auto | <length> | <percentage-parents-width>% | inherit
Once you start moving elements around, you may start stacking them in the Web page—one element appearing over top of or underneath another. By default the “natural” stacking order for elements (or z-index) is based on the order their code appears in the HTML. The first element has a z-index of 0 and its subsequent siblings increase their z-index by 1 (1, 2, 3, 4...) with higher numbers appearing above lower numbers. You can disrupt this natural order by changing the element’s z-index property.
z-index. Sets the 3-D position of the box. Since positioned elements can overlap one another, z-index allows you to re-stack them as desired within their parent element by setting the level number to the level you want the element to appear. Higher numbers appear higher in the stack.
Values: auto | <number> | inherit
Tables are used to present data. Any of the font, text, background, and box properties already mentioned can be applied to them. Tables have a few special styles, however, that can only be applied to the various table tags:
border-spacing: Sets the space between table data cells.
Values: <length> | inherit
Multiple Values: One value for all four sides, or two values separated by a space to set the top/bottom and left/right spacing separately.
border-collapse: Sets how borders between separate table data cells are treated. Use collapse to have borders between table data cells shared. Use separate to treat each table data cell as having independent borders.
Values: collapse | separate | inherit
caption-side: Sets where a table caption appears, either above or below the table. Caption side does not work in IE6 or IE7, but will work in IE8, so you should consider this a design enhancement.
Values: top | bottom | inherit
Lists are used for a variety of purposes in Web design, not the least of which is to actually create an ordered (<ol>) or unordered (<ul>) list of items. In addition, lists are often used to help organize links and menus, even if the actual list markers (bullets, letters, or numbers) are removed.
Although associated with particular HTML tags, any HTML tag can be used to create a list using these styles.
list-style. The shorthand property that lets you set all of the list properties listed below at the same time.
Values: inherit | <list-style-type> <list-style-image> <list-style-position>
list-style-type. Sets the marker style for the list.
Values: disc | circle | square | decimal | decimal-leading-zero | upper-roman | lower-roman | upper-alpha | lower-alpha | lower-greek | none | inherit
list-style-image. Sets an image file to be used as a marker. You can use PNG (8, 24, or 32), JPEG, or GIF image formats. This property is used much less than you might think. Most designers add graphic bullets to a list using the background-image property instead, using a technique called CSS sprites, which provides greater versatility.
Values: url( <url>) | none | inherit
Note
Learn about using CSS sprites in Chapter 10, “Navigation.”
list-style-position. Sets whether a list item’s subsequent lines of text are indented (outside) or justified (inside).
Values: inside | outside | inherit
The mouse pointer provides visual feedback to the user when they interact with a given element. The cursor will automatically change for some elements such as links and form elements, but you can control how the cursor appears over any element using the dynamic pseudo-classes :hover, :active, and :focus.
Note
The dynamic pseudo-classes are explained in Chapter 4, “Syntax,” in the section “Styles for Special Cases.”
cursor. Sets the appearance of a cursor. You can choose from the predefined list of cursors or specify a URL to load a PNG (8, 24, or 32), JPEG, or GIF image as your cursor.
Values: default | url(<url>) | auto | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | inherit
There are a few properties on the cutting edge of CSS design that haven’t been officially set as standards. While they may not be ready for prime time quite yet, because they may not be universally implemented, you can still use them to enhance your designs for those browsers that do use them.
Design enhancements should never be critical to your design or site functionality. Whether they work or not in a given browser should not prevent the visitor from using the site. The site just may not look quite as slick. In addition to the values, I’m listing which browsers each style works with. Keep in mind, though, that new versions are always coming out, so check out the Speaking In Styles Web site (www.speaking-in-styles.com) for up-to-date information.
text-shadow. Sets a drop shadow for text in an element. You can control the color, offset, and the amount of blur to get different shadow effects.
Browsers: Sa1.1
Values: <color> <length-x-offset> <length-y-off set> <length-blur-radius>
box-shadow, -moz-box-shadow, -webkit-box-shadow. Sets a drop shadow for the box. You can control the color, offset, and the amount of blur to get different shadow effects. Although eventually the property will be called box-shadow, Firefox and Safari have implemented their own version: -moz and -webkit. Include all three to ensure cross-browser compatibility.
Browsers: Sa3, FF3
Values: <color> <length-x-offset> <length-y-off set> <length-blur-radius>
border-radius, -moz-border-radius, -webkit-border-radius. Sets the roundness of box corners. Although eventually the property will be called simply border-radius, Firefox and Safari have implemented their own version: -moz and -webkit. For now, include all three to ensure cross-browser compatibility.
Values: <length> | inherit
Browsers: Sa2, FF1.8, Op9, IE7
The outline property creates a border around the box, similarly to the border property. Unlike a border, though, an outline cannot be controlled on a per-side basis and, most importantly, does not occupy any space. It will simply appear beneath any adjacent elements without disrupting the layout of the page.
outline. The shorthand property that lets you set all of the outline attributes in one line, with values separated by a space.
Values: <outline-width> <outline-color> <outline-style>
outline-width. Sets the thickness of the outline.
Values: <length> | thin | medium | thick | inherit
outline-color. Sets the hue of the outline.
Values: <color> | invert | inherit
outline-style. Sets one of the predefined outline patterns, which are the same as the border patterns.
