Classes and IDs

Classes

A web designer might want to assign different styles to the same tags. For this reason, the CSS specifications introduced the concept of classes.

The definition of classes is as simple as that of styles. It involves specifying a selected tag (as with declaring the style), then adding a decimal point (.) and the name that you want to give the class. The name of the class may be composed of letter, digits, and dashes:

Tag_selector.Name-of-class {
			style property: Value;
			style property: Value;
			...;
											}

Where "Name-of-class" represents the name given to the class.

Invoking a class

To invoke a class within the HTML code, just add the class attribute to a tag:
For the class red applied to tag b:

B.red {font: Verdana 12px; color: #FF0000; }

<B class="red">Text that will be red and in bold</B>

Universal classes

It is possible to not specify a tag, in which case the class may be used in any tag in which the style selected has meaning. These are called universal classes (sometimes independent classes). Such a class is defined by putting a decimal point before the name of a class:

.Name-of-class {style property: Value; style property: Value; ...}

For the class "major":

.major {font-type: arial; color: red; font-weight: bold}

Invoking this class can be done using any HTML element in which the definition is valid:

<h1 class="major">This is a warning</h1>
<i class="major">(Please read carefully)</i>

Note the absence of a decimal point when invoking the class.

Pseudo-classes

Pseudo-classes are used to further improve the style applied to certain tags, by defining how they react to an event or their relative position within other tags.

Unlike classes, the names of pseudo-classes are predefined, so it is impossible to create your own pseudo-classes. There are several types of pseudo-classes :

• Dynamic pseudo-classes,
• Link pseudo-classes,
• Language pseudo-classes,
• First-child pseudo-classes,
• Page pseudo-classes,
• Pseudo-elements.

Dynamic pseudo-classes

Dynamic pseudo-classes are used to change the style of a tag when an event occurs (such as moving the mouse, clicking, or pressing a key). There are three of them:

• The pseudo-class :hover is used to apply a style to a selected tag when the mouse cursor hovers over the text:

  A:hover {font-decoration: underline;}

• The pseudo-class :focus is used to put a selected tag into a certain style when it is being focused on (such as when an element in a form is clicked on):

  TEXTAREA:focus {color: #FF0000;}

• The pseudo-class :active is used for putting a selected tag into a certain style when the user clicks on the element (between the moment the user clicks on the mouse button and the moment they release it):

  A:active {color: #FF0000;}

Dynamic pseudo-classes are not rendered the same way by all browsers.

Link pseudo-classes

Link pseudos-classes are pseudo-classes used with the <A> tag:

• The pseudo-class :link is used for defining the style of hyperlinks which the user has not yet clicked on.
• The pseudo-class :visited is used to define the style of hyperlinks which the client has already visited.

Some browsers might consider a link to be unvisited if it has not been clicked on for a long period of time.

The descendant pseudo-class

A descendant pseudo-class is used to apply a style to the first tag within an element. This pseudo-class's syntax is as follows:

Parent_Element > Tag:first-child {style;}

P > A:first-child {color: #00FF00;}

<P align="justify">
  <A href="http://en.kioskea.net/">CCM</A>
  </P>

<P align="justify">
  <BR/>
  <A href="http://en.kioskea.net/">CCM</A>
  </P>

Text pseudo-classes

Text pseudo-classes are used to apply a style to a portion of text delimited by the appropriate tags. For this reason, text pseudo-classes are generally used in conjunction with the paragraph tag (<P>).

There are two text pseudo-classes:

• :first-line: used for applying a style to the first line of a paragraph.

  P:first-line { text-transform: uppercase }

• :first-letter: used for applying a style to the first letter of a paragraph in order to produce a typographical effect. The following example doubles the font size and bolds the first letter of a paragraph:

  P:first-letter { font-size: 200%; font-weight: bold; }

Language pseudo-classes

A style can be defined based on the document's language (specified in the HTTP header or the metatags) or the language of an HTML or XML element (specified with the optional attribute LANG) if it is given.

A language pseudo-class uses the following notation:

• :lang(Langue). The following language pseudo-class is used if, for whatever reason, you wish to use French-style quotation marks:

  HTML:lang(fr) { quotes: '« ' ' »' }

Page pseudo-classes

The selector @page is used to change the layout settings of an HTML page when the page is printed, such as the margins (margin-left, margin-top, margin-right, margin-bottom) or the size (size). To do so, the web page must be imagined as a series of pages in a printed work.

The page pseudo-classes are used to select left-hand and right-hand pages, or the first page in a document.

There are different page pseudo-classes:

• @page:left: used to set properties for left-hand pages.

  @page:left { size: landscape; margin-left: 2cm; }

• @page:right: used to set properties for right-hand pages.

  @page:right { size:landscape; margin-left: 2.5cm; }

• @page:first: used for defining the properties of the first page in a document.

  @page:first { size: portrait;
  								margin-left: 2.5cm;
  								margin-right: 2cm;
  								margin-bottom: 1cm;
  								margin-top: 4cm;}

ID selectors

ID selectors (identifiers) are used to reference a single page element as indicated by its identifier. IDs are mainly used to isolate HTML elements with JavaScript.

An ID selector's syntax is:

#nom_ID { style }

This style is called in the following manner:

<BALISE ID="nom_ID" > ... </BALISE>

There can be only one ID per page! Also, note the absence of the # when invoking the ID selector.

Last update on Thursday October 16, 2008 02:43:13 PM.This document entitled « Style classes (CSS) » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the licence, as this note appears clearly.