Basic CSS Syntax

Introduction

We start by recalling the basic CSS syntax and how the classes of style rues apply to HTML elements. Then we proceed further, discussing features not mentioned in part one of this tutorial, such as id selectors, grouping of selectors and contextual selection.

Grouping of Selectors

As mentioned earlier, style rules are commonly included in the style element. Style rules have usually the form property:value; and they are grouped under a selector. A selector is a user-chosen name, which is contained in the header of the HTML document, preceded by a period and followed by curled brackets embracing the style rules. The next three lines in the style element were discussed earlier as style rules applied on the global level, the general class level and the class specific level, respectively.


<style> 
   tag{property:value; ...}
   .selector{property:value;  ...} 
   tag.selector{property:value;  ...} 
</style>

Examples of tags are key words like body, h1, h2, h3, h4, h5, h6, p, ul, ol, etc. The pair <tag>...</tag> forms an element and the selector is applied via an attribute, <tag class="selector"> . . . </tag>. Occasionally we want to use the same set of rules with different selectors and tags. This can be achieved by grouping the selectors in front of the brackets containing the style rules, which leads to the expression similar to


tag.selector, tag, .selector, ... {...}

The following class of rules will cause the text to be bold and red


p.warning, p.emphasized, .important{
   font-weight:bold;
   color:red;
}

Identifiers

Next we discuss a set of rules that is unique for an HTML element. Their form is


<style> 
   #name{property:value; ...}
   tag#name{property:value;  ...}
</style>

The number sign, replacing the period from the previous syntax, tells the browser that the set of rules that follows is unique for each tag, where it is used as an id attribute. Adding the tag in front of the number sign further restricts validity of the rules to the tag only. This is easier to explain by example. The following snippet displays a piece of a green text.


<html>
   <head>
      <style>
         #greent{color:green;}
      </style>
   </head>
   <body>
      <h1 id="greent">What is green?</h1>
      <p id="greent">The frog (?)!</p>
   </body>
</html>

After adding h1 in front of the number sign, only the headline will be green. Identifiers can be grouped with other selectors the same way as mentioned in the previous section. An element can have both id and class attributes. That is, the following expression is perfectly legal:


<p id="greent" class="indent"> ... </p>

Contextual Selection

Contextual selection allows restriction of style rules from global, general class and class specific levels, to elements on particular positions in the document tree. An example is much more helpful here. The construct


<style>
   h3 a{font-style:italics}
</style>

will cause each link inside the h3 element have italicized text.

References

C. D. Knukles and D. S. Yuen: Web Applications, Concepts & Real World Designs. Wiley, 2005

Cascading style sheets, level 1 recommendations by WWW Consortium. World Wide Web Consortium , 1996

Cascading style sheets, level 2 recommendations by WWW Consortium. World Wide Web Consortium , 1998

Syntax of CSS rules in HTML's style attribute. World Wide Web Consortium , 2002

W3C CSS Validation Service. World Wide Web Consortium , 2004