Monday, November 19, 2007

How to work with Selector

How to work with Selector

To work with Selector

Unlike in a printed document, the structure of an HTML page determines the formatting. Tags that identify the position within that structure enclose the content makes it difficult to address individual items of text for formatting, thus creating a need for a different addressing mechanism. CSS1 uses selectors to solve that problem. A selector is a string of code that identifies what elements that the corresponding rule applies to. It connects the HTML page with the style sheet.

Selectors may have several components:

  1. Tags: All HTML tags are possible selectors. If you use a selector, the enclosing greater than (>) and less than (<) characters is removed.

  2. Classes: All elements inside the BODY section can be classed by adding a CLASS attribute. Classes can then be addressed in the style sheet to apply the formatting rules. A class definition consists of a period followed by string of text and a rule.

Two major classes of selectors are used with cascading style sheets:

  1. Simple Selectors match elements based on the element type and/or attributes, not the element’s position in the document structure. H1 (all level 1 headers) and H1.headline (all level 1 headers with the CLASS attribute.headline) are example of the simple selectors.

  2. Contextual Selectors match elements based on the position in the document structure. A contextual selector consists of several simple selectors; H1.headline B (all level 1 headers with the CLASS attribute.headline and bold typeface) is an example of a contextual selector consisting of two simple selectors, H1.headline and B. Future versions of Go-Live will support contextual selectors.

The ID selector is a special case that allows setting style properties on a per-element basis. It addresses a single element within the HTML document by adding an ID attribute with an alphanumeric identifier. In the style sheet, the same identifier is combined with a rule to apply special formatting. An ID definition consists of a pound sign (#) followed an alphanumerical identifier and a rule


No comments: