/* A sample cascading style sheet. To use a style sheet on an HTML page, give it a name such as style.css using a .css extenasion. Put a link of the following form in the section of the HTML page, after the : <link rel="stylesheet" href="style.css" type="text/css"> The href is a URL; this example assumes style.css is in the same directory as the HTML file, but that is not required. Style sheets use only C-style comments like this one. General format for style specifications is: selector { property: value; property: value; ... } Where "selector" tells where to apply the style, "property" is the name of the property that is being set, and "value" is the value for the style. The final ";" is optional. For examples, using body as the selector will set style properties for the entire body of the page. Using b as the selector will set the style for <b> elements. If you want all your boldface text to be blue, use: b { color: blue } Spaces and ends-of-line are not significant. There are several types of selectors and many properties. For more info, see a CSS reference, such as: http://www.htmlhelp.com/reference/css/ */ body { /* settings apply to the entire body of the page */ color: #330000; /* color means foreground color */ background-color: #FFFFCC; /* this is the background color */ margin-left: 30pt; /* margin on left of body; 1 pt = 1/72 inch */ margin-right: 30pt; /* Following are some things available for background images. This would take the image from a file named imagefile.png and show it only once, centered horizontally and vertically. The fixed background-attachement means that the image won't scroll. The default values for repeat, attachment, and postion would give an image that scrolls with the page and is repeated horizontally and vertically to tile the entire page. */ /* background-image: url(imagename.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; */ } /* Make bold text colored. */ b { color: #CC0000 } /* To control the appearance of hyperlinks, use the so-called "pseudo-classes" a:link, a:visited, a:active, and a:hover as selectors. */ a:link { /* Appearance of an un-visited link */ color: #00CC00; text-decoration: underline; /* Values for text-decoration: line-through, overline, underline, none */ } a:visited { /* Appearance of a link that has been visited */ color: #008800; text-decoration: none; } a:active { /* Appearance of a link while the user is holding down the mouse button over it. */ color: #CC0000; text-decoration: underline; } a:hover { /* Appearance of a link while the mouse is over it but the button is not pressed. */ color: #990000; text-decoration: underline; cursor: pointer; } /* A style can be applied to multiple selectors -- separate the selectors with commas. Here, all <h1>, <h2>, and <h3> elements are set to have color #CC0000. (Note that the color can be overridden in the HTML page itself for individual headlines.) */ h1, h2, h3 { color: #CC0000; /* text-align: center; */ /* uncomment to center headlines */ } /* The <div> and <span> tags are especially good for styles, since their only real purpose is to apply a style to a section of the page (<span> within a paragraph; <div> applying to several paragraphs, headlines, etc.) The selector "div.signature" will apply only to div tags that specify a class attribute with value "signature" as in <div class="signature">David Eck, 20 September 2003</div> */ div.signature { text-align: right; font-size: smaller; } /* You can also use a class by itself as a selector; then it applies to any tag with the specified class. The following style could be used, for example, with a headline: <h2 style="emphatic">Hello World</h2> or with paragraphs: <p style="emphatic" align=center>This is imporant</p> */ .emphatic { font-weight: bold; text-transform: uppercase; /* other values: lowercase, capitalize */ background-color: #FFDDDD; color: #800000; padding: 3pt; /* Extra surrounding space, so that background color extends out a bit around the text */ } /* To show the versitility of CSS, the following specifications set styles for just the first letter/line of paragraphs that immediately follow h2's. (Works in Mozilla, but not in Internet Explorer.) */ h2 + p:first-letter { font-size: 150%; } h2 + p:first-line { text-transform: uppercase; } span.bnf { font-weight: bold; color: #00BB00 }