Conception & Réalisation de sites Web

Comment définir des styles ?

La syntaxe des CSS

Pour définir un style dans notre CSS, nous précisons l'élément que nous modifions, puis, entre 2 accolades, nous précisons les propriétés modifiées.

Exemple :

mon_element { liste des propriétés ici }

Nous verrons ci-desous que mon_element peut être le nom d'une balise, le nom d'une classe, ou un identifiant.

Pour chaque propriété, nous saisisons toujours le nom de la propriété, suivi du signe «:» (2 points), suivi de la valeur de la propriété. Nous terminons chaque propriétés avec le signe «;» (point-virgule).

Exemple :

mon_element { ma_propriété:valeur_de_ma_propriété; ma_propriété_2:valeur_de_ma_propriété_2; }

La disposition des sauts de lignes et des espaces autour des ":" ou des ";" n'a pas d'importance. On aurait le même résultat avec l'exemple suivant :

mon_element {
   ma_propriété : valeur_de_ma_propriété;
   ma_propriété_2 : valeur_de_ma_propriété_2;
}

Une liste des propriétés et les valeurs possibles sont définies ici : mettre en forme un texte, mettre en forme un bloc.

L'exemple concret suivant rédéfinit l'élément img pour supprimer ses bordures (border) et rédéfinit l'élément body pour supprimer ses marges (margin) et ses enrobements (padding):

img {border:0}
body {margin:0; padding:0}

3 façons de définir des styles

1) Re-définir une balise

Pour cela, nous utiliserons simplement le nom de la balise dont nous souhaitons modifier l'apparence.

Par exemple, nous modifions la couleur du texte (color) et la couleur de fond (background-color) de nos titres h3 ainsi :

h3 { color:#fff; background-color:red;}

2) Définir une classe

Si l'on veut utiliser plusieurs fois la même balise dans notre page Web avec des affichages différents, nous utiliserons des classes. Cela revient à donner un nom de style à un élément HTML et a préciser les propriétés de style pour ce nom dans notre feuille de style.

Cela se fait donc en 2 temps :

  1. Dans notre page HTML, nous allons ajouter un attribut class="nom_de_ma_classe" aux élements que nous souhaitons modifier
  2. Dans notre feuille de style, nous allons définir cette classe ainsi :
    .nom_de_ma_classe { liste des propriétés ici }.

Le "." (point) avant le nom de la classe est très important. Il permet aux navigateur de distinguer la définition d'une classe, de la définition d'une balise HTML.

Exemple, dans ma feuille de style, je mets le code suivant :

.introduction { color:#336699; font-weight:bold; }

Et dans ma page HTML, je mets le code suivant :

<p class="introduction">Mon texte d'introduction ici.</p>
<p>Un paragraphe normal ici.</p>

Ce qui donne dans votre navigateur :

Mon texte d'introduction ici.

Un paragraphe normal ici.

Vous pouvez choisir le nom de classe que vous souhaitez.
Pensez cependant :

  • A ne pas y mettre d'espace ni de caractères spéciaux autre que le tiret
  • A utiliser des noms de classes logiques, qui vous permettent de vous y retrouver !

3) Définir un id, identifiant unique

Les id s'utilisent de la même manière que les classes. On ajoute un attribut à notre balise HTML et on définit les styles pour cet id dans la CSS :

  1. Dans notre page HTML, nous allons ajouter un attribut id="nom_de_mon_id" à l'élement que nous souhaitons modifier
  2. Dans notre feuille de style, nous allons définir ses propriétés ainsi :
    #nom_de_mon_id { liste des propriétés ici }.

Le "#" (dièze) avant le nom de l'id est très important. Il permet aux navigateur de distinguer la définition d'un id de celle d'une classe ou d'une balise HTML.

La principale différence avec les classes est qu'un id doit être unique dans une page web ! Par exemple, si vous avez 2 fois id="haut" dans votre page, votre code ne sera pas valide. On préfera donc utiliser un id à une classe pour un élément dont on sait qu'il sera une seule fois dans la page (par exemple, le pied de page)

Exemple, dans ma feuille de style, je mets le code suivant :

#pieddepage { text-align:center; font-size:10px; }

Et dans ma page HTML, je mets le code suivant :

<div id="pieddepage">
   <p>Mon pied de page ici.</p>
</div>

Ce qui donne dans votre navigateur :

Mon pied de page ici.

Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!