Using Style SheetsNotice anything different?With a click of the mouse, the background color and the fonts used in the headings was changed. This page uses an embedded style sheet, placed in the head of this page only. However, an external style sheet should be used if the style is to be applied to numerous pages. With an external style sheet, the web designer can change the look of an entire site by simply changing one file. To use an external style sheet, create a blank document with the ending .css. It should NOT have any HTML markup. In the example below, it is named style.css. Then place a link in the head of your HTML document, like this: <link rel="stylesheet" href="style.css"> The rel attribute is set at the value "stylesheet" so the browser will recognize that the href attribute is giving the URL for your style sheet. In this example: <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> the optional TYPE attribute is used to specify a media type (text/css) giving browsers the opportunity to ignore style sheet types they do not support. The MEDIA attribute is also optional. This specifies the media to which the style sheet should be applied. Possible values are:
<body bgcolor="#FFFFFF"> To embed a style sheet on an individual page, place the STYLE element in the document HEAD. To avoid having older browsers mistake the STYLE element as text and displaying it, enclose it in comment tags. (With a linked stylesheet, you don't have to use comment tags.) <STYLE TYPE="text/css"> <!-- body { font-family: Verdana, Times New Roman, Times; background-color: rgb(204,255,204); color: rgb(0,0,102); } --> </STYLE> If you are using an External Style Sheet, but would like to change just one element on just one page, you can use an Inline CSS styles. Inline Styles are inserted into the HTML code, not the HEAD and affects only the element specified.. For example: your external style sheet has your font set to 12 px Verdana but you would like a particular paragraph to be set to 16px Times New Roman. The code you would use would look like this: <BODY> 12 px Verdana text <p style="font-family: times; font-size: 16px;">16px Times New Roman text</p> 12 px Verdana text </BODY> What else can you do with CSS?You can set Font Properties, such as font family (which font will display), font style (italics), font variant (large or small letters), font weight (bold) and font size. Let’s look at this example of embedded STYLE.<STYLE TYPE="text/css"> <!-- BODY {margin-top: 0; font-family: verdana, helvetica, geneva, sans-serif;} A:link, A:visited, A:active { text-decoration: none; font-weight: bold } A:hover { color: #ffffcc; } B { color: rgb(51,204,0) } H1 {font: bold 32px verdana, helvetica; margin-top: 10px;margin-bottom: 2px;} H2 {font: bold 24px verdana, helvetica; margin-top: 10px;margin-bottom: 2px;} H3 {font: bold 18px verdana, helvetica; margin-top: 10px;margin-bottom: 2px;} H4 {font: 14px verdana, verdana,helvetica; color: #333333;} P {font-family: verdana, geneva, sans-serif; line-height: 150%;margin-top: 0; margin-bottom: 10px;} --> </STYLE> What’s going on here? You should have recognized the <STYLE TYPE="text/css"> and the <!-- comment tag -->. The rest of the Style Sheet specifies font faces, sizes, and leading, which is the vertical space in between lines of text. The first line gives information about the BODY of your web page. Your top margin will be flush against the top (margin-top: 0), and the default font will be Verdana. If Verdana is not available on your visitors browser, the font will be helvetica or, failing that, geneva or any generic sans-serif font. The second line gives information about the four types of links found in a web page.
The next four rules give definitions for the headings. H1 will be shown in bold, 32 pixel Verdana with 10 pixels above it (margin-top) and 2 pixels below it. (margin-bottom). The P declaration sets the line height at 150%. This refers to the spacing between lines. In this case, the leading will be one and a half times the height of the font. But where is the FONT size specified? There are a number of options for specifying FONT size, each with its good points and bad points. The problem is major browsers show FONT sizes differently. In old style browsers, FONT SIZE=3 is the default size, defined as medium. Netscape assumes FONT SIZE=3 unless you specify another size. Unfortunately, in the IE/Windows scheme, FONT SIZE=3 is small instead of medium. Even modern browsers can't solve this problem as both Mac and Windows define "medium" differently. (Medium on a PC is roughly 1/3 larger than medium on a Mac.) If font size is left unspecified the visitor can easily change the size by adjusting the LARGER/SMALLER type buttons in current versions of Explorer and Navigator. Some designers try to get around this by using one of the seven absolute sizes:
These sizes allow the designer to choose the size of the text relative to the font size the user has specified. The problem with this, however, is that Netscape 4 largely ignores them. Netscape 4.5 and higher and IE3 render xx-small and x-small so itsy bitsy that no one can read them. Another option is points, although points are a unit of print, not a unit of screen space as are pixels. Points are commonly used in word processing packages, e.g. 12pt text. Setting font size in points has the same disadvantages as pixels, but has the advantage of being printer friendly. Macs display point sizes the way point sizes actually look in print; Windows displays point sizes too large. By using pixels, you're forcing the systems to display type at the same size whatever browser is being used. Fonts specified in pixels, as we have done in the example above, will be the same size across platforms but not necessarily the same size from computer to computer because of monitor resolution. In addition, fonts specified in pixels cannot be adjusted by the user, which may make the text difficult to read for some visitors. Added to the fact that some printers don't interpret pixel size properly, and you come to the last option: ems. The size of an em is determined by the user. An em is a unit of distance equal to the point size of a font. For example, in 14-point type, an em is 14pts wide. By using em's you can preserve the general look of the Web page independently of the font size. This is a safer alternatives than pixels or points, which can cause problems for users who need large fonts to read the text. Unless your visitor is using Netscape 4 or IE3. Netscape 4 ignores em's and IE3 misinterprets them as as pixels. Another way to set font that makes it easier for your visitor to resize text in their browser is to use percentages instead of absolute sizes. For example, instead of using 10pt, use 83%. Here is an easy chart for your use:
One problem with this type of specification is that these sizes are "inherited". More information is on the next page. Please note: If you define font-family before color, Netscape will not
recognize it. Here is the way it should look:
What else can style sheets do? |
