|
What's all this about cascading style sheets?
Review by Stevi Deter Note: To display the examples in this article, your browser must support style sheets. I mentioned in my review of HTML 4.0 that one of the benefits of this new standard is the codification of cascading style sheets (CSS). "Great!" you say. "So, what exactly are cascading style sheets?" CSSs are the answer to the prayers of web designers who would like an easy way to maintain a consistent look across a Web site, and also be able to change that look with a minimum of hassle. Style sheets rank with HTML in ease of design. A style sheet is a text file, usually saved with a .css extension. In general, a style sheet lists the specific properties that certain elements (HTML tags) are to have when they are called. An example of a style sheet that defines the BODY tag is below:
BODY {This style sheet would set the BODY tag to have text in a light, sans-serif font, displayed in aqua on a teal background. How that we've created this style sheet, how would we actually use it? There are two main choices: a style sheet can be inserted directly into an HTML file, or it can be included via a LINK tag. If you only want to use your styles in one page, you may want to go with defining the styles in the document itself. This would be your choice if you were only concerned with one or two HTML pages, and wanted to have a unique style that would normally require entering in the same tags over and over. You can insert a style definition in the head or the body of an HTML document. Inserting the definition in the head will make it apply to the whole document. Within the HEAD tags, use the following:
<STYLE type="text/css">This code will make all H3 tags in the document display as Courier in bold and red. If, for some reason, you'd rather include your style definition in the body, you could use the following code to create the same effect as the heading STYLE tag shown above:
<H3 style="font-family: Courier; font-style: bold; color: red">Click to see what this code would produce. The main use of style definitions in the body would most likely be for DIV tagged sections. If you want to create a style for use on a whole Web site, you'll want to link to an external css file. This can be accomplished by adding a LINK tag to the head of each HTML document to which you want to apply the style. The code would look like this:
<LINK rel="stylesheet" type="text/css" href="test.css" title="style1">Here is a plain HTML file, and here is one with an external link to a style sheet. The individual entries in the style sheet would look like the first code example in this article. So now that we've gone through the basics, you must be saying to yourself, "Sure, style sheets are nifty, but what's 'cascading' got to do with any of this?" The reason these are called "cascading" style sheets is that they can be nested. You could link to an external style sheet to provide the basic look and feel for your Web page, but a special page might warrant some extra style, which you could provide with a STYLE tag or styles as part of a DIV tag. There is also an @import command that can be used to import multiple style sheets. As of now, there are still bugs in its implementation in both Netscape Navigator and Microsoft Internet Explorer. This brief overview should give you plenty to go on to start developing your own style sheets. I have just one request. Please don't make one that has aqua text on a teal background. That's just wrong.
|
t h e n e t n e t
|
t h e g a l l e r y
|
m u s i c
|
f o o d & d r i n k
w e b s c h m e b
|
b o o k s t o r e
|
r e a d m e
|
f e e d b a c k
|
s u b m i t