Guide To Cascadinging Style Sheets.
Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in
A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:
The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,
Classes may also be declared without an associated element:
In this case, the note class may be used with any element.
A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.
ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:
This would be referenced in HTML by the ID attribute:
Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in
is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.
A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.
The declaration value is an assignment that a property receives. For example, the property color could receive the value red.
In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:
Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.
There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.
Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:
Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.
Rules with pseudo-classes or pseudo-elements take the form
Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:
Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.
An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:
First Line Pseudo-element
Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:
First Letter Pseudo-element
The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:
would create a drop cap three times the normal font size.
When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.
Maintained by Nick Grant < email@example.com >
Copyright © 2000 Nick Grant. All Rights Reserved.