Règles CSS

Définition

Une CSS se compose d'une liste ordonnée de règles, chaque règle comprenant :

  • un sélecteur qui fixe sur quels éléments HTML s'applique la règle,

  • un ensemble de couples propriété-valeur qui définit la valeur de la propriété.

Syntaxe

1
element1 {
2
  property: value;
3
  property: value;
4
  ...
5
}
6
7
element2 {
8
  ...
9
}
Exemple
1
h1 {
2
  font-family: Arial;
3
  font-size: 150%;
4
  margin-bottom: 10px;
5
}
6
7
ul {
8
  list-style-type: circle;
9
  font-style: italic;
10
}
11
12
p {
13
  border: 1px dotted gray;
14
}
RemarqueCascading Style Sheet
  • Le terme cascading signifie en cascade. En pratique cela permet de déclarer plusieurs règles les unes après les autres concernant le même élément. Les règles s'ajoutent les unes après les autres, en cas de définition contradictoire, c'est la dernière exprimée qui remporte.
  • Il est possible de définir une règle commune à plusieurs éléments.
Exemple
1
h1 {
2
  font-family: Arial;
3
  font-size: 150%;
4
}
5
6
ul {
7
  list-style-type: circle;
8
  font-style: italic;
9
}
10
11
p {
12
  border: 1px dotted gray;
13
}
14
15
p, ul {
16
  color: blue;
17
}
18
Complément
Il est possible de déclarer directement le style d'une page HTML au sein de cette page (feuille de style internalisée), en utilisant la balise <style>.
developer.mozilla.org/fr/docs/Web/HTML/Element/style
Dans le cas général on préfère une déclaration externalisée qui permet la réutilisation des CSS.