Exemple 03 : Indentation du code CSS

Explications :

L'indentation d'une règle CSS, et plus généralement sa mise en forme, est soumise à des règles assez souples : comme dans le code (X)HTML il n'est pas tenu compte des caractères blancs (espaces, tabulations, retours à la ligne...) pour la bonne interprétation du code par l'agent utilisateur. La présentation du code CSS est donc à votre convenance.

La première règle CSS est mal indentée, mais elle est correcte, son style est appliqué.

Cependant cette liberté n'est pas totale : vous ne pouvez, par exemple, pas insérer de retour à la ligne, de tabulation ou d'espace pour couper une propriété, ou pour séparer le nombre et l'unité de mesure utilisée...

La seconde règle n'est pas appliquée pour ces raisons : la propriété color est coupée par un retour à la ligne, la propriété font-size et la valeur 'fuchsia' sont coupées par des espaces. Dans ces trois cas le mot-clé n'est plus reconnu et donc le style non appliqué. Enfin le margin n'est pas appliqué parce que dans le bloc de valeur on a séparé une valeur de son unité de mesure ('50 px').

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 03 : Indentation du code CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
#ss-err { color : 
blue;
        font-size :                             1.4em;
        background 
: fuchsia
;
margin : 
                50px
 50px
                                                                50px

                50px;
}

#av-err {
        col
or : blue;
        font-  size : 1.4em;
        background : fuch       sia;
        margin : 50px 50px 50 px 50px;
}
</style>
</head>

<body>

<h1>
Exemple 03 : Indentation du code CSS
</h1>

  <h2>
Code sans erreur :
  </h2>
  <p id="ss-err">
La règle CSS pour ce paragraphe est mal indentée et désordonnée mais le style s'applique tout de même.
  </p>

  <h2>
Code avec des erreurs :
  </h2>
  <p id="av-err">
La règle CSS pour ce paragraphe est également mal indentée et désordonnée mais le style ne s'applique 
pas du fait de diverses erreurs.
  </p>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.