HTML Comment Delimiters
|
| ||||
| ||||
|
|
In tutorial 5, we saw that you can insert
a stylesheet into an HTML document using the STYLE element.
This causes a few problems, however, as older browsers that don't
understand the STYLE element might display the style sheet
if it is embedded in this way. For this reason, an HTML comment start
delimiter (<!--) can be inserted at the top of the
document, and an end delimiter (-->) at the end. This
does not cause a problem for newer browsers since the entire contents of
the STYLE element are processed as CSS and not as HTML, so
the comment delimiters are simply ignored by the CSS parser. Here is an
example of a STYLE element containing a style sheet that
begins and ends with HTML comment delimiters:
<STYLE TYPE="text/css">
<!--
H1 {
text-align: center;
color: red;
}
ADDRESS {
color: green;
}
-->
</STYLE>
Rulesets
Going back to statements, I mentioned that these can either be rulesets or at-rules. A ruleset begins with a selector followed by a block containing a number of declarations. I introduced selectors in the previous tutorial and we will discuss their syntax in more depth in this tutorial. Here is an example of a ruleset:
H1.special {
background-color: gray;
color: green;
}
H1.special is the selector, and the rest is a block
containing two declarations. Declarations themselves consist of a
property and a value, separated by a colon (:), and are
separated by semi-colons (;). To illustrate the use of
whitespace, the above ruleset is equivalent to the following:
H1.special { background-color: gray ; color: green }
Each level of CSS defines a few types of selector syntax and a few properties and their possible values. If a browser encounters a selector it doesn't understand it should ignore the whole ruleset. If a browser encounters a property or value it doesn't understand, it should ignore the declaration but process the rest of the ruleset. In this way, stylesheets written with newer levels in mind can be partially processed by older browsers, that will process only what they understand and ignore the rest. Understanding how to use properties and their values is the main part of learning the use of CSS, and after this tutorial, we will focus on various types of properties.
At-rules
While rulesets have the purpose of specifying the rendering of
various elements, at-rules are used for more general purposes in a
stylesheet. An at-rule begins with an at-sign (@) and an
identifier (a series of letters, to simplify things) and includes
everything up to and including the next semicolon or block. Thus, the
following is an at-rule:
@import url("colorful.css");
As is the following:
@media print {
background-color: transparent;
}
Note that the second example is not a rule-set,
though it may look like one; @media print is not a
selector, since it starts with an at-sign (@). The
interpretation of the stuff after the identifier depends on the type of
identifier - @import at-rules have different syntax than
@media at-rules or any other kind of at-rule.
Finally, there is a special syntax rule, that all
@import at-rules must be at the very top of a style-sheet,
preceded only by whitespace or comments.
