CSS Levels & Global Syntax (cont.) - How do I Select Thee, Let Me Count the Ways - HTML With Style

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.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial6/3.html
Created: September 24, 1998
Revised: September 24, 1998