CSS > Syntaxe

Règle CSS = 1 sélecteur et une ou plusieurs déclarations

Exemple : règles CSS et commentaires

/* style pour les
   titres de niveau 1 */
h1 { color : blue; font-size : 18px; }

/* style pour les paragraphes de texte */
p {
  /* couleur */
  color : green;
  /* taille du texte */
  font-size : 14px;
}

Sélecteur d'éléments XHTML

Exemple : mettre en rouge tous les paragraphes de texte

p {
  color : red;
}

Exemple : utiliser la police Arial pour les titres de niveau 1

h1 {
  font-family : Arial;
}

Sélecteur "id" pour spécifier le style d'un élément XHTML unique

Exemple : seul l'élément ayant pour id "introduction" est concerné par la règle CSS

<style type="text/css">
#introduction {
  color: blue;
  font-family: "Comic Sans MS";
}
</style>

<p id="introduction">Quod opera consulta cogitabatur
astute, ut hoc insidiarum genere Galli periret avunculus,
ne eum ut.</p>

<p>Quod opera consulta cogitabatur
astute, ut hoc insidiarum genere Galli periret avunculus,
ne eum ut..</p>

Attention, un identifiant "id" ne soit pas commencer par un chiffre.

Sélecteur "class" pour spécifier le style d'un groupe d'éléments XHTML

Exemple : tous les éléments ayant pour class "paragraphe" sont concernés par la règle CSS

<style type="text/css">
.paragraphe {
	color: blue;
}
</style>

<p class="paragraphe">Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut.</p>

<p>Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut.</p>

<div class="paragraphe">Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut..</div>

Exemple : tous les éléments de type "p" ayant pour class "paragraphe2" sont concernés par la règle CSS (l'élément "div" n'est plus concerné)

<style type="text/css">
p.paragraphe2 {
	color: blue;
}
</style>

<p class="paragraphe2">Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut.</p>

<p>Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut.</p>

<div class="paragraphe2">Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut..</div>

Attention, un nom de classe ne soit pas commencer par un chiffre.

Grouper des sélecteurs pour les éléments devant avoir le même style

Exemple : les éléments h1, h2 et p ont la couleur rouge, de même pour les éléments ayant la class "paragraphe" et l'élément ayant pour identifiant "introduction".

h1, h2, p, .paragraphe, #introduction {
	color: blue;
}

Sélecteur contenu dans un autre sélecteur

Exemple : seuls les éléments p contenu dans l'élément ayant pour identifiant "conteneur" sont concernés.

<style type="text/css">
#conteneur p {
	color: blue;
}
</style>

<div id="conteneur">
  <p>Quod opera consulta cogitabatur
  astute. Ut hoc insidiarum genere Galli periret avunculus,
  ne eum ut.</p>

  <p>Quod opera consulta cogitabatur
  astute. Ut hoc insidiarum genere Galli periret avunculus,
  ne eum ut.</p>
</div>

<p>Quod opera consulta cogitabatur
astute. Ut hoc insidiarum genere Galli periret avunculus,
ne eum ut.</p>