/* ________________ general ________________ */
body { margin: 0; padding: 0; background: #554 url(bg.gif); font: small/1.5em georgia, times, serif; color: #333331; text-align: center; }
This is a body selector with multiple declarations. The margin and padding are set to zero pixels. The background color of the body is an olive gray, and a patterned black image is added to this background (bg.gif) using the url value. The font size is the absolute browser default size of small, and the line height is 1.5 em or 150% of the browser default line height, and the font family is listed in order of preference for Georgia, Times or, if these are unavailable, for the generic serif font available to the browser. The color of the text is dark gray. The text is aligned to the center; this declaration is important as it allows for a workaround for earlier versions of Windows Internet Explorer that do not recognize the margin:auto declaration.
a { color: #c50; text-decoration: none; border-bottom: 1px solid #dca; }
This is an anchor (hyperlink) selector with multiple declarations. The text of the link is a dark pumpkin color. The links are not underlined. There is a fawn-colored border under the links that is one pixel thick and solid.
a:visited { color: #a86; border: none; }
This is an anchor link pseudo-class with multiple declarations relating to the visited function. After a link has been visited, the text changes to a tan color and the border disappears.
a:hover { color: #000; border-bottom: 1px solid #333331; }
This is an anchor link pseudo-class with multiple declarations relating to the hover function. When the cursor hovers on the link, the text color turns to black and the bottom border becomes a dark gray color that is solid with a thickness of one pixel.
acronym { cursor: help; font-style: normal; border: none; }
This is an acronym selector with multiple delcarations that style targetted acronyms on the page. The declaration "cursor:help" causes a question mark to appear when the cursor hovers over the acronym. (When the "acronym title" html surrounds the target, a box displays that gives the author's interpretation for the acronym.) The font style is normal and there is no border under the acronym.
h1 { display: none; }
This selector applies to h1 tags. The declaration states that they should not display. (As Zen Garden does not allow the html to be changed, the author of this page did not want these tags to show and used CSS to hide them.)
h2 { font-size: 2em; font-weight: normal; color: #922; margin: 0 0 0.7em 0; padding: 0; }
This is an h2 selector with multiple declarations. The font size on these headings is 2 em or 200% the body font size. The font weight is changed to normal to replace the default bold style. The color of the text is dark rose. The margins surrounding the tag are 0 pixels on the top, right and left side, and 0.7 em or 70% of the body margin size. The heading has zero pixels of padding.
h3 { width: 420px; height: 20px; margin: 1.2em 0 0.8em 0; }
This is an h3 selector with multiple declarations. The width of these tags is 420 pixels, and the height is 20 pixels. The margin around these tags is 1.2 em on the top or 120% of the body margin (which is zero), 0 pixels on the right and left, and 0.8 em on the bottom or 80% of the body margin.
h3 span { display: none; visibility: hidden; }
This is a contextual selector with multiple declarations. They apply to the span tag within an h3 tag. The display is set to none and the visibility is set to hidden. This means that any information inside the span tags in h3 headings will not be visible. (I am not sure why the author needed to use both declarations--they seem to be redundant.)
p { text-indent: 1.5em; font-size: 88%; margin: 0 0 0.6em 0; }
This is a paragraph selector with multiple declarations. The first line of paragraphs on this page will be indented 1.5 em or 150% in relation to the containing element. The font size is 88% of the body font size. The margins surrounding the paragraphs are zero pixels on the top, right and left sides, and 0.6 em on the bottom or 60% in relation to the stated body margin.
/* The following hack is to correct paragraph text size in IE/WIN */
/* \*/ * html body p { font-size: 80%; } /* */
This is an IE hack for earlier versions of Windows Internet Explorer, which may not recognize the font size of 88%. The rule is written as a contextual selector beginning with "html", followed by "body", and then "p." The declaration states that the font size of the p tag should be 80% of the body font size, which IE does recognize.
/* ________________ containers ________________ */
#container { position: relative; text-align: left; margin: 0 auto; width: 750px; background: #fff url(main.jpg) repeat-y; border-bottom: 15px solid #000; }
This selector applies to the container div, which encloses the content on the page. It has multiple declarations. The position of this div is relative. It can be adjusted with respect to its default position on the page. The text is aligned to the left. The margins are zero and automatic, which horizontally centers the content on the page. The width of the content is 750 pixels. The background is white, an image that serves as the background for the main content and right panel of the page (main.jpg) is applied using the url value, and the background image is set to repeat vertically using the value repeat-y. The bottom border is 15 pixels thick, solid and black in color.
#intro { width: 750px; background: #fff url(main.jpg) repeat-y; }
This selector applies to the intro div that encloses the header and the first section of the content below (the preamble). It has multiple selectors. The width is 750 pixels. The background is white, and the image is the same as the one used in the container div and is also repeated vertically.
#supportingText { width: 430px; margin-left: 30px; }
This selector applies to the supportingText div that encloses the paragraphs of text located below the preamble div as well as the footer div. It has multiple declarations. The width is 430 pixels. The left margin is set to 30 pixels.
#preamble { margin-left: 30px; width: 430px; }
This selector applies to the preamble div that encloses the first paragraph of text in the main content area that is nested within the intro div. It has multiple declarations. The left margin is set to 30 pixels. The width of the div is 430 pixels.
#pageHeader { width: 750px; height: 250px; background: #000 url(top.jpg) no-repeat; }
This selector applies to the pageHeader div that encloses the header of the page. It has multiple delcarations. The width is 750 pixels. The height is 250 pixels. The background is black, the image that serves as the header image for the page (top.jpg) is applied using the url value, and the image is set to the value of no-repeat.
#quickSummary { position: absolute; left: 510px; width: 210px; background: transparent url(h3-download.gif) no-repeat 0 0; border-bottom: 1px solid #923b09; }
This selector applies to the quickSummary div that encloses the first level of links in the right panel. It has multiple selectors. The position of the div is absolute, or positioned in a defined area of the page. The left margin is 510 pixels and the right margin is 210 pixels. The background is transparent, an image used as a header to title the section (h3-download.gif) is added using the url value, the image is set to no-repeat, and the horizontal position (from the left of the div) and the vertical position (from the top of the div) for the image's placement on the page are both set to zero. The bottom border of this div is solid, 1 pixel thick and brownish-red colored.
#footer { margin: 3em 0 0 0; font: bold 9px/3em tahoma, verdana, sans-serif; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 2em; }
This selector applies to the footer div that encloses the footer content for the page. It has multiple declarations. It has a top margin of 3 em or 300% of the container div top margin size, and a left, right and bottom margin of zero. The font in this div displays in bold, the font size is 9 pixels, the line height is 3 em or 300% of the body line height, and the font family is listed in order of preference for Tahoma, Verdana or, if these are unavailable, for the generic sans-serif font available to the browser.
#linkList { position: absolute; top: 320px; left: 510px; width: 210px; margin-right: 30px; }
This selector applies to the linkList div that encloses the links in the right panel just under the quickSummmary div. It has multiple declarations. The div is absolutely positioned in a defined place on the page. The div is 320 pixels from the top of the page. It is 510 pixels from the left edge of the page. The width is 210 pixels. The right margin is 30 pixels.
/* ________________ lists & typo ________________ */
#pageHeader h1, #pageHeader h2 { display: none; }
These are a multiple, contextual selectors. The declaration states that any h1 or h2 tags in the pageHeader div should not display.
#quickSummary p.p2 { text-indent: 0; font: 10px/16px tahoma, verdana, sans-serif; color: #efece3; padding: 5px 17px; margin: 25px 0 0 0; background: #bd4d0d url(list-bg.jpg); border-top: 1px solid #923b09; }
This is a contextual selector with multiple declarations. They apply to any p tag with a class of p2 in the quickSummary div. The text is not indented in this section. The font size is 10 pixels, the line height is 16 pixels, and the font family is listed in order of preference for Tahoma, Verdana or, if these are unavailable, for the generic sans-serif font available to the browser. The color of the text is ecru. The padding around the paragraph is 5 pixels on the top and bottom and 17 pixels on the left and right. The margins of the paragraph are 25 pixels on the top and zero pixels on the right, bottom and left. The background color is dark pumpkin and a solid dark pumpkin image is added to this background (list-bg.gif) using the url value. The border top is 1 pixel thick, solid and colored brownish-red.
#quickSummary p.p2 a { color: #efece3; border: none; font-weight: bold; }
This is a contextual selector with multiple declarations. They apply to anchor (hyperlink) tags in any p tag with a class of p2 within the quickSummary div. The text color of the links is ecru. There is no border on the links. The font weight is bold.
#quickSummary p.p2 a:hover { color: #ec9; }
This is a contextual selector. It applies to a style that occurs when the cursor hovers over an anchor (hyperlink) tag in any p tag with a class of p2 within the quickSummary div. The color of the text in the hovered links is light mocha.
#quickSummary p.p1 { display: none; }
This is a contextual selector. It applies to any p tag with a class of p1 within the quickSummary div. This section will not display in the browser.
#footer a { background: #cb9; padding: 2px 5px; color: #edb; border: none; margin: 0; }
This is a contextual selector with multiple declarations that apply to any anchor (hyperlink) tag in the footer div. The background of the links is a taupe color. The padding around the links is 2 pixles on the top and bottom and 5 pixels on the left and right. The text color of the links is light mocha. There is no border on the links. The margins are set to zero.
#footer a:hover { background: #000; border: none; }
This is a contextual selector with multiple declarations that apply to a style that occurs when the cursor hovers over any anchor (hyperlink) tag in the footer div. The background will be white on the hovered links. There will be no border on the hovered links.
#linkList h3 { width: 210px; height: 25px; margin: 1em 0 0 0; padding: 0; }
This is a contextual selector with multiple declarations. They apply to any h3 tag in the linkList div. The width of the header is 210 pixels. The height is 25 pixels. The margin around the header is 1 em on top, or 100% of the top margin of the linkList div, and zero on the right, bottom and left. The padding is set to zero.
#linkList p, #linkList li { font: x-small/1.6em tahoma, verdana, sans-serif; color: #efece3; text-indent: 0; }
These are multiple, contextual selectors with multiple declarations. They apply to any p or li tag that occurs in the linkList div. The font size in these sections is the absolute browser default size of extra small, the line height is 1.6 em or 160% of the browser default line height, and the font family is listed in order of preference for Tahoma, Verdana or, if these are unavailable, for the generic sans-serif font available to the browser. The text color in these sections is ecru. There is no text indentation.
#linkList ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #923b09; background: #bd4d0d url(list-bg.jpg); }
This is a contextual selector with multiple declarations. They apply to any ul tag that occurs in the linkList div. The list style (bulleting, etc.) is set to none. The margins and padding are set to zero. There is a border top in this section that is 1 pixel thick, solid and colored brownish-red. The background color is dark pumpkin and a solid dark pumpkin image is added to this background (list-bg.gif) using the url value.
#linkList li { color: #000; border-bottom: 1px solid #923b09; line-height: 1.5em; padding: 0.5em 17px; }
This is a contextual selector with multiple declarations. They apply to any li tag in the linkList div. The text color is black. There is a bottom border that is 1 pixel thick, solid and colored brownish-red. The line height in this section is 1.5 em or 150% of the body line height. There is padding around these list items of 0.5 em or 50% of the set body padding on the top and bottom, and 17 pixels of padding on the left and right.
#linkList li:hover { background: #b64a0b; }
This is a contextual selector. It applies to the li tag pseudo-class of hover. When the cursor hovers over information in any li tag that occurs in the linkList div, a pumpkin-colored background appears.
#linkList li a { display: block; border: none; color: #f4f0e6; font-weight: bold; margin-left: -12px; padding-left: 12px; background: url(arrow.gif) no-repeat 0 60%; }
This is a contextual selector with multiple declarations. They apply to any anchor (hyperlink) tag that occurs in li tags in the linkList div. The links displays in a block style. There is no border. The text color of the links is cream. The font weight in the links is bold. The links have a negative left margin, which moves them 12 pixels to the left of the margin on the containing div. The left padding is 12 pixels from the left margin of the containing div. An image of an arrow (arrow.gif) is added to the background using the url value, which is set so that it doesn't repeat, and is positioned horizontally at zero (from the left of the a tag) and 60% vertically (from the top of the a tag).
#linkList li a:hover { color: #ec9; background-position: -300px 60%; }
This is a contextual selector with multiple declarations. They apply to any li tag with an anchor (hyperlink) pseudo-class of hover in the linkList div. When the cursor hovers over the links, the text color turns light mocha. The horizontal position of the hovered links is negative 300 pixels from the left of the a tag (not sure what this means) and the vertical position is 60% from the top margin of the a tag.
#linkList li a.c { display: inline; padding: 0; margin: 0; background: none; color: #000; font-weight: normal; }
This is a contextual selector with multiple declarations. They apply to any anchor (hyperlink) tag within an li tag that has a class of "c" in the linkList div. The links within this class display inline, which sets them on the same line as surrounding elements (in contrast to the links outside this class). The padding and margins are set to zero. There is no background. The text color is black. The font weight is normal.
#linkList li a.c:hover { color: #6e2308; }
This is a contextual selector. It is a hover pseudo-class that applies to any anchor (hyperlink) tag within an li tag that has a class of "c." When the cursor hovers over this section, the color of the text turns reddish-brown.
#linkList #larchives li, #linkList #lresources li, #linkList #lfavorites li { padding: 0.5em 0; }
These are multiple and contextual selectors that apply to any li tag in the larchives, lresources or lfavorites div (not included) nested in the linkList div. The padding is set to 0.5 em or 50% of the body padding on the top and bottom of the list items, and there is zero padding on the left and right sides.
#linkList #larchives li a, #linkList #lresources li a, #linkList #lfavorites li a { background: transparent url(bullet.gif) no-repeat 5px 60%; display: inline; padding-left: 17px; margin: 0; }
These are multiple and contextual selectors with multiple declarations that apply to any anchor (hyperlink) tag within an li tag in the larchives, lresources or lfavorites (not included) divs nested in the linkList div. The background is transparent, a bullet image is placed in the background (bullet.gif) using the url value, the image is set so that it doesn't repeat, and the background position of the bullet image is 5 pixels horizontally (from the left of the a tag) and 60% vertically (from the top of the a tag). These links are set to display inline, which sets them to display on the same line as surrounding elements. The left padding is 17 pixels. The margins are set to zero.
#linkList #larchives li a:hover, #linkList #lresources li a:hover, #linkList #lfavorites li a:hover { background-position: -295px 60%; }
These are multiple and contextual selectors. The declaration applies to any anchor (hyperlink) pseudo-class of hover within an li tag in the larchives, lresources or lfavorites (not included) divs nested in the linkList div. When the cursor hovers over this section, the background position of the hovered links displays at negative 295 pixels horizontally (from the left of the a tag - again, not sure what this means) and 60% vertically (from the top of the a tag).
h3.select { background: transparent url(h3-select.gif) no-repeat;}
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any portion of an h3 tag with a class of "select." The background is transparent, a heading image is added (h3-select.gif) using the url value, and the image is set so that it doesn't repeat.
h3.resources { background: transparent url(h3-resources.gif) no-repeat;}
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any portion of an h3 tag with a class of "resources." The background is transparent, a heading image is added (h3-resources.gif) using the url value, and the image is set so that it doesn't repeat.
h3.archives { background: transparent url(h3-archives.gif) no-repeat; }
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any portion of an h3 tag with a class of "archives." The background is transparent, a heading image is added (h3-archives.gif) using the url value, and the image is set so that it doesn't repeat.
h3.favorites { background: transparent url(h3-favorites.gif) no-repeat; }
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any portion of an h3 tag with a class of "favorites." The background is transparent, a heading image is added (h3-favorites.gif) using the url value, and the image is set so that it doesn't repeat. (The favorites div is not included in this design.)
#preamble h3 { background: url(h3-theroad.gif) no-repeat; margin-top: 0; }
This is a contextual selector with multiple declarations. They apply to any h3 tag within the preamble div. The background is a heading image (h3-theroad.gif) that is added using the url value, and it is set so that it doesn't repeat. The top margin of the heading is set to zero.
#explanation h3 { background: url(h3-sowhat.gif) no-repeat; }
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any h3 tag in the explanation div. The background is a heading image (h3-sowhat.gif) that is added using the url value, and it is set so that it doesn't repeat.
#participation h3 { background: url(h3-participation.gif) no-repeat; }
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any h3 tag in the participation div. The background is a heading image (h3-participation.gif) that is added using the url value, and it is set so that it doesn't repeat.
#benefits h3 { background: url(h3-benefits.gif) no-repeat; }
This is a contextual selector with multiple background declarations stated in shorthand. They apply to any h3 tag in the benefits div. The background is a heading image (h3-benefits.gif) that is added using the url value, and it is set so that it doesn't repeat.
#requirements h3 { background: url(h3-requirements.gif) no-repeat; height: 23px; margin-bottom: 0.7em; }
This is a contextual selector with multiple declarations. They apply to any h3 tag in the requirements div. The background is a heading image (h3-requirements.gif) that is added using the url value, and it is set so that it doesn't repeat. The height of the heading is 23 pixels. The bottom margin is set to 0.7 em or 70% of the bottom margin in the container div.