1. Here are four ways to attach a style to your text:
A. You can specify a style for any element, as is usually done for older
browsers. For example, you can type for each paragraph:
<p><font-face="Arial, Helvetica, sans-serif"> to make sure the paragraph or other selected text is displayed in that style.
B. You can embed a style sheet in between the <head> and </head> tags. To make sure the style sheet is not displayed by older browsers, type the style definitions between <!-- comment lines -->. After your doctype declaration and <html> tag the structure would be:
Don't forget to use the comment tags before and after your style specifications so older browsers that don't support style sheets don't garble your code.
C. You can attach an external style sheet to your document. You create the separate style sheet as a document with a .css extension and store it on your site. In between the <head> and </head> tags of your document you link to the style sheet by typing:
<link rel=stylesheet href=stylefile.css type="text/css">
where "stylefile" is the name of the style sheet with its .css extension. Note that the "text/css" must be within quotation marks. This one line takes care of the entire page. Note that if you go on to do xhtml, you will always need to link rather than embed your style sheet.
D. You can import a style sheet from another location by typing the link in between the heads as:
where "nameof stylefile" is the file name on the site where the stylesheet is stored. The ability to do this will someday mean that people can create and offer a complete stylized look for a page. Web designers will be able to simply link to the style sheet kept somewhere on the web. If you look at the source code for http://www.ohlone.cc.ca.us/people/DWang, you will see that I imported a style sheet from the W3C. See how differently the page displays in Netscape and Explorer. Since the style sheet is from the W3C, I am confident that the style sheet is correct and that the problems with display are because the browser doesn't support all the features of a style sheet.
2. You specify font-family so that if a computer does not have the font you have chosen it can fall back to an alternative. Most PCs display their sans-serif font as "Arial" while Macs use "Helvetica". So it is important to always name both.
3. The "em" refers to the height of the element's font. This is useful since you can specify other font sizes relative to the basic font size. For example, if you set the font size for p tags as 10pt you can define the h1 tag as 2em. W3C recommends using relative units like this so that they adjust to the variety of monitors. For more information about "em" see "Understanding Em" by Daniel Will-Harris at Web Review.
4. The "line-height" controls what is typographers call "leading", the space in between lines. This is the measure from the bottom of one line to the bottom of the next. Like the font-size, this can be done with absolute or relative values. It is good to have a generous line-height for text on the web. Style sheets enable you to have a 130% line-height like this page, for example. The default for most browsers is more like 120%.
Copyright by dwang, 1999, 2000. All rights reserved.