|
Using Web Templates for Web Design: Tips and Best Practices--Style Sheets
Linked Style Sheets
While it is very efficient to include style sheet information inside the <HEAD>
section of the HTML file, if you find that you want to use the same styles for
multiple documents, it becomes much more efficient to create the style sheet
in a separate file, and link to it using the <LINK> tag (it
is also a good idea to include the special <META> tag indicating the CSS
level, see example below). Style sheets can be stored in the same directory
as the Web files, or can be linked to from any location on the Web site (local
or remote) as long as you know the URL. Style sheets are saved using the .CSS
extension. See example <LINK> tag below:
<HTML>
<HEAD>
<TITLE>Test page for CSS</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<LINK REL="StyleSheet" HREF="stylesheet.css" TYPE="text/css"
MEDIA="screen">
</HEAD>
Linked (or external) style sheets should not contain any HTML tags. The style
sheet should consist only of style rule statements. A file consisting solely
of
could be used as an external style sheet.
Note: Netscape 4.0 ignores any link tags that use
MEDIA= with any value except SCREEN. However, the
MEDIA= attribute is clearly going to be an important qualifier for providing
different style sheets for different audiences/purposes. For instance, one could
express the fonts in point sizes for printing and in percentages or EMs for
screen viewing. This will work for Microsoft Explorer.
Contextual Selectors
What happens when you want an HTML selector (tag) to use a particular style,
but only when it occurs in the "context" or another selector (tag).
A contextual selector simply places a tag within the context of another in the
style definition. For instance, if you wanted the text of list items (the <LI>
tag) to display in blue for unordered lists (within the <UL>
tag), but you wanted the list items to display in green when used in ordered
lists (within the <OL> tag). This is possible when using
contextual selectors:
OL LI { color: green; }
UL LI { color: blue; }
It is also possible to take this a step further. For instance, if you wanted
the bullets for the first level of list items in unordered lists to be a "square,"
the second level a "circle," and the third level a "disc."
Here is how the contextual selectors would look:
UL { list-style-type: square; }
UL UL { list-style-type: circle; }
UL UL UL { list-style-type: disc; }
Please note that there is no punctuation separating each selector.
|