E-mail this pageStylesheets: Theory
CSS stands for Cascading Style Sheet. Cascading Style Sheets are really just definitions governing the way that standard (and customized) HTML elements will be drawn on the screen. By using Cascading Style Sheets, you free yourself of many of the defaults that often seem to be imposed by HTML editing packages, and you put yourself in the position of creating sophisticated, attractive page layouts. More significantly, because a single CSS file can be referred to by countless web pages, the Cascading Style Sheet format gives you the power to change the look of an entire web site all at once--all pages making that refer that that single style definition will take on a new appearance when that one style definition is altered. The use of a consistent style sheet across a web site can speed the creation of that web site and can also (and more importantly) help your site visitors make sense of the information they are examining: information and ideas stand out when they are consistently formatted and presented.
Some problems with incompatible implementations between various browsers do exist, so if you are planning to take advantage of what CSS can offer, you should be sure to test your pages in all browsers that your site visitors might be using.
The formatting of CSS elements is identical whether the style definition appears within an HTML document or as its own file--and the definition could appear in either place. Within a document, the style definition would fall between style tags. For example:
<style type="text/css">
body{ color: black;
background-color: yellow;
font-family: Arial, Helvetica, helv, sans-serif; }
</style>
In the example above, the text color for the document is defined as black, the page background is yellow, and the default font will be a sans-serif font (all of the fonts listed there are sans-serif). The style defnition should appear in the HEAD of an HTML document, between the <head> and </head> tags, along with the title of the document.
Although it is possible, as illustrated above, to write a style definition in the head of your HTML documents, it is much more practical to build a CSS definition in its own file and then to link the HTML document to this CSS file. In this way, a single CSS definition can be brought to bear on numerous web pages, and the definition need not be re-written for each page. The CSS definition is simply linked in the HEAD of the HTML document. To link an external style sheet insert the following anywhere between the <head> and </head> tags:
< link href=" demo.css " rel=" stylesheet " type=" text/css " >
Here, you'd replace "demo.css" with the URL of your style sheet. The external CSS definition could be linked on as many web pages as desired, and, subsequently, a single change to the style sheet would have the effect of changing the appearance of all pages at once. In this manner, you could change the margins, fonts, heading sizes, and background colors for your entire web site with comparatively little effort.
What follows below is a brief introduction to some common CSS definitionsThis is not meant to be a thorough reference to CSS. For more detailed references, there are a few links at the bottom of this page.
Body Style Definition - body
This is the style defining a document's body. Here the background color and default font definitions are set. Note that the definition falls within braces and that every attribute in that definition is separated from the next by a semicolon, just as every attribute is separated from its value(s) by a colon.
body{
background-color: #FEF5DA;
font-family: Arial, Helvetica, helv, sans-serif;
font-size: 85%;
font-weight: normal;
margin-left: 10%;
margin-right: 10%;
color: black;
text-align: left;
}
Note that two of the margin designations are expressed in terms of percentages--these size the margin in proportion to the size of the window on the screen. These margins will vary when the window is resized. Note also that the font and its attributes are set here: Internet Explorer will, unless other HTML element style definitions re-set the font and attributes, maintain these; Netscape 4.x, unfortunately, will not. This means that you're likely to find yourself re-defining the font attributes in subsequent definitions.
Note also that the font-family definition includes not just one font, but several, each separated from the last by a comma. This ensures that if a computer doesn't have the Windows-specific Arial font, it will check for the Mac-specific equivalent, Helvetica, and then the Unix-specific helv, and if none of those are found, resort to whatever default sans-serif font might exist on the system.
Paragraph Style Definition - p
The paragraph style is what the word "Normal" refers to in the drop-down style listing on the Formatting toolbar. The normal style is defined in the style sheet by identifying the attributes that should accompany every paragraph tag (<p>). In the style sheet, the definition appears as follows:
p{
margin-top: 5px;
margin-bottom: 5px;
font-family: Arial, Helvetica, helv, sans-serif;
font-size: 10pt;
font-weight: normal;
color: black;
text-align: left;
}
The paragraph style here adds little that's wholly new, except that it stipulates the amount of space to leave before (margin-top) and after (margin-bottom) each paragraph; here, this measurement is supplied in terms of pixels (px). Pixels (dots on a screen) will vary from system to system, so the actual distance is a bit arbitrary. It's perhaps more advisable to use a value in terms of "ems"--a value indicating the height of the font. But I live dangerously.... The font size is here specified as 10pt--this means the font will appear as 10pt no matter which browser is being used. It's also possible, as is done in the "body" example, to specify fonts in terms of percentages--a font size of 100% should be the equivalent of the default font size for the browser.
Among the elements not included in the definition above are
- text-indent (which can have a value expressed in terms of pixels [5px], in terms of percentages [15%], or in terms of ems [1em is the equivalent of the height of the font]);
- background-color, if the paragraph color is to differ from the page background color (which can be represented in hexadecimal RGB notation [ask me about this] or by using natural language [blue, yellow, red, white, beige, etc]); and
- border (which doesn't work with Netscape 4.x, so is best avoided.)
Heading Style Definitions - h1, h2, h3, h4, h5, h6
Structurally, the most significant heading is h1 (heading 1); the others, each a level of subheading under the last, should presumably grow progressively (regressively?) smaller in appearance. Your best bet for ensuring that this works out is to work with percentages: set the first heading level's font size to 135% (of the default font size), and then set each lower level to be 5% smaller. Bear in mind that you shouldn't when using headings, skip a level and jump from heading level 1 to heading level 3. (This wouldn't make sense structurally, and shouldn't be done just because it may meet the aesthetic you're looking for.)
Otherwise, it is, of course, also possible to set the font sizes for the headings in pt values.
h1{
font-family: Arial, Helvetica, helv, sans-serif;
font-weight: normal;
font-size: 135%;
font-weight: normal;
color: black;
text-align: left;
margin-top: 15px;
margin-bottom: 5px;
}
In this sample definition for heading 1, you'll notice that there's more space left to the top of each heading (margin-top) than beneath it (margin-bottom). This is done because there's usually a greater need to separate a heading from what precedes it than from what follows it.
The headings could as easily have altered in color as well, but doing so sometimes confuses rather than clarifies their significance on a page.
The Example Style - a custom style
The style definition used for the indented examples on these pages relies on percentages in defining the left and right margins, and it sets a background-color element as well. It's not a particularly stunning example, but it serves to illustrate that style definitions are not limited to defining the appearance of existing HTML tags like BODY, P, H1, H2, etc.
.Example {
background-color: white;
font-family: Arial, Helvetica, helv, sans-serif;
font-weight: normal;
font-size: 10pt;
color: blue;
text-align: left;
margin-left:10%;
margin-right: 10%;
}
Because this is a custom definition and not tied specifically to any given HTML tag, its name (Example) is preceded by a period. The rest of the definition is not substantially different from the others already outlined on this page. The margins are set relative to the margins already defined in the body tag.
It bears noting here that the appearance of the elements defined in the style sheets will sometimes differ depending on the browser. The background-color setting, specifically, is handled differently in Netscape than it is in Internet Explorer. IE 4.0 (or better) draws a background color (as is used in the examples on this page) as a solid box spanning the region defined by the margins of the element; Netscape 4.x, on the other hand, applies the background color only behind the actual characters in the text using that style definition. Netscape's implementation is rather unattractive.
Citation style definition - another custom style
Academic work involves bibliographic references, and these often require a hanging indent with the first line of each entry aligned to the left margin and subsequent lines indented. The citation style definition below provides that format.
.Citation{
font-family: Arial, Helvetica, helv, sans-serif;
font-weight: normal;
font-size: 10pt;
color: blue;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5%;
text-indent: -5%
}
You'll notice that in this definition, the left margin is defined as being 5% and that the text indentation is defined as being -5%: the result is that the first line will appear at the page default indentation as defined in the body style, and all other lines will appear at a 5% level of indentation. The indentation will always be calculated as a percentage of the window size: resizing the window will re-adjust both the left margin and the amount of indentation. Some sample entries:
Brontë, Emily. Wuthering Heights . Ed. William M. Sale, Jr. and Richard J. Dunn. Norton Critical Edition. New York: Norton, 1990.
Friesen, Peter. "Jane Eyre 's Conservative Canadian Cousin: The Nymph and the Lamp ." Studies in Canadian Literature 15:2 (1990): 160-173.
Huppé, Bernard F., and Jack Kaminsky. Logic and Language . New York: Alfred A. Knopf, 1957.
Hyperlink styles - a:link, a:active, a:visited, a:hover
As a final example of a style definition, the anchor tag that governs the appearance of hyperlinks bears mentioning. It can take four qualifiers: link, active, visited, and hover. Each of these defines a particular hyperlink state: a:link defines how the link should appear by default; a:visited defines how the link should appear to someone who has already visited the page; a:active defines how the link should appear when the linked page is currently on the screen; and lastly, a:hover defines how the link should respond when the mouse is passed over it. The a:hover and a:active definitions are without effect in Netscape 4.x, but works in Internet Explorer 4.x or better. Netscape 6.x will support for the a:hover definition.
a:link{
font-family: Arial, Helvetica, helv, sans-serif;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
color: blue;
}
a:active{
font-family: Arial, Helvetica, helv, sans-serif;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
color: orange;
}
a:visited{
font-family: Arial, Helvetica, helv, sans-serif;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
color: red;
}
a:hover{
font-family: Arial, Helvetica, helv, sans-serif;
font-size: 10pt;
font-weight: normal;
background-color:yellow;
text-decoration: none;
color:blue;
}
Most of the material in the definitions has been discussed at an earlier point in this text: the sole new element is the text-decoration attribute, which is here set to none . This has the effect of removing the default underlining from the hyperlinks. A visitor using Internet Explorer 4+ or Netscape 6+ would find that the hyperlinks on the page all get highlighted with a yellow background whenever the mouse passes over them, thanks to the setting of a background-color in the a:hover definition. The netscape user would not notice any change. The differences in the browsers' handling of the style definitions is a nuisance, and it leads us directly to the next section.
Some styles just won't work
Unfortunately, while cascading style sheets do give you the option of creating interesting layouts and employing consistent styles throughout a web site, it's just not possible to anticipate precisely which web browser a visitor to your site may be using. As a consequence, there's some risk that the styles will appear inconsistently, won't appear at all, or worse yet, will bring the browser to a crashing halt. IE 3, IE4, Netscape 3, and 4.51 all respond slightly differently to CSS definitions. It's rare that trial and error becomes the official advice offered on these pages, but that's what it comes down to more often than not.
The style sheet for these pages
A model of the style sheet once used on the instructional technology pages appears below.
Some useful links
A wealth of information on Cascading Style Sheets is available on the Internet. A short list of references appears below:
http://www.projectcool.com/developer/cssref/index.html
http://www.w3.org/MarkUp/Guide/style.html
http://www.w3.org/TR/REC-CSS2/Overview.html
http://www.css.nu/pointers/bugs.html
Next Steps
After you've reviewed the materials on this page, you'll be ready to go on to the section of this site that shows how you can build a Cascading Style Sheet without memorizing all the stuff that appears here: Using FrontPage to Build Style Sheets.
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.