CSS REFERENCEInternet Explorer 5.x for Windows gets the box model wrong, placing padding andborders inside the defined dimensions of an element. The bug is explained inChapter 9, which also offers workarounds to fix layouts that get broken in agingversions of Microsoft’s browser.Common CSS values D In addition to the values listed in the following table, a property may have a value of 473 inherit, whereupon it takes the same value as its parent. Some properties are inherited by default—see the CSS properties and values table for more information.Value Formatscolorlength Color name. See Appendix B (Color Reference) for information on available CSS color names.numberpercentage rgb(n,n,n): Where n is a value from 0 to 255 or a percentage.url #rrggbb: Hexadecimal color format (preferred). An optional sign (+ or -), followed by a number and one of the fol- lowing units (there should be no whitespace between the number and unit): %: A percentage. cm: Centimeters. em: One em is equal to the font size of the parent or current element (see following focus point for elaboration). ex: One ex is, in theory, equal to the font size of the x character of the current element. Most browsers render ex as half an em. in: Inches. mm: Millimeters. pc: Picas. 1pc = 12pt. pt: Points. 1pt = 1/72in. px: Pixels. For zero values, the unit identifier may be omitted. Generally, px, em, and % are the best units for screen design, and pt is best for print fonts. An optional sign (+ or -) followed by a number. An optional sign (+ or -) followed by a number, immediately followed by the percentage symbol. The word url immediately followed by parentheses, within which is placed a URL. The URL can optionally be enclosed in single or double quotes.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN When setting element dimensions (width, height, margins, etc.), one em is equal to the font size of that element. However, when setting font sizes for an element, one em is equal to the font size of its parent element. In both cases, this is measured relative to the dimensions of the M character. CSS properties and values In the tables within this section, default values are listed in bold and shorthand properties are shaded in gray. A number of tables online list browser compatibility with regard to CSS. Some good examples of these and related resources can be found at the following URLs: www.westciv.com/style_master/academy/browser_support/index.html: CSS sup- port for most browsers www.webdevout.net/browser-support-css: CSS support for Internet Explorer, Firefox, and Opera www.quirksmode.org/css/contents.html: Concentrates on quirks www.macedition.com/cb/resources/macbrowsercsssupport.html: CSS2 support in old Mac browsers—note: not updated since 2004 www.macedition.com/cb/resources/abridgedcsssupport.html: CSS2 support chart for old browsers—note: not updated since 2004 www.css3.info/selectors-test/: Live CSS3 support testing of your browser http://devedge-temp.mozilla.org/toolbox/sidebars/: Useful sidebar reference tools for Gecko browser users Remember that such charts are guides only, are sometimes out of date, and should not be considered a replacement for thorough testing in a range of web browsers. To inherit a parent element’s style for a property, use the value inherit. To raise a prop- erty’s weight in the cascade, use !important. Important declarations override all others. p {color: red !important;} Add comments to CSS files as follows: /* This is a comment in CSS */ /* This is a single-line comment */474
CSS REFERENCEProperty Values Description Inherited Nobackground Shorthand for defining background property values in a single declaration. D Values can be any of those from background-attachment, background- No color, background-image, background- No position, and background-repeat, in any No order. Example: No background: #ffffff ¯ url(background.gif) fixed left Continued ¯ repeat-y; 475 See also Chapter 2, “Web page backgrounds in CSS” and “CSS shorthand for web backgrounds.”background-attachment scroll | fixed Determines whether a background image is fixed or scrolls with the page. See also Chapter 2, “background- attachment.”background-color transparent | Defines an element’s background color.background-image color See also Chapter 2, “background-color.” none | url Sets an element’s background image. Example: background-image: ¯ url(background_image.jpg); See also Chapter 2, “background-image.”background-position length | Defines the initial position of the percentage | top | background image. Defaults to 0,0. Values center | bottom | are usually paired: x,y. Combinations of left | right keyword, length, and percentage are permitted, although combining keywords with either length or percentages is buggy in some browsers. If only one keyword is provided, the other defaults to center. If only one length or percentage is given, it sets the horizontal position, and the vertical position defaults to 50%. See also Chapter 2, “background-position.”
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedbackground-repeat No repeat | Defines how the background image tiles.border repeat-x | See also Chapter 2, “background-repeat.” No repeat-y |border-bottom no-repeat Shorthand for defining border property Noborder-bottom-color values in a single declaration. Values can Noborder-bottom-style be any of those from border-width, Noborder-bottom-width border-style, and border-color. Noborder-collapse Borders are drawn on top of a box’s Yes background. Example:border-color Noborder-left border: 1px solid #000000; Noborder-left-color Noborder-left-style See also Chapter 4, “Applying CSS borders Noborder-left-width to images,” and Chapter 6, “Styling a No table.” Shorthand for defining bottom border property values (see border). color | transparent Sets the bottom border color. (See border-style.) Sets the bottom border style. (See border-width.) Sets the bottom border width. collapse | separate Defines a table’s border model. In the separate border model, which is the default, each table cell has its own distinct borders, but in the collapsed border model, adjacent table cells share borders. See also Chapter 6, “Adding borders to tables.” color | transparent Defines the element’s border color. Defaults to the element’s color. Shorthand for defining left border property values (see border). color | transparent Sets the left border color. (See border-style.) Sets the left border style. (See border-width.) Sets the left border width.476
CSS REFERENCEProperty Values Description Inheritedborder-right Noborder-right-color Shorthand for defining right border Noborder-right-style property values (see border). Noborder-right-width Noborder-spacing color | transparent Sets the right border color. Yesborder-style (See border-style.) Sets the right border style. Dborder-top (See border-width.) Sets the right border width. Noborder-top-colorborder-top-style length length Defines the distance between borders or Noborder-top-width adjacent table cells when using the Noborder-width separated borders model. (See No border-collapse.) If a single length is No given, it’s used for horizontal and vertical No values; if two lengths are provided, the first is used for the horizontal spacing Continued and the second for the vertical spacing. Negative values are not permitted. 477 dashed | dotted | Sets the style of an element’s borders. double | groove | Can work as shorthand, with one style per inset | none | edge, from the top clockwise. Example: outset | ridge | solid border-style: solid dashed dotted ¯ groove; Not all styles are supported in all browsers. Notably, Internet Explorer 5 and 6 render dotted as dashed when a border is 1 pixel in width. Shorthand for defining top border property values (see border). color | transparent Sets the top border color. (See border-style.) Sets the top border style. (See border-width.) Sets the top border width. length | medium | Sets the width of an element’s borders. thick | thin Can work as shorthand: border-width: 1px 2px 3px 4px; See also Chapter 4, “Applying CSS borders to images.”
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedbottom auto | length | No percentage Determines the vertical offset of thecaption-side element’s bottom edge from the bottom Yesclear bottom | top edge of its parent element if the parent is No both | left | positioned; if not, then offset isclip none | right determined from the first positioned No ancestor. Must be used with a position auto | (shape) value of relative, absolute, or fixed. Specifies the position of table caption elements with relation to the table element box. Moves the element down until its margins are clear of floated elements to its left, right, or both sides. (See the float entry.) See also Chapter 7, “Placing columns within wrappers and clearing floated content.” Creates a clipping area for an absolute positioned element to determine the visible area. As of CSS 2.1, the only available shape is rect. Example: clip: rect(5px, 60px, 15px, 20px); As per the preceding code block, dimensions are stated as a comma- separated list, and percentage lengths are not permitted. The dimensions are, as per typical CSS shorthand, in the following order: top, right, bottom, left. The top and bottom values specify offsets from the top border edge of the box. The left and right measurements specify offsets from the left border edge of the box in left-to-right text and from the right border edge of the box in right-to-left text. The defined region clips out any aspect of the element that falls outside the clipping region. The preceding example creates a window 40 pixels wide and 10 pixels high, through which the content of the clipped element is visible. Everything else is hidden. See also www.w3.org/TR/CSS21/visufx. html#propdef-clip.478
CSS REFERENCEProperty Values Description Inheritedcolor Yescontent color Sets an element’s foreground color (i.e., No the color of the text).counter-increment D normal | (string) Generates content to attach before or aftercounter-reset | url | a CSS selector, using the :before and Nocursor counter(name) | :after pseudo-elements. Example: counter(name, No list-style-type) #users h2:before { Yes | counters(name, content: \"Username: \"; string) | display: inline; Continued counters(name, } string, list- 479 style-type) | See also Chapter 7, “Placing columns within open-quote | wrappers and clearing floated content.” close-quote | no- open-quote | no- close-quote | attr(X) none | Increments a counter when the current identifier number selector is encountered. The identifier defines the selector, ID, or class that is to be incremented; the optional number defines the increment amount. Used in conjunction with content. Browser support for this property is poor. none | Defines a new value for the specified identifier number counter whenever the current selector is encountered. auto | crosshair | Defines the cursor type to be displayed. default | help | Can be a comma-separated list. Cursors pointer | move | vary by system, so use this property with progress | text | care. Also, if using custom cursors via the wait | n-resize | url value, include a generic cursor at the ne-resize | end of the list, in case of compatibility e-resize | problems. se-resize | s-resize | Note: Internet Explorer 5.x for Windows sw-resize | does not recognize pointer, the correct nw-resize | CSS value for displaying a hand-shaped w-resize | url cursor. Instead, it uses the nonstandard value hand, which can be applied using a style sheet attached via a conditional comment.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Property Values Description Inherited direction Yes display ltr | rtl Sets the direction of text flow. No empty-cells ltr: Left to right. Yes float rtl: Right to left. No font Yes block | inline | States how an element is displayed on the480 list-item | page. The most common values are none, none | run-in | block, and inline, which all happen to be inline-block | well supported. table | inline-table | See several of the exercises in Chapters 5 table-caption | and 7 for more on this property. table-cell | table-column | table-column- group | table- footer-group | table-header- group | table-row | table-row- group | table-row hide | show Determines whether empty table cell borders show when using the separated borders model. (See border-collapse.) left | none | right Defines whether an element floats left or right (allowing other content to wrap around it) or displays inline (by using the none value). See also Chapter 7, “The float property.” Shorthand for defining font properties in a single declaration. Values can include any or all of the following: font-style, font-variant, font-weight, font-size, line-height, and font-family. Any omitted values revert to default settings, but font-size and font-family are mandatory. If font-style, font-weight, and font-variant values are included, they should appear at the start of the rule, prior to the font-size value.
CSS REFERENCEProperty Values Description Inheritedfont (continued) Yes When using line-height, you mustfont-family combine it with the font-size property Yes using the syntax font-size/line-heightfont-size (e.g., 12px/18px). Examples (using selected Yes values): Continued font: bold 12px/16px Verdana, ¯ sans-serif; font: 85%/1.3em Georgia, serif; See also Chapter 3, “Styling text using CSS” D and “CSS shorthand for font properties.” Additional values for the font property are also available: caption, icon, menu, message-box, small-caption, status-bar. These set the font to system fonts, or the nearest equivalent, and are not available via font-family. However, these values are rarely, if ever, used. (family name) | Defines the font family of an element. (generic family) Takes the form of a prioritized comma- separated list, which should terminate in a generic family name (cursive, fantasy, monospace, serif, or sans-serif). Multiple-word font-family names must be quoted (e.g., \"Times New Roman\"). Readers used to American typographical conventions should take care not to put commas inside the closing quotes. Example: font-family: Georgia, \"Times New ¯ Roman\", serif; See also Chapter 3, “Defining fonts.” xx-small | Sets the size of a font. x-small | small | medium | large | See also Chapter 3, “Defining font size and x-large | xx- line height.” large | smaller | larger | length | percentage 481
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedfont-style Yesfont-variant italic | normal | Sets the font’s style. Yesfont-weight oblique Yes See also Chapter 3, “Defining font-style,height font-weight, and font-variant.” Noleft No normal | Sets the font to display in small caps.letter-spacing small-caps Yes See also Chapter 3, “Defining font-style, font-weight, and font-variant.” lighter | normal Sets the font weight. | bold | bolder | number* * When using a number, it must be a multiple of 100 between 100 and 900 inclusive. The value 700 is considered equivalent to bold, and 400 is synonymous with normal. In practice, numbers are supported inconsistently and poorly in browsers. See also Chapter 3, “Defining font-style, font-weight, and font-variant.” auto | length | Sets the content height of an element. percentage Determines the horizontal offset of the auto | length | element’s left edge from the left edge of percentage its parent element if the parent is positioned; if not, then offset is determined from the first positioned ancestor. Must be used with a position value of relative, absolute, or fixed. See also the Chapter 7 exercise, “Using absolute positioning to center a box onscreen.” length | normal Amends kerning (i.e., the space between characters). Positive and negative values are permitted. Relative values are determined once and then inherited. See also Chapter 3, “Setting letter-spacing and word-spacing.”482
CSS REFERENCEProperty Values Description Inherited Dline-height normal | length | Yes number | Controls the element’s leading. When thelist-style percentage line-height value is larger than the Yes font-size value, the difference (which islist-style-image none | url the leading) is halved, and this new value Yeslist-style-position inside | outside is applied to the top and bottom of the Yeslist-style-type element’s inline box. Yes none | disc | circle | square | See also Chapter 3, “Setting line height.” Continued decimal | decimal-leading- Shorthand for defining list properties in a zero | lower- single declaration. Values can be those from alpha | upper- list-style-type, list-style-position, alpha | lower- and list-style-image. greek | lower- latin | upper- See also Chapter 3, “Styling lists with CSS” latin | lower- and “List style shorthand.” roman | upper- roman | armenian Defines an image for list bullet points. | georgian Determines whether the bullet point appears as the first character of the list item content (inside) or in default fashion (outside). Sets the bullet point style. If a browser doesn’t understand an ordered list value, it defaults to decimal. Generally, none, circle, square, decimal, and the alpha and roman values are best supported. The W3C recommends using decimal for ordered lists whenever possible. 483
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedmargin No auto | length | Shorthand for defining margin propertiesmargin-bottom percentage in a single declaration. Examples: Nomargin-left margin: 0; (sets all margins to 0) Nomargin-right auto | length | margin: 0 10px 20px 30px; (sets Nomargin-top percentage individual margins for each edge) Nomax-height No auto | length | See also Chapter 2, “Content margins and percentage padding in CSS” and “Working with CSS shorthand for boxes.” auto | length | percentage Sets the bottom margin. Defaults to 0. Note that browsers usually override the none | length | zero value by applying default margins to percentage most block elements. Set margins explicitly to 0 to cancel the browser’s default. See Chapter 2, “Zeroing margins and padding on all elements.” Sets the left margin. Defaults to 0. Note that browsers usually override the zero value by applying default margins to most block elements. Set margins explicitly to 0 to cancel the browser’s default. See Chapter 2, “Zeroing margins and padding on all elements.” Sets the right margin. Defaults to 0. Note that browsers usually override the zero value by applying default margins to most block elements. Set margins explicitly to 0 to cancel the browser’s default. See Chapter 2, “Zeroing margins and padding on all elements.” Sets the top margin. Defaults to 0. Note that browsers usually override the zero value by applying default margins to most block elements. Set margins explicitly to 0 to cancel the browser’s default. See Chapter 2, “Zeroing margins and padding on all elements.” Sets the maximum height of an element. Does not apply to table elements.484
CSS REFERENCEProperty Values Description Inheritedmax-width Nomin-height none | length | Sets the maximum width of an element.min-width percentage Does not apply to table elements. Noorphans Nooutline See also the Chapter 7 exercise, “Creating a Yes maximum-width layout.”outline-color Nooutline-style none | length | Sets the minimum height of an element.outline-width percentage Does not apply to table elements. No No none | length | Sets the minimum width of an element. D percentage Does not apply to table elements. No Continued number Defines the number of lines of a paragraph that must be left at the bottom of a page when printing. Defaults to 2. Defined number must be an integer. Very poorly supported. Shorthand for defining outline properties in a single declaration. Outlines are rendered outside the border edge and do not affect document flow. Example: .highlight { outline: 1px dotted #ff0000; } Not supported by Internet Explorer up to and including version 7. color | invert Sets the color of an outline. Defaults to invert, which inverts the color of the pixels onscreen, ensuring the outline is visible. dashed | dotted | Sets the style of an outline. double | groove | inset | none | outset | ridge | solid length | medium | Sets the width of an outline. thick | thin 485
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedoverflow No auto | hidden | Determines what happens when content ispadding scroll | visible too large for the defined dimensions of No the element.padding-bottom Nopadding-left auto: If content is clipped, the browser Nopadding-right displays a scroll bar. Nopadding-top hidden: Content is clipped, and content Nopage-break-after outside the element’s box is not visible. Nopage-break-before scroll: Content is clipped, but a scroll Nopage-break-inside bar is made available. Yes visible: Content is not clipped and may be rendered outside of the element’s containing box. See also Chapter 7, “Scrollable content areas with CSS.” Shorthand to define padding properties in a single declaration. Examples: padding: 0; (sets padding on all sides to 0) padding: 0 10px 20px 30px; (sets individual padding for each edge) See also Chapter 2, “Content margins and padding in CSS” and “Working with CSS shorthand for boxes.” length | percentage Sets the bottom padding of an element. length | percentage Sets the left padding of an element. length | percentage Sets the right padding of an element. length | percentage Sets the top padding of an element. auto | always | Determines whether a page break should avoid | left | appear after the element when printing. right Poorly supported. auto | always | Determines whether a page break should avoid | left | appear before the element when printing. right Poorly supported. auto | avoid Determines whether a page break should appear inside the element when printing. Poorly supported.486
CSS REFERENCEProperty Values Description Inheritedposition No absolute | fixed | Determines the positioning method used Dquotes relative | static to render the element’s box: Yesright Notable-layout absolute: Element is placed in a specific No location outside of normal document flow, Continued using the top, right, bottom, and left properties. fixed: As per absolute, but the element remains stationary when the screen scrolls. Poorly supported by some browsers. relative: Offset from the static position by the values set using top, right, bottom, and left properties. static: The default. The top, right, bottom, and left properties do not affect the element if this value is set. The element is not removed from the document’s normal flow. none | string Various examples of this property in use string are found in Chapters 5 and 7. Determines the type of quote marks to be used for embedded quotations. The string contains paired quoted values, which determine each level of quote embedding. The default depends on the user agent (browser). auto | length | Determines the horizontal offset of the percentage element’s right edge from the right edge of its parent element if the parent is positioned; if not, then offset is determined from the first positioned ancestor. Must be used with a position value of relative, absolute, or fixed. auto | fixed Controls the layout algorithm used to render tables. Using fixed, table columns are based on analysis of the first row and rendered accordingly. This can speed up processing time, but may lead to columns that are too narrow for subsequently downloaded content. 487
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedtext-align Yes center | justify | Sets the text alignment for an element.text-decoration left* | right No * The default is left in left-to-righttext-indent languages and right in right-to-left Yestext-transform languages such as Arabic, Hebrew, and Yestop Urdu. Should be used instead of the HTML No align attribute. blink | line- Adds decoration to text. Values may be through | none | combined in a space-separated list, and overline | the default depends on the element in underline question. Note that browsers may ignore blink but still be considered compliant. Examples: text-decoration: underline; text decoration: underline ¯ line-through; See also Chapter 5, “Editing link styles using CSS.” length | percentage Sets the horizontal indent of an element’s first line of text. Defaults to 0. capitalize | Sets the case of an element’s text. lowercase | none | uppercase See also Chapter 3, “Controlling case with text-transform.” auto | length | Determines the vertical offset of the percentage element’s top edge from the top edge of its parent element if the parent is positioned; if not, then offset is determined from the first positioned ancestor. Must be used with a position value of relative, absolute, or fixed. See also the Chapter 7 exercise, “Using absolute positioning to center a box onscreen.”488
CSS REFERENCEProperty Values Description Inheritedunicode-bidi No bidi-override | Enables overrides for text direction. Thevertical-align embed | normal embed value forces text to be displayed Novisibility with regard to the associated direction Yeswhite-space property. The bidi-override value also Yeswidows overrides the default Unicode ordering Yes scheme. Continued This is a complex subject concerned with D inserting elements of right-to-left text in blocks of left-to-right text (such as embedding Arabic or Hebrew in English, or vice versa). For details about working with bidirectional text, see www.w3.org/ International/resource-index. html#bidi. length | Determines the vertical alignment of an percentage | element. Applies to inline elements and baseline | those within table cells. Should be used in bottom | middle place of the HTML valign attribute. If a | top | sub | percentage value is used, that refers to the super | element’s line-height value. text-bottom | text-top collapse | hidden | Sets the visibility of an element. When visible hidden is used, the element box is invisible but still affects page layout (use display: none for an element to not affect document flow). When collapse is used, results are similar to hidden, except for spanned table cells, which may appear clipped. normal | nowrap | Determines how whitespace within an pre | pre-wrap | element is handled. Browser support for pre-line pre-line and pre-wrap is poor. number Defines the number of lines of a paragraph that must be left at the top of a page when printing. Defaults to 2. Defined number must be an integer. Very poorly supported. 489
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNProperty Values Description Inheritedwidth auto | length | Sets the content width of an element. Noword-spacing percentage length | normal Provides space between words in addition Yesz-index to the default settings. No auto | number See also Chapter 3, “Setting letter-spacing and word-spacing.” Changes an element’s position in the stack. Higher numbers are “closer” and lower numbers are “further away.” Negative values are permitted, but will result in content not being displayed in some browsers. Basic selectors This section outlines the most commonly used selectors, along with their syntax. Note that selectors for pseudo-classes and pseudo-elements are covered in the following two sec- tions, rather than being duplicated. Some selectors are not fully supported in all browsers. Notably, child and adjacent selectors are not supported by versions of Internet Explorer prior to 7. See www. webdevout.net/browser-support-css for an overview of basic selector support. Selector type Syntax Description Universal * Matches any element. Can be used in context to attach a rule to all elements within Type element another element (e.g., #sidebar *). Class .value ID #value Matches any element of type element. For example: h1. Matches an element with a class value of value. Matches an element with an id value of value.490
CSS REFERENCESelector type Syntax DescriptionDescendant element descendant Matches a descendant element that is aChild descendant of the element of type element. For example, div p targets paragraphs thatAdjacent are descendants of div elements. element>child Matches an element that is a child of another element. Similar to but more precise than descendant selectors, rules are applied to D elements that are direct children of the par- ent only. For example, div p matches all paragraphs within all divs. div>p only matches paragraphs that are direct children of divs, and so would not match a paragraph within a table within a div. element1+element2 Matches element2, adjacent to element1. For example, h1+h2 matches any h2 element that directly follows an h1 element within the web page, with no other elements in between.Attribute element[attribute] Matches an element of type element that has an attribute of type attribute. Further clarification can be added via the syntax element[attribute=\"value\"] (targets element with attribute with value equal to value), element[attribute~=\"value\"] (tar- gets element with attribute that has a list of space-separated values, of which one is equal to value), element[lang=value] (targets element with a lang attribute equal to value). Note that the word element in the preceding table refers to a general element on the web page, rather than a de facto HTML element.Pseudo-classes Pseudo-classes initially provided additional styles relating to a selector’s state, but now also include those that apply styles to conceptual document components. 491
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGNPseudo-class Description:active The state when an element is active (e.g., when a link is being clicked):first-child:focus Affects the first descendant of an element:hover:lang The state when an element is focused to accept keyboard input:link The state when the pointer is over an element:visited Applies to elements with the specified language (defined using xml:lang) Applies to an unvisited link Applies to a visited linkPseudo-elements Pseudo-elements enable generated content that’s not in the document source and the styling of conceptual document components.Pseudo-element Description:after Used in conjunction with content to generate content after an ele- ment. For example: h1:after {content: url(bleep.wav);}:before Used in conjunction with content to generate content before an element.:first-letter Styles the first letter of an element.:first-line Styles the first rendered line of a “block-level” element. CSS boilerplates and management By using CSS comments and a monospace font when editing CSS, it’s possible to create clear sections within the style sheet and a table of contents, enabling you to more easily manage rules. A full example is available in the advanced-boilerplates folder of the download files. An example of a table of contents is shown following:492
CSS REFERENCE/*STYLE SHEET FOR [WEB SITE]Created by [AUTHOR NAME][URL OF AUTHOR]ToC 1. defaults D 2. structure 3. links and navigation 4. fonts 5. images 6. tables 7. formsNotes */An example of a section of a boilerplate is shown following, with empty rules waiting to befilled. Here, a single tab is represented by eight spaces. Note how the property/value pairsand closing curly quotes are indented equally. This makes it easier to scan the far-left sideof the document for selectors. /* ---------- 4. fonts ---------- */html { font-size: 100%; }body { font-size: 62.5%; }h1, h2, h3, h4, p, ul { }h1 { }h2 { }h3 { }h4 { } 493
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN p{ } ul { } The use of the CSS comment to introduce the section, with a string of hyphens before and after the section name, provides a useful visual separator for when directly editing code. Subsections are best added by indenting them the same amount as the property/value pairs; rule-specific comments are best placed after the opening curly quote; pair-specific comments are best placed after the pair. See the following for examples. Sub-section introduction: /* --- sidebar headings --- */ #sidebar h2 { } #sidebar h3 { } Rule-specific comment: .boxoutProducts {/* used on sales and purchase pages */ } Pair-specific comment: body.advert h2 { font-size: 1.5em; text-transform: uppercase; /* over-ride for ad pages only */ } Note that the indents in this section are different from those shown elsewhere in this book. This is intentional, in order to provide a close match to the code in the actual style sheet, rather than something that works better on the printed page. Modular style sheets From a management perspective, I find it easiest to work with a single style sheet, albeit one that already has a number of elements prewritten. However, you can also work in a modular manner, creating a number of small boilerplate documents (e.g., to reset margins and padding and define font size defaults) and area-specific style sheets (for navigation, layout, forms, etc.), and then importing them into your CSS via an @import line. As an example, you could save the clearFix rule (shown following, and used in various exercises throughout the book, notably in Chapter 7’s “Clearing floated content” exercise) in its own style sheet as clearfix.css.494
CSS REFERENCE .clearFix:after { D content: \".\"; display: block; height: 0; clear: both; visibility: hidden; }This could then be imported into your main style sheet as follows: @import url(clearfix.css);You can import as many style sheets as you want, depending on how modular you want tobe, and how you want to organize your CSS. For example, at the time of writing, thisbook’s technical editor, David Anderson, imports all of his CSS, using eight @import lines todo so, and separating out his CSS into categories such as “generic,” “navigation,” and“forms”. How you decide to work is up to you. 495
E BROWSER GUIDEThis appendix provides a brief overview of the mainstream browsers ingeneral use at the time of writing, including a little history about them,estimated market share, and how standards-compliant they are (along withwhether they pass the Web Standards Project Acid2 Browser Test, atwww.webstandards.org/action/acid2/). Note that new versions of browsers areregularly released, so this section is intended only as a guide. Details areaccurate as of October 2007.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Firefox Full name: Mozilla Firefox. Initial year of release: 2004 (as 1.0). OS: Windows, Mac OS X, Linux (unofficial ports to various other systems exist). Website: www.mozilla.com/firefox/. Market share estimate: 10–15%. Trend: Steady growth. Engine: Gecko. Compliance: High. Firefox makes an excellent base for development, although as of 2.0, it fails a few advanced elements of the Acid2 Browser Test. Comments: Initially devised as an unofficial branch of the Mozilla project, Firefox’s aim was to be a compact, speedy browser, devoid of the feature-creep evident in its parent. Initially innovative, bringing tabbed browsing and incremental find (find- as-you-type) functionality to the masses, Firefox’s market share rapidly grew as standards-aware websites formed an aggressive switch marketing campaign, designed to tear complacent users away from Internet Explorer. Should you work with Firefox, I highly recommend you install Chris Pederick’s Web Developer tool- bar, available from www.chrispederick.com/work/web-developer/. Internet Explorer Full name: Windows Internet Explorer. Initial year of release: 1995. OS: Microsoft Windows. Website: www.microsoft.com/ie. Market share estimate: Around 80%. (This figure is combined, split more or less evenly between Internet Explorer 7 and Internet Explorer 6, with a low and dimin- ishing number of users running version 5.x.) Trend: Slow decline. Engine: Trident.498
BROWSER GUIDECompliance: Reasonable for version 7, although it dramatically fails Acid2. Poor forversion 6 and before, which require fixes for many advanced CSS properties andvalues.Comments: Despite being initially ignored, Microsoft’s Mosaic-derived browserbecame embroiled in the infamous browser wars of the late 1990s, regularly addingnew features and capabilities to eclipse rival Netscape Navigator. With the battlewon by 1999, Microsoft’s browser seemingly lapsed into a semicomatose state.Version 5’s standards support was dire (unlike the Mac version, which was latercanceled), and while version 6 was an improvement, it still lagged behind its rivals,including the then-new Firefox, resulting in its previously all-dominant marketshare (which rose to a high of around 95%) being hit hard for nearly two years. Inlate 2006, the final public release of version 7 appeared, with much-improved stan-dards support (although this aspect remains inferior to that of its rivals) and fea-tures available in rival browsers (such as tabbed browsing). A Microsoft-produceddeveloper toolbar is available for version 7 of Internet Explorer; it’s available fromwww.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en.Opera Full name: Opera. Initial year of release: 1996 (first public release). OS: Windows, Mac OS X, Mac OS, Linux, BeOS, Solaris, and others. Website: www.opera.com/. Market share estimate: Under 2%. Trend: Stable. Engine: Presto. Compliance: Excellent. Passes Acid2, making it an excellent alternative to Firefox for a development base. Comments: Starting life as a research project for a Norwegian telecom company, Opera has grown into a feature-packed, standards-compliant browser. Its innova- tive features—some of which are of direct benefit to developers—often lead its rivals, although the browser has been hampered over the years by a cluttered and superficially complex interface, and the browser for a long time identifying itself as Internet Explorer. Because of this, market share figures for Opera were—and indeed possibly still are—artificially low. However, in terms of reach, Opera has plenty of potential: there are versions of the browser for a massive range of systems, including for handheld devices. A developer toolbar is available from www.operawiki.info/WebDevToolbar. E 499
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Safari Full name: Safari. Initial year of release: 2003. OS: Mac OS X, Windows. Website: www.apple.com/safari/. Market share estimate: About 4%. Trend: Slow growth. Engine: KHTML. Compliance: Excellent, with reservations (see comments). Passes Acid2, making it suitable for a development base. Comments: Most likely developed as a reaction to Microsoft axing Internet Explorer for Mac, Safari rapidly became the primary browser for Mac users. Its clean interface complements the KHTML engine, which is one of the most compli- ant in existence. (Indeed, Safari was the first browser to pass Acid2.) Although initially available to Mac users only, June 2007 saw the first beta of Safari for Windows, primarily intended as an aid to Windows-based developers creating con- tent for Apple’s iPhone. Safari has some shortcomings regarding JavaScript support, and its method of anti-aliasing text is significantly different to other browsers. Prior to version 3, CSS borders and colors for form fields and buttons were ignored, the Mac OS Aqua equivalents instead being “forced.” Other browsers A number of other web browsers exist, although their market share is so minimal as to be considered all but insignificant. A possible exception to this is Linux-based Konqueror, although with its KHTML engine, you should expect similar results to those in Safari. Elsewhere, some browsers are based on Gecko (such as SeaMonkey/Mozilla and Flock), some on Trident (such as AOL Explorer/OpenRide), and one on both (Netscape Browser).500
F SOFTWARE GUIDEOpinions on the merit of software tools are usually pretty subjective. Thischapter isn’t supposed to be some kind of definitive guide on web designsoftware and each application’s pros and cons—instead, it aims to providean overview of the most popular solutions on the market, along with insightinto the tools I myself use on a daily basis.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Web design software Adobe Dreamweaver (www.adobe.com/products/dreamweaver/) is the market leader for web design software on both Windows and Mac platforms. Formerly a Macromedia prod- uct, the application joined the Adobe stable after Adobe acquired Macromedia in 2005. Dreamweaver’s position at the top of the pile is no accident: for several versions now, it has concentrated on standards-compliance and lean code, but has also provided a flexible interface that enables designers to take either a code-based or a layout-based approach to web page design and the creation of dynamic websites. Although the CS3 update was underwhelming, Dreamweaver remains the only WYSIWYG web design tool that I recom- mend to people with any enthusiasm. Adobe GoLive (www.adobe.com/products/golive/), formerly the Mac-only CyberStudio, was unceremoniously ousted from Adobe’s Creative Suite bundles once Dreamweaver CS3 arrived. Taking a more graphic-design approach, many of the tools in GoLive 9 are seem- ingly derived from Adobe’s desktop publishing application, InDesign. Although the appli- cation is fairly easy to use, it pales beside Dreamweaver when it comes to working with CSS-based sites and web standards, and using its control panel tends to result in unwieldy span-infested markup and a document littered with inline styles. Microsoft Expression Web (www.microsoft.com/products/expression/en/expression-web) arrived on the scene in very late 2006, and after the disaster that was Microsoft FrontPage, was a surprisingly strong effort from Microsoft. While weaker than Dreamweaver, it man- aged—at the time of release—to provide some CSS tools superior to Adobe’s application, and although its workflow is inferior to Dreamweaver’s, it’s a surprisingly capable and user- friendly application. Unfortunately, Microsoft Expression Web is hampered by a lack of support for PHP (it concentrates primarily on Microsoft-originated technologies) and the lack of a Mac OS X release. However, for Windows-based web designers only interested in static sites, and those who develop ASP.NET-based sites, it’s worth a look. Other applications in this area are more extreme in terms of working method than those discussed so far, either relying on a purely layout-based approach, or being based around hand-coding. An example of a purely layout-oriented application is the Mac-only Softpress Freeway (www.softpress.com/), which is even more geared toward print designers than GoLive and has an interface akin to QuarkXPress. Software geared toward hand-coding includes BBEdit (Mac OS X, www.barebones.com/), TextMate (Mac OS X, www.macromates. com/), HomeSite (Windows, www.adobe.com/products/homesite/), HTML Kit (Windows, www.chami.com/html-kit/), and TopStyle Pro (Windows, www.newsgator.com/Individuals/ TopStyle/Default.aspx).504
SOFTWARE GUIDEGraphic design software F Adobe Photoshop (www.adobe.com/products/photoshop/) is a Mac and Windows appli- cation that’s pretty much ubiquitous in the print design world. Immensely powerful and surprisingly user-friendly once you get to grips with the interface, more recent versions have provided a number of tools geared toward web designers, including a decent Save for Web function. Now part of the same suite as Dreamweaver, Photoshop integrates with the popular web design application, and if you can afford it, the application is pretty much unbeatable for bitmap editing. Adobe Photoshop Elements (www.adobe.com/products/photoshopel) is also available for Mac and Windows, and is a cut-down consumer-oriented version of Photoshop. Although not as feature-rich as its bigger brother, Elements nonetheless has enough useful tools to warrant purchase for any designer on a tight budget. Note that the Mac and Windows ver- sions of Elements are significantly different in terms of feature set, with the Mac version lacking a number of the extras from the Windows version (although many of those deal with asset organization, a task iPhoto can deal with on Mac OS X). Adobe Fireworks (www.adobe.com/products/fireworks/) is a Mac and Windows applica- tion formerly part of Macromedia’s suite of web design tools. Previously something of a web-focused rival to Photoshop, Adobe has repositioned Fireworks as a tool primarily aimed at rapidly working up mockups of websites. However, its tool set is such that it’s just as capable as Photoshop for working up entire layouts. (In fact, the vector tools within Fireworks are generally considered superior to Photoshop’s equivalents), and at a much lower cost. Corel Paint Shop Pro (www.corel.com/) is a Windows-only graphics editor, which has his- torically been seen as a low-budget alternative to Photoshop. Enabling users to edit both bitmap and vector graphics, previous versions of the application were well suited to web design, and its price point—significantly lower than Photoshop’s—made it a good choice for designers on a tight budget. More recent versions have seen the application focus rather more significantly on photo editing, however. GIMP (www.gimp.org/)—the GNU Image Manipulation Program—is the closest open source equivalent to Photoshop, and is available in various flavors for Linux, Windows, and Mac OS X (although the main Mac version requires X11 to run, with native ports being rather flaky by comparison). Primarily a bitmap editor, the application includes a surprising range of tools equivalent to those found in Adobe’s market-leading application, although it lacks strong color model support, and the omission of a free transform tool is a disap- pointment. Adobe Illustrator (www.adobe.com/products/illustrator/) is a Mac and Windows appli- cation for working with vector graphics. Although the majority of web graphics are bitmap-based, there’s nothing to stop you from using a vector-oriented application for crafting the initial design, and Illustrator’s tools prove flexible when creating sites with clean lines and large blocks of color. Usefully, the application has a modicum of tools for web publishing. 505
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The author’s toolbox I often get asked what hardware and software I use, so here is a quick list: Hardware: I use a Mac Pro, with lots of extra RAM and several hard drives for daily and weekly backups, along with a MacBook as a backup machine. I personally pre- fer Mac OS X over Windows, but with Intel Macs, the real advantage is being able to design on the Mac, test on Mac and Windows, and host stuff locally for testing on the built-in Apache server. Design software: I mostly use Adobe Photoshop for layout design, although Adobe Illustrator is wheeled out occasionally. Color Consultant Pro (www.code-line.com/ software/colorconsultantpro.html) assists with color schemes, while Color Oracle (http://colororacle.cartography.ch/) and Sim Daltonism (www.michelf. com/projects/sim-daltonism/) both enable me to check whether designs are usable for people who are color blind. Authoring software: This will likely come as no surprise if you’ve read this book, but I tend to favor a code-based approach to creating site templates. However, I don’t like wasting time, so applications that speed up code creation are a must. CSSEdit (www.macrabbit.com/cssedit/) is my weapon of choice for CSS, and it’s perhaps the best piece of shareware available for the Mac (worth the entry price just for its preview override function, which enables you to override a live site’s CSS with a local file). For code, I tend to flit between BBEdit and TextMate. For managing con- tent and sites, I sometimes use Dreamweaver, and for uploading everything, Panic’s Transmit (www.panic.com/transmit/) is unbeatable. Miscellaneous software: A few bits of shareware provide supporting roles when I’m working: ImageWell (www.xtralean.com/IWOverview.html) is handy for batch pro- cessing images without requiring you to open up Photoshop; Paparazzi (www. derailer.org/paparazzi/) makes it simple to take full-page grabs of any web- site—handy for the portfolio; Headdress (http://headdress.twinsparc.com/) makes virtual hosting a breeze, removing the need to muck about with config files; and SuperDuper (www.shirt-pocket.com/SuperDuper/) is essential for creating system clones, which suddenly become extremely important on those inevitable days when my main hard drive decides to keel over and die.506
INDEX
INDEX alternative (alt) text, 134–136, 163, 359 alternatives Numbers and symbols defining, 87–88 <!–– . . . ––> element, 404 for pull quotes, 105–106 # (hash sign), 175 analogous color scheme, 122 * (universal selector), 43, 375, 381, 389, 490 anchor elements, 150 2000 AD Books website, 272 angle brackets, 7 3-pixel text jog, 362 anti-aliasing, 76–77 <applet> element, 406–407 A archive=URL attribute, 406, 432 <area> element, 176, 407–408 <a> element, 404–405 Arial Black, 75 a img rule, 377, 385, 391 Arial font, 75 a selector, 157, 181 arrow characters, 466 a:link selector, 157 attribute selector, 490 <abbr> element, 69, 364, 405 attributes, 9, 254. See also specific attributes abbr=string attribute, 442 audience requirements, 4–5 abbreviations, 68–69 author tag, 38 absolute links, 151 authoring software, 506 absolute positioning, 269–272 axis attribute, 242, 440, 442 accept-charset=charset list attribute, 417 accept=content–type list attribute, 417 B accept=list attribute, 425 accessibility, 5, 11 <b> element, 409 background colors, 17, 46, 279, 475 alt text for, 134 background property, 103, 475 of collapsed content, 191–192 background-attachment property, 47, 475 of forms, 318–319 background-color property, 46, 475 of tables, 239–246 background-image property, 475 Accessibility layout option, in Opera, 351 background-position property, 48, 475 accesskey attribute, 163–164, 400, 417, 428 background-repeat property, 46, 475 <acronym> element, 406 backgrounds, 45–56, 294 acronyms, 68–69 action attribute, 328, 418 adding to CSS layouts, 265–268 :active pseudo-class, 491 busy, 131 active state, 155–156 in CSS, 46–49 additive color system, 121 drop shadows, 51–54 <address> element, 406, 409–411 faux column, 294–296 adjacent selectors, 86, 490 floated content and, 288–292 Adobe Dreamweaver, 504 ideas for, 49–56 Adobe Fireworks, 505 images, 46, 169–169 Adobe GoLive, 504 patterns, 50 Adobe Illustrator, 505–506 for skip navigation, 168–169 Adobe Photoshop, 505–506 watermarks, 55–56 Adobe Photoshop Elements, 505 backward compatibility, 34, 153 advanced-boilerplates folder, 18, 372 <base /> element, 409 :after pseudo-selector, 292, 491 baseline grids, 63, 97–98, 376 aliased text, 76 basic-boilerplates folder, 18, 372 align attribute, 406, 412, 413, 416, 440, 442, 444 BBEdit, 504, 506 alignment, table, 237–239 <bdo> element, 409 alink attribute, 155 be nice to Opera hack, 355 @allow_mail_to value, 327–328 :before pseudo-element, 491 alpha transparency, 129 Berners-Lee, Tim, 2 AlphaImageLoader filter, 364 <big> element, 67, 410 alt attribute, 134–136, 406, 424, 425 blink, 67 alternate styles, 87510
<blockquote> element, 68, 102, 104–106, 410 INDEXBMP format, 129, 131body class values, using to automate layouts, 304–306 Cbody copy Calibri font, 76 rendered as image, 77 calligraphy, 62 using graphics for, 130 Cambria font, 76<body> element, 42, 57, 350, 410 Candara font, 76body rule, 375, 381, 393 capitalization, 87body section, 42–45 <caption> element, 239, 244, 411 font and font color, 44 caption-side property, 478 margins and padding, 42–43 card suites, 466body selector, 81 cascade, 16–17, 160–162, 297body start tag, 44 Cascading Style Sheets (CSS), 3. See also CSS layoutsboilerplates advanced-boilerplates folder, 18, 372 adding to a page, 15–16 basic-boilerplates folder, 18, 372 advantages of, 64, 71 creating, 18–23 attaching external files, 38–39bold font, 67 backgrounds in, 46–49, 211–230Book Antiqua font, 75 boilerplates and management, 492–494border property, 136–138, 235–236, 243, 247, 476–477 borders, 136–138, 236, 247border-color property, 138, 476 box model, 17, 263–264, 355, 359, 472border=n attribute, 424, 439 cascade, 16–17, 160–162, 297borders, 17, 294 comments, 18–19, 58, 373, 493 applying to images, 136–138 common values, 473–474 for linked images, 170 creating boilerplates, 18–23 table, 235, 247–249 defining alternatives in, 87–88bottom property, 477 defining link states with, 156box models, 17, 263–264, 355, 359, 472 drop caps, 98–102boxes drop-down menus, 224–226 centering, 269–272 editing link styles with, 157–159 CSS shorthand for, 43–44 faking image maps with, 177–182 expanding, 362 font colors with, 71–72 for layout, 258–259 font properties in, 84–85 nesting, 272–277 font size, 79–83boxouts, 272–277, 293–297 fonts in, 71–85<br /> element, 410 for forms, 320–325breadcrumb navigation, 202–207 HTML and, 6browser guide, 498–500 image-replacement techniques, 78–79browser test suite, 351–354 images with, 136–143browsers inline lists, 202–207 font sizes and, 81 introduction to, 10–17 installing multiple versions of, 353–354 letter-spacing property, 86 quirks mode, 34 line height in, 79–83 support, for CSS, 10, 261 link styling with, 160–162 targeting other, 367–368 list navigation styling with, 196–200 testing in text mode, 351 list styling with, 108–112bullet point lists, 107 managing, 372–373, 494–494business website margins in, 85 creating, 387–391 navigation bar styling with, 200–201, 207–230 design and images for, 387 outdated methods for hacking, 355–356 styling, 389–391 for printable layouts, 392–396<button> element, 411 properties and values, 474–489 pseudo-classes, 491 pseudo-elements, 491 pull quotes, 98, 102–106 rules of, 11–12 511
INDEX codebase=URL attribute, 407, 432 codetype=MIME type attribute, 432 selectors, 12–15, 489–491 <col /> element, 412–413 separating content from design, 10–11 <colgroup> element, 413–414 table borders in, 247 collapsed content vs. table layouts, 260 text styling with, 71–106 accessibility of, 191–192 text wrapping images, 138–139 on navigation bars, 200–201 case sensitivity, of PHP, 330 script modularization, 192–194 case, of letters, 87 targets for scripts, 194–195 cell spacing, 235–236 collapsible div tags, 190–195 cellpadding attribute, 235, 439 Color Consultant Pro, 121 cellspacing attribute, 235, 439 Color Contrast Verification Tool, 349 CGI scripts color names, 449 editing, 327 Color Oracle, 506 for user feedback, 326–328 color property, 45, 64, 71–72, 478 cgi-bin directory, setting permissions for, 328 color reference, 448–449 character entities color schemes, 121–123 arrows, 466 color theory, 120–125 card suites, 466 color values, 448, 473 converting nonstandard Microsoft set, 466–468 Color Wheel Pro, 121 currency signs, 460 color wheels, 121, 123 for European languages, 455–459 ColorImpact, 121 Greek characters, 463–465 colors lozenge, 466 additive, 121 mathematical characters, 460–463 background, 17, 46, 279 overview, 451 cool, 123 punctuation characters and symbols, 452–455 defining, 383 technical characters, 461–463 font, 44–45, 71–72 used in XHTML, 452 hexadecimal system for, 123 character sets, 32 primary, 121 charset=charset attribute, 429, 436 secondary, 121 checked=checked attribute, 425 subtractive, 121 child selector, 490 tertiary, 121 CHMOD command, 328 warm, 123 circle attribute, 176 web-safe, 124–125 cite attribute, 68–69, 106 Colour Blindness Simulator, 349 <cite> element, 68, 104, 411 cols attribute, 307 cite=URL attribute, 410, 414, 427, 436 cols=n attribute, 420, 441 class attribute, 320 colspan attribute, 236–237, 241, 245, 440, 443 class selectors, 12–13, 490 .columnLeft img rule, 391 class value, 78, 305–306 .columnLeft rule, 390 class=classname attribute, 400 .columnRight img rule, 391 classes. See also specific classes .columnRight rule, 390 creating alternatives with, 88 columns, 63 pull quotes and, 105–106 creating with two structural divs, 278–288 classid=URL attribute, 432 faux, 282, 294–297, 382 clear property, 478 placing within wrappers, 288–290 clearFix method, 292–293, 325 sizing, using percentages, 290 clearFix rule, 174, 383, 494 styling, 376 ClearType, 76 working with, 259–260 client-side image maps, 175 comments, 58 clip property, 478 conditional, 356–358, 385 closing tags, missing, 350 CSS, 18–19, 58, 373, 493 code blocks, in lists, 115–116 complementary color scheme, 122 <code> element, 412512
conditional comments, 356–358, 385 INDEXConsolas font, 76Constantia font, 76 logical element placement and, 261contact information margins, adding, 265–266 maximum-width, 268–269 structure for, 342–344 padding, adding, 265–266 using microformats to enhance, 336–341 scrollable content areas, 306–311contact pages, 26, 333–335 single box, 264–272Contacts Feed Service, 341 vs. tables, 262content workflow for, 261–264 collapsible, 190–195 CSS shorthand inaccessible, 350 for backgrounds, 48–49 inline, 362 for boxes, 43–44 print-only, 395 CSS-parsing bug, 355 scrollable areas, 306–311 CSS-with-ToC.css document, 18 separating from design, 10–11 CSSEdit, 506 working with, 24–27 currency signs, 460content attribute, 38, 479 cursor property, 479#content .itemDetails ul rule, 385 curves, 258#content img rule, 391 custom bullets, 109#content rule, 212, 382, 386, 389 Cynthia Says Portal Tester, 349#content ul, #pullNav rule, 385content type declaration, 31 Dcontent-type meta tag, 35contextual selectors, 14–15, 88, 109, 304–306 data, tabular, 235contrast, lack of, 131 data=URL attribute432cool colors, 123 datetime attribute, 69, 414, 427coords=coordinates list attribute, 408 <dd> element, 414copyright issues, 133 dead links, 350Corbel font, 76 declaration, rule, 11–12core attributes, XHTML, 400 declare=declare attribute, 432core events, XHTML, 401–402 decorative elements, 63corporate logo, 77 defer=defer attribute, 436counter-increment property, 479 definition list <dl> element 107counter-reset property, 479 definition lists, 107, 342–344Courier New font, 75 <del> element, 69–70, 414crossheads, 62, 96 deprecated attributes, 254CSS. See Cascading Style Sheets descendant selector, 490CSS Creator, 292 description tag, 37–38.css file extension, 15, 38 designsCSS layouts. See also Cascading Style Sheets advanced, 278–306 separating content from, 10–11 stealing, 133 columns within wrappers, 288–290 desktop-publishing software, 62 flanking sidebars, 298–303 <dfn> element, 68, 414 multiple boxouts, 293–294, 296–297 diffusion dithering, 127 sidebars, 293–297 dir=dir attribute, 401 two structural divs, 278–288 direction property, 479 automating variations, 304–306 disabled=disabled attribute, 411, 425, 434, 437, 441 backgrounds, adding, 265–266 display property, 480 box models, 17, 263–264355, 358, 472 dithering, 124, 127 boxouts, 272–277 <div> element, 89, 415 browser support for, 261 centering, with absolute positioning, 269–272 centering, 360 collapsible, 190–195 creating page structure, 262 fixed width, 264–266 for forms, 323–325 page structure and, 262 maximum-width, 268–269 513
INDEX F <dl> element, 415 face attribute, 64 #dmenu rule, 386 faux columns, 282, 294–297, 382 DOCTYPE declarations, 31–33 favicons, attaching, 41–42 <!DOCTYPE> element, 404 Feed Validation Service, 348 document flow, 261 <fieldset> element, 318, 322, 324, 417 Document Object Model (DOM), 141 fieldset rule, 321 document type definitions (DTDs), 31, 34 file compression, 125–126 document-relative links, 42 files documents external, 42 attaching external, 38–42 naming, 57 opening in new windows, 169–170 Firefox, 351–354, 498 double quotes, 331 :first-child pseudo–class, 491 double-float margin bug, 302, 361 :first-letter pseudo-element, 492 Dreamweaver, 504 :first-line pseudo-element, 492 drop caps, 63, 98–102 :focus pseudo-class, 491 drop shadows, 51–54 fixed design, 27 drop-down menus fixed-width div, 264–266 creating, 224–226 fixed-width layouts, 260, 278–283, 288–289 multicolumn, 226–230 flanking sidebars, 298–303 problems with, 365 float property, 98–99, 138–139, 273, 480 <dt> element, 415 floated content, clearing, 288–293 floats, 282, 285 E :focus pseudo-class, 159 focus state, of links, 155–156 e-mail font colors headers, 329–331 defining, 71–72 sending form data via, 333 setting default, 44–45 font declaration, invalid, 85 e-mail addresses font properties, shorthand for, 84–85 harvesting of, 314 font property, 481 scrambling, 315 font sizes, 79–83, 90 defining, 376 element selector, 87 inheritance of, 82, 109–110, 360 elements. See also specific types in percentages, 80–82 in pixels, 80–81 multiple class values, 13 setting, 384 parent/sibling paths, 194–195 using ems, 81 <em> element, 66, 416 using keywords, 80–81 <embed> element, 416–417 font tags, 64–65 emphasis, 67 font-family property, 45, 72–77, 84, 481 empty-cells property, 480 font-size property, 79, 84, 90–91, 109–110, 377, 482 ems, 81 font-smoothing, 76 enctype attribute, 333, 418 font-style property, 83–84, 482 end tags, 7, 57, 70, 235 font-variant property, 83–84, 482 Enkoder form, 315 font-weight property, 83–84, 482 entities. See character entities fonts, 62 errors, common, 349–350 anti-aliasing, 76–77 European languages, characters for, 455–459 defining in CSS, 72–77 event attributes, XHTML, 401–403 for headings, 75–76 Evolt, 353 monospace, 72, 75–76 external documents, attaching, 38–42 properties of, 83–84 external files, checking paths of, 42 for print, 393–394 external style sheets, 15–16514
sans serif, 72–74, 93–94 INDEX serif, 72, 74–75, 95 setting default, 44–45 grids, for layout, 258–259 styling, 376, 390 grouped selectors, 13–14 web-safe, 73–76footers, styling, 385 Hfootnotes, 62for=text attribute, 428 h1 rule, 384<form> element, 316, 417–418 h1+p rule, 384form element events, XHTML, 402–403 hash sign (#), 175FormMail, 326–328 hasLayout property, 365, 391forms, 315–319 hCard information, 341 accessibility of, 318–319 <head> element, 350, 421 adding controls, 316–318 head section, 17, 31, 35–42 adding styles to, 320, 322 creating, 316 attaching external documents in, 38–42 layout, with CSS, 323–325 meta tags, 37–38 sending, 326–333 page titles, 35–36 Headdress, 506 using e-mail, 333 headers element, 242 with FormMail, 326–328 headers=id list attribute, 440, 443 to multiple recipients, 328 headings, 62 using PHP, 329–332 fonts for, 75–76 styling with CSS, 320–325 semantic markup of, 66 using microformats to enhance, 336–341 styling, 90–92, 95fragment identifiers, 153–154 height attribute, 17, 134, 237–238, 482<frame> element, 307–309, 418–419 height=n attribute, 423, 424, 432, 441, 443frameborder=0|1 attribute, 419, 423 height=number attribute, 416frames, 33 Helvetica font, 73 iframes, 309, 363–364 hexadecimal format, 123, 448 working with, 307–309 hidden fields, 327<frameset> element, 307, 420 hidden property, 78framesets, 307 hidden=yes|no attribute, 416friends of ED website, 18 <hn> element, 421full URLs, 151 Holly hack, 362 homepageG content for, 26 title for, 36Gecko browsers, 33, 351 HomeSite, 504Geneva font, 73 horizontal navigation bars, 202–207Georgia font, 74, 95 hover menus, problems with, 365GIF (Graphics Interchange Format), 126–129 :hover pseudo-class, 179, 182, 491GIF89 format, 128 hover state, 155–158GIMP, 505 <hr /> element, 421GoLive, 504 hr rule, 383, 390Google Custom Search Engine, 150 href attribute, 150, 152–153grammar, 64 href=URL attribute, 404, 408, 409, 429graphic design software, 505 hreflang=language code attribute, 429graphical navigation, with rollover effects, 211–230 hspace=number attribute, 407, 416graphical tabs, expandable, 217–218 HTML (Hypertext Markup Language). See also specificgraphics elements for body copy, 130 closing documents, 57 for text, 77–79 comments, 58Greek characters, 463–465 development of, 2grid images, for styling links, 214–217 DOCTYPES, 33 entities, 21 introduction to, 6–7 515
INDEX text wrapping, 138–139 tooltips, 135 tags, 7–8, 31 in XHTML, 134–136 vs. XHTML, 8, 30–32 ImageWell, 506 <html> element, 7, 31, 57, 422 <img /> element, 134–136, 424–425 .html file extension, 38 img.leadImage rule, 391 HTML Kit, 504 #imgPhoto rule, 377 html start tag, 31 Impact font, 75 HTML-Kit for Windows, 327 @import method, 39, 41 hyperlinks. See links indented text, 85–86 information architecture, 24–25 I inherit value, 474 inline content, 362 <i> element, 422 inline navigation, 148–149 icons, for navigation, 170 inline quotes, 68 id attribute, 153 inline styles, 16, 66–70 ID selectors, 13, 490 !important declaration, 474 id values, 141, 153, 242, 262 <input /> element, 316–317, 325, 425–426 id=name attribute, 400, 430, 435 ins element, 69–70 <iframe> element, 422–423 .itemContainer rule, 383 iframes, 309, 363–364 .itemContainer:after rule, 383 image formats, 125–131 .itemCost rule, 385 .itemDetails li rule, 385 GIF, 126–127 .itemDetails li:first-child rule, 385 GIF89, 128 .itemImage img rule, 385 JPEG, 125–126 .itemImage img:hover rule, 385 PNG, 129 .itemImage rule, 383 using wrong, 131 .itemName rule, 385 image gallery <ins> element, 427 adding captions to, 187 interface images, 135 creating, 185–190 internal frames. See iframes image maps, 175–182 internal links, 153 image-replacement techniques, 78–79, 102, 376 Internet, history of, 2–3 images Internet Explorer, 498 adding pop-ups to, 171–175 alpha transparency and, 129 alternative text for, 134–136 bugs in, 302, 354–365 applying CSS borders to, 136–138 double-float margin bug, 302 background, 46, 168–169 fixes for, 359–365, 391 for body copy, 130 flanking sidebars in, 301 common mistakes with, 130–134 floated content and, 291 CSS with, 136–143 hacks for, 385 displaying random, 139–143 market share for, 351 dithering, 127 standalone installations of, 353 file sizes of, 132 Internet Explorer 5 interface, 135 common fixes for, 361–365 introduction to, 120 style sheet for, 378 as links, 134, 170–175 Internet Explorer 5.5, 352 for navigation bars, 211–230 Internet Explorer 5.x, common fixes for, 359–360 optimized, 132 Internet Explorer 6, 35, 352 original, 130 common fixes for, 361–365 quality of, 132 conditional comments and, 356 resizing in HTML, 132 drop-down lists and, 230 splitting, 133 Internet Explorer 7, 351, 354 stealing, 133 ismap=URL attribute, 424 styling, 377, 385, 391 for text, 77–79 text overlays, 133516
ISO-8859 standard, 32 letter-spacing property, 86, 482 INDEXitalics, 67 <li> element, 107, 428–429itemImage div rule, 385 Lightbox2, 188, 190 517 line height, 79–83J line length, 63 line-height property, 63, 82–83, 377, 483JavaScript link attribute, 155 adding table separator stripes with, 251–253 Link Checker, 348 attaching, 41–42 <link /> element, 38–39, 429–430 collapsible content, 190–195 :link pseudo-class, 491 creating image gallery with, 185–190 link states, 155–62 creating pop-up windows, 183–185 encrypting e-mail addresses with, 315 correctly ordering, 156–157 enhancing links with, 183–195 defining, with CSS, 156 image randomizer creation with, 139–142 styling multiple, 160–162 link tags, 15, 39JPEG (Joint Photographic Experts Group) format, 125–126 link targeting, 169–170.js file extension, 38 link-based images, 134 links. See also navigationK a selector vs. a:link selector, 157 absolute, 151<kbd> element, 427 accessibility and usability of, 162–169kerning, 63 color, 158keyboard attributes, XHTML, 400 creating and styling, 150–170keyword values, for font sizes, 80–81 dead, 350<keywords> element, 37–38 document-relative, 42Konqueror, 500 editing styles, with CSS, 157–159 end tags with, 151L enhancing with JavaScript, 183–195 images as, 170–175<label> element, 318, 428 internal, 153label=string attribute, 434, 435 multiple styles, with grid images, 214–227lang attribute, 31, 42, 401 relative, 42, 151–152:lang pseudo-class, 491 root-relative, 152language attributes, XHTML, 401 top-of-page, 154–155language declarations, 31 underlines for, 158language-specific quotes, 68 Linux, 75, 353language=encoding attribute, 437 liquid layouts, 27, 285–288languages, characters for liquid web design, 260 list element <li>, 107, 428–429 European languages, 455–459 list styles, shorthand for, 111 Greek language, 463–465 list-style property, 483layouts. See also CSS layouts list-style-image property, 109, 483 basic, 25–27 list-style-position property, 110, 483 centering, 378 list-style-type property, 110, 483 for contact pages, 333–335 lists, 106 liquid, 27, 285–288 for blocks of code, 115–116 maximum-width, 268–269 creating better looking, 112–115 portfolio, 373–378 definition, 107 tables vs. CSS, 260 inline, 202–207leading, 63, 82 margins, 111–112left property, 482 for navigation, 112, 195–210<legend> element, 324, 428 nesting, 108legend rule, 321 ordered, 107length value, 473 padding, 111–112
INDEX media attribute, 39 media=list attribute, 439 styling with CSS, 108–112 media=media type list attribute, 430 unordered, 107 menus. See also navigation whitespace bugs in, 363 logical element placement, 261 drop-down, 224–226, 365 logical styles, 66, 68–69 multicolumn drop-down, 226–230 #logo rule, 382 <meta /> element, 31, 431 longdesc attribute, 136, 419, 423, 425 meta tags lossless compression, 126 author, 38 lossy compression, 125 content-type, 35 lowerCamelCase, 88 description, 37–38 lowercase attribute, 87 keywords, 37–38 lozenge characters, 466 revisit-after, 38 Lucida Console, 75 robots, 38 Lucida fonts, 73, 75, 93–94 search engines and, 37–38 Lucida Grande, 73 method=get|post attribute, 418 Lucida Sans Typewriter, 75 microformats, 336–341 Lucida Sans Unicode, 73 Microsoft characters, nonstandard set, 466–468 Microsoft Expression Web, 504 M min-height property, 484 min-width property, 269, 361, 484 Mac OS X, 353 modular style sheets, 494 Mac Pro, 506 Monaco font, 75 Macs monochromatic color schemes, 122 monospace fonts, 72, 75–76 color display on, 72 Mosaic, 2 fonts for, 73, 76–77 mouse, use of, 163 mail() function, 329–332 movable type, 62 $mailprog value, 327 Mozilla Firefox, 498 mailto: URLs, 314, 333 multicolumn drop-down menus, 226–230 <map> element, 176, 430 multiple=multiple attribute, 437 margin property, 138–139, 376, 483 margin-bottom property, 484 N margin-left property, 484 margin-right property, 484 name attribute, 38, 317 margin-top property, 484 name=name attribute, 407, 411, 416, 418, 419, 426, 430, marginheight=n attribute, 419, 423 margins, 17, 42–43, 66, 91, 96 433, 435, 437, 441 adding to CSS layouts, 265–268 name=string attribute, 431 adding to liquid layouts, 286 namespaces, 31 box, 263 naming conventions, of thumbnail images, 374 controlling, 85 #navContainer rule, 212, 383 double-float margin bug, 361 navigation. See also links list, 111–112 marginwidth=n attribute, 423 basic, 24–25 marginwidth=number attribute, 419 breadcrumb, 202–204 markup, well-formed, 70 creating and styling links, 150–170 Markup Validation Service, 348 designing, 26 #masthead p rule, 390 dos and don’ts, 230 #masthead rule, 382 image maps, 175–176 mathematical characters, 460–463 max-height property, 484 faking, with CSS, 177–182 max-width property, 361, 484 images for, 134 maximum-width layouts, 268–269 inline, 148–149 maxlength=n attribute, 425 inline lists for, 112 —, 21 introduction to, 148 search-based, 148, 150518
site, 148–150 online gallery INDEX site maps, 24–25 creating, 185–190 skip links, 164–169 styling, 375–377 519 types of, 148–150navigation bars online storefront layout with collapsible sections, 200–201 creating, 378–386 creating, 195–230 design and images for, 379 drop-down menus, 224–230 fonts for, 384 with expandable tabs, 217–218 styling, 381–383 graphical, with rollover effects, 211–230 techniques for, 380–381 horizontal, 202–207 inline lists, 202–207 onload=script event, 403 lists for, 195–210 onmousedown=script attribute, 402 multicolumn drop-down menus, 226–230 onmousemove=script attribute, 402 names for items on, 195 onmouseout=script attribute, 402 styling links, 160–162 onmouseover=script attribute, 402 tab-style, 207–210 onmouseup=script attribute, 402 two-tier, 220–223 onreset=script event, 403 vertical, styled with CSS, 196–200 onselect=script event, 403#navigation ul rule, 383 onsubmit=script event, 403nesting onunload=script event, 403 boxes, 272–277 Opera, 351, 354, 499 lists, 108 <optgroup> element, 316, 434 tags, 7–8 <option> element, 316, 434–435Netscape, 351 ordered lists, 107nms FormMail, 326–328 original images, 130noBorder class, 137 orphans property, 485<noembed> element, 431 outline property, 485<noframes> element, 309, 432 outline-color property, 485nohref=nohref attribute, 408 outline-style property, 485noise dithering, 127 outline-width property, 485nonprinting characters, 453 overflow property, 485nonstandard Microsoft set, 466–468 overflow settings, 78, 310noresize=noresize attribute, 419<noscript> element, 432 Pnowrap=nowrap attribute, 441–443null alt attributes, 135 <p> element, 435number value, 473 p em rule, 377 p rule, 377O p.footer rule, 391 padding, 17, 42–43<object> element, 311, 432–433object=name attribute, 407 adding to CSS layouts, 265–268<ol> element, 433 adding to liquid layouts, 287onblur=script event, 402 list, 111–112onchange=script event, 402 padding property, 486onclick attribute, 183 padding-bottom property, 486onclick=script attribute, 401 padding-left property, 486ondblclick=script attribute, 401 padding-right property, 486onfocus=script event, 402 padding-top property, 486onkeydown=script attribute, 402 padding values, pixel-based, 287onkeypress=script attribute, 402 page content. See contentonkeyup=script attribute, 402 page margins, 42–43 page structure, creating in CSS, 262 page titles, 35–36 page-break-after property, 486 page-break-before property, 486
INDEX pseudo-classes, 159, 491. See also specific classes pseudo-elements, 98–99, 491. See also specific elements page-break-inside property, 486 pull caps, 98 Palatino font, 75 pull quotes, 63, 102–106 Paparazzi, 506 #pullNav li rule, 383 paragraphs #pullNav rule, 383 pull-navigation, 380, 383 indented text for, 85–86 punctuation characters and symbols, 452–455 semantic markup of, 66 styling, 90–92, 96 Q <param> element, 435 parent/sibling paths, finding, 194–195 <q> element, 68, 436 parsing bugs, 355 quirks mode, 34 pattern dithering, 127 quotation marks, 452–453 peekaboo bug, 365 quotations, 68 percent value, 473 quotes, pull, 98, 102–106 perceptual palette, 127 quotes property, 487 period (.), 12 permissions, script server, 328 R Photoshop, 505–506 Photoshop Elements, 505 random images, 139–143 PHP ”, 21 adding table separator stripes with, 253 readonly=readonly attribute, 426, 442 creating image randomizer with, 142–144 recipient_alias value, 328 includes, scrollable content and, 310 rect attribute, 176 sending form data using, 329–332 redirect value, 327 physical styles, 66–67 reference citations, 106 Pinkflag.com website, 293 @referers value, 327 pixel-based padding, 287 rel=relationship attribute, 404, 430 pixels, 80–81 relative links, 151 pluginspage=URL attribute, 416 Reply-to field, 331 PNG (Portable Network Graphics) format, 129 Reset button, 318 PNG transparency, 364–365 rev=relationship attribute, 405, 430 poly attribute, 176 revisit-after tag, 38 pop-ups RGB colors, 72, 121, 448 adding to images, 171–175 right property, 487 creating, 183–185 robots tag, 38 portfolio layouts rollover effect, for graphical navigation, 211–230 creating, 373–378 root-relative links, 152 design and images for, 374 rounding errors, 288, 301, 358 styling, 375–377 row group elements, 240–241 techniques for, 374–375 rows attribute, 308 Position Is Everything, 292, 353 rows=%|n\\"* attribute, 420 position property, 486 rows=n attribute, 442 positioning, absolute, 269–272 rowspan attribute, 236–237, 241, 441, 443 $postmaster value, 327 * rule, 90 $_POST array, 330 rule sets, multiple, 350 <pre> element, 435–436 rules presentation-oriented tags, 10 primary colors, 121 defining, with the cascade, 16–17 print design, vs. web design, 258, 260 of CSS, 11–12 print-only content, 395 printable layouts, style sheets for, 392–396 printOnly class, 395 profile=URL attribute, 421 programming-oriented content, 68 pseudo-class selectors, 156520
S INDEX<s> element, 436 site maps, 24–25Safari, 302, 351, 353–354, 500 site navigation. See navigation<samp> element, 436 size attribute, 64sans serif fonts, 72–74, 93–94 size=n attribute, 426, 437Scalable Inman Flash Replacement (sIFR), 79 skip navigation links, 164–169scheme=string attribute, 431scope attribute, 241–242, 244 background images for, 168–169scope=col|colgroup|row|rowgroup attribute, 443 creating, 165–166screen readers, 11, 31, 66, 239–242 styling, 166–167<script> element, 183, 436–437 <small> element, 67, 438script server permissions, 328 snippets folder, 20script start tags, 42 Softpress Freeway, 504scripts, for image galleries, 188–190 softwarescrolling, content areas, 306–311 graphic design, 505scrolling=auto|no|yes attribute, 419, 423 Web design, 504search boxes, 150 software guide, 504–506search engines, meta tags and, 37–38 spacers, 254, 261search-based navigation, 148–150 spacing, 63, 91, 453secondary colors, 121 spam, combating, 315Section 508 compliance, 349 spambots, 314–315<select> element, 316, 437 <span> element, 78, 172–173, 438selected=selected attribute, 435 alternatives and, 88selective palette, 127 drop caps with, 100–102selectors. See also specific selectors span=n attribute, 412, 413 spelling, 64 class, 12–13 spelling errors, 349 common, 489, 491 split-complementary color scheme, 122 contextual, 14–15 src attribute, 134 grouped, 13–14 src=URL attribute, 417, 419, 423, 425, 426, 437 ID, 13 sRGB design, 125 rule, 11–12 stand-firsts, 62 types of, 12–15 standard attributes, XHTML, 400–401semantic markup, 9, 65–70, 262 standards=based design, 6 defined, 65 standby=text attribute, 433 importance of well-formed, 70 star HTML hack, 356 logical and physical styles, 66–70 start attribute, 107 paragraphs and headings, 66 start tag, body element, 42 styling, 89–97 start=n attribute, 433sendmail binary, 327 states, link, 155–156separator stripes, for tables, 250–253 strap-lines, 62serif fonts, 72, 74–75, 95 <strike> element, 438server-side image maps, 175 strikethrough (s), 67shape attribute, 176 <strong> element, 438shape=rect|circle|poly|default attribute, 408 structural divsshims, 254, 261 creating faux columns with, 294–295#sidebar h2 rule, 384 creating two-column fixed-width layout with, 288–289sidebars for fixed-width layouts, 278–283 flanking, 298–303 for liquid layouts, 285–288 working with, 293–297 working with two, 278–288Sim Daltonism, 506 style attribute, 16simplicity, in web design, 259 <style> element, 15–16, 40, 367, 438–439simplified box model hack (or SBMH), 355 style sheets. See also Cascading Style Sheetssite design. See web design alternate, 39 external, 15–16 linking multiple, 17 521
INDEX row spans, 236–237 separator stripes, 250–253 managing, 372–373 setting dimensions of, 237–239 modular, 494 styling, 247–253 persistent, 39 summary attribute, 239, 243 preferred, 39 workings of, 235–239 for print, 392–396 tabular data, 235–237 style=stylename attribute, 400–401 tag attributes, 9 styles tag selectors, 69, 87–88 abbreviations, 68–69 tagging, 37 acronyms, 68–69 tags. See specific tags adding to forms, 320–322 Tahoma font, 73 adding to web pages, 15–16 target attribute, 169–170 deprecated, 67 target=_blank|_parent|+self|_top|[name attribute, 405, for emphasis, 67 for inserted and deleted text, 69–70 408–409, 418, 430 inline, 16, 66–70 <tbody> element, 240, 439–440 text, 71–106 <td> element, 235, 440–444 <sub> element, 439 TCP/IP, 2 Submit button technical characters, 461–463 styling, 320 teletype text (TT), 67 using image for, 321 tertiary colors, 121 subscript (sub), 67 testing subtractive color system, 121 summary attribute, 239, 243 browser test suite, 351–354 summary=string attribute, 439 validation tools for, 349 <sup> element, 439 websites, 348, 350 SuperDuper, 506 text superscript (sup), 67 alt, 134–136, 163, 359 symbols, 349, 454–455 controlling case, 87 deleted, 69–70 T hiding, 79 in pixels, 80 tab-style navigation bars, 207–210 indented, 85–86 tabindex attribute, 163–164, 319 inserted, 69–70 tabindex=number attribute, 400, 434 letter spacing, 86 table cell elements <td>, 235, 440–444 margins, 85 table cells, vertical alignment of content, 238–239 styling with CSS, 71–106 <table> element, 235, 439 styling with font tag, 64–65 table headers, 240–242 using images for, 77–79 table row elements <tr>, 235, 444 word spacing, 86 table-layout property, 487 wrapping around images, 138–139 tables text-align property, 487 text-decoration property, 67, 158, 487 accessibility of, 239–246 text-indent property, 79, 85–86, 179, 182, 487 alignment of, 237–239 text-transform bug, 360 borders, 235, 247–249 text-transform property, 87, 487–488 building, 242, 244–246 <textarea> element, 316–317, 441–442 captions, 239, 244 TextMate, 504, 506 cell padding, 235–236 <tfoot> element, 240, 442 cell spacing, 235–236 Thalamus Publishing website, 259 column spans, 236–237 <th> element, 442 font-size inheritance in, 360 <thead> element, 240, 444 for layout, 234, 253–255 thumbnail images, naming conventions, 374 for layouts, vs. CSS, 260, 262 #thumbnailsContainer img rule, 377 nesting, 254 TIFF format, 129, 131 row groups, 240–241522
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 1 - 50
- 51 - 100
- 101 - 150
- 151 - 200
- 201 - 250
- 251 - 300
- 301 - 350
- 351 - 400
- 401 - 450
- 451 - 500
- 501 - 550
- 551 - 554
Pages:
