The style classes (CSS)

ENBR November 2017

Classes and IDs

The classes

It may be interesting to assign different styles to the same tags.
For this, the CSS specifications introduced the concept of class.

The definition of classes is as simple as that of styles. It consists
specify the selected tag (as a style statement)
then add a point (.) And the name you want to give to the class. The name of the
class may consist of letters (accents or not), numbers and dashes:

Selecteur_de_balise.Nom-of-the-class {
style property: value;
style property: value;

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

Calling a class

To call a class in the HTML code, just add an attribute class to the tag:
Of the class Red applied to the tag b :
B.rouge {font: 12px Verdana; color: # FF0000; }

Calling this class in the code will be as follows:
Text to be bold red

Universal classes

You can not specify tag, in which case the class can be used
in any tag for which the style selected has meaning! We speak then
of universal class (sometimes independent class). The definition of such a class is done before
simply the class name of a point:

.Name-of-the-class {style property: value; style property: value ...}

Either the "important" class following:
.significant deviation {font: Arial; color: red; font-weight: bold}

Calling this class can be made from any element
HTML for which the definition is valid:

Please note this is a warning

(Please take this into account)

notaNote the lack of point in the call to the class.


Pseudo-classes can refine the style applied to a
number of tags by defining a reaction to an event
or the relative position of the tag within other tags.

Unlike classes, the names of pseudo-classes is
predefined, it is not possible to create its own pseudo-classes.
There are several types of pseudo-classes:

  • Dynamic pseudo-classes
  • The link pseudo-classes
  • The language pseudo-classes,
  • The pseudo-first-child classes,
  • Pseudo-classes page,
  • Pseudo-elements.

Dynamic pseudo-classes

Dynamic pseudo-classes are used to change the style of a feature tag
an event (mouse move, click, or press a key on the keyboard).
There are three:

  • The pseudo-class : hover to assign a style to the tag

selected when hovering the mouse:
A: hover {font-decoration: underline;}
  • The pseudo-class : focus to define a style tag

selected when the focus is given (for example when a
click on a form element):
Textarea: focus {color: # FF0000;}
  • The pseudo-class : active to define a style tag

selected when the user clicks on the element (between the time the user
click on the mouse button and when it releases it):
A: active {color: # FF0000;}
notaDynamic pseudo-classes are not recognized in the same way by all browsers.

The link pseudo-classes

The link pseudo-classes are specific pseudo-classes
the tag  :

yet been consulted by the customer
  • The pseudo-class : visited to define the style of hyperlinks

the client has already visited
notaIt is possible that some browsers consider a link as not having been visited if it is not accessed for a long period of time.

The downward pseudoclass

A pseudo-class down lets you apply a style to the first
tag within an element.
The syntax of this pseudo-class is as follows:

Element_Parent > Tag: first-child {style;}

Thus the following statement applies to the first tag
located in a set of tags


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

In this way, the tag
Next possess the
style above:


The tag
Next will by cons ignored because it is not
not the first tag after the



The text pseudo-classes

text pseudo-classes allow you to apply a style to a party
text delimited by the tags to which they apply. So
pseudo-classes of text are generally used together
with the paragraph tag (


There are two text pseudo-classes:

  • : First-line : You can apply a style to the first line of a paragraph.

P: first-line {text-transform: uppercase}
  • : First-letter : You can apply a style to the first

letter of a paragraph to produce a typographical effect. The following example
for example doubles the size and bolds the first letter of a paragraph:
P: first-letter {font-size: 200%; font-weight: bold; }

The language pseudo-classes

You can define a style based on the language of the document
(Specified in HTTP headers or meta tags)
or the language of an HTML or XML element (specified by
the optional attribute LANG) If it is specified.

A pseudo language class uses the following notation:

  • : Lang (description). Pseudo following language class defines the quotation marks

according to French rating

HTML: lang (en) {quotes: '' '' ''}

The page pseudo-classes

The selector @page is used to change the layout definition of a
HTML page (size, margin, etc.) for printing, such as margins (margin-left, margin-top, margin-right, margin-bottom)
size (size).
We must then imagine the web as a set of pages constituting a paper book.

Pseudo-classes page and used to select the left-hand pages, from right
or the first page of a document.

There are different classes of pseudo-page:

  • @page: left : Set the properties of pages left.

@page: left {size: landscape; margin-left: 2cm; }
  • @page: right : Set the properties of the right pages.

@page: right {size: landscape; margin-left: 2.5cm; }
  • @page: first : Set the properties of the first page of a document.

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

ID selectors

The ID selector (identifier) ​​is used to refer to a
single element of a page identified by its identifier.
The ID used in particular to locate HTML elements thanks
in JavaScript.

The syntax of an ID selector is as follows:

{#nom_ID style }

Such a style is called as follows:


The style classes (CSS)There can be only one ID per page! also note
no # in the call to the ID selector.

See also

Download this article (PDF)
download this article (PDF