Langage CSS

CSS est l'acronyme de « Cascading Style Sheets » (en anglais) ce qui signifie « feuille de style en cascade » en français. Le CSS correspond à un langage informatique permettant de mettre en forme des pages web écrites en HTML.

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.

L'avantage de CSS est de pouvoir centraliser les styles utilisés sur une page web, sans devoir les ré-écrire s'ils sont utilisés plusieurs fois.

Expérimentez activement tous les exemples ci-dessous dans le logiciel Dreamweaver en créant une nouvelle page web nommée test_css.html, et en observant attentivement le rendu de la page aussi bien dans Dreamweaver que dans un véritable navigateur.

Prenons un exemple simple : nous disposons d'une page HTML contenant 4 liens dont le code source est le suivant :

Pour l'instant, sans styles particuliers, les liens sont affichés naturellement en bleu sur la page. Imaginons que nous voulions colorer les 4 liens en rouge. Sans CSS il faudrait modifier le style de chacune des 4 balises <a> dans le document HTML :

Évidemment s'il y avait plus de liens, il faudrait insérer le nouveau style dans toutes les balises <a>. De plus, le jour où on veut modifier le style des liens, il faut à nouveau revoir chacune des balises <a> afin de faire évoluer leur attribut style.

Grâce à CSS on va pouvoir écrire en un seul point du document HTML le style que toutes les balises <a> vont utiliser.

Le code CSS se place dans une balise <style> à l'intérieur de l'en-tête du document HTML (dans la balise <head>) :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test de CSS</title>
<style>
a {
color: red;
}
</style>
</head>

Ainsi on définit une bonne fois pour toutes que toutes les balises <a> de cette page web utiliseront la couleur rouge, sans qu'il soit nécessaire de le rappeler dans les attributs des balises.

Et si on veut encore modifier le style des liens il suffit de faire évoluer le code CSS de la balise <a> en y ajoutant d'autres propriétés. Exemple à tester comme tous les exemples :

Remarque : il est possible d'ajouter des commentaires dans le code CSS en les encadrant entre /* et */.

Cet exemple de base a montré comment grâce à CSS il était possible de modifier d'un coup les styles de toutes les balises <a> d'une page web. De la même manière il est possible de modifier toutes les balises d'un même type sur la page (toutes les balise de paragraphe <p>, toutes les balises de titre <h1> à <h6>, toutes les balises de tableau <table>, etc.).

Par exemple le code CSS suivant reconfigure toutes les balises de paragraphe <p> de la page web :

p {
  color:Red; /* couleur de texte rouge */
  background-color:Yellow; /* couleur de fond jaune */
  border-color:Blue; /* couleur de la bordure bleu */
  border:double; /* style de la bordure */
  }

Et si on veut à la fois configurer le style des liens et le style des paragraphes dans une même page web on écrira tout le code CSS dans une seule balise <style> à l'intérieur de la balise d'en-tête <head> :

Mais il arrive que l'on veille reconfigurer le style de certaines balises seulement, et non la totalité des balises de la page. Par exemple, on dispose d'une page web structurée en 10 paragraphes (10 balises <p>) mais on veut modifier le style de seulement 4 paragraphes. Dans ce cas il faudra utiliser les sélecteurs de CSS pour cibler précisément les balises concernées par les styles parsonnalisés.

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS. Ils permettent de cibler avec précision les balises HTML concernées par les règles CSS.

sélecteur { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }

Sélecteur	Syntaxe CSS
de type	nom_balise { propriété1: valeur1 ; propriété2: valeur2}
de classe	.nom_classe { propriété1: valeur1 ; propriété2: valeur2}
d’identifiant	#nom_identifiant { propriété1: valeur1 ; propriété2: valeur2}
d'attribut	[attribut] { propriété1: valeur1 ; propriété2: valeur2}
universel	* { propriété1: valeur1 ; propriété2: valeur2}

Le premier sélecteur qui permet de cibler un ensemble d’éléments est le sélecteur de type. Ce sélecteur utilise le nom d’un élément (nom d’une balise HTML), pour appliquer une règle CSS sur toutes les balises d’un même type.

Exemple pour configurer tous les liens de la page (toutes les balises <a>) :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test de CSS</title>
<style>
a {
  color: red; /* couleur rouge */
  font-weight:bold; /* texte du lien en gras */
  text-decoration:none; /* texte du lien non souligné */
  }
</style>
</head>

Les sélecteurs de classe utilisent l’attribut « class » des éléments HTML pour les cibler.

En CSS, il faut ajouter un point « . » devant le nom d’une classe pour pouvoir lui appliquer des propriétés et valeurs CSS. Tous les éléments avec la classe ciblée seront affectés pas la règle CSS définie.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test de CSS</title>
<style>
.rouge {
       color: red; /* couleur rouge */
       font-weight:bold; /* texte du lien en gras */
       text-decoration:none; /* texte du lien non souligné */
       }
.bleu {
      color: blue; /* couleur bleu */
      font-weight:bold; /* texte du lien en gras */
      text-decoration:none; /* texte du lien non souligné */
      }
</style>
</head>

Dans l'exemple ci-dessus, nous avons 2 liens de classe "rouge", et 2 liens de classe "bleu" :

Les sélecteurs d'identifiant utilisent l’attribut « id » des éléments HTML pour en cibler un seul précisément.

Les sélecteurs d’identifiant permettent de cibler un élément HTML en fonction de la valeur de son identifiant. Contrairement à une classe, un identifiant est forcément unique sur l'ensemble de la page web.

En CSS, il faut ajouter un caractère dièze « # » devant la valeur de l'identifiant pour pouvoir lui appliquer des propriétés et valeurs CSS. Seul l'élément avec l'identifiant ciblé sera affecté pas la règle CSS définie.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test de CSS</title>
<style>
#lien1 {
       color: red; /* couleur rouge */
       font-weight:bold; /* texte du lien en gras */
       text-decoration:none; /* texte du lien non souligné */
       }
#lien2 {
       color: blue; /* couleur bleu */
       font-weight:bold; /* texte du lien en gras */
       text-decoration:none; /* texte du lien non souligné */
       }
#lien3 {
       color: green; /* couleur vert */
       font-weight:bold; /* texte du lien en gras */
       text-decoration:none; /* texte du lien non souligné */
       }
</style>
</head>

Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.

Les sélecteurs d’attributs sont des sélecteurs simples permettent de cibler des éléments HTML précis en fonction de leurs attributs et de leurs valeurs. Il faut entourer le nom de l’attribut cible avec des crochets « [ ] » pour cibler cet attribut puis il faut préciser la valeur que l’attribut doit avoir pour être ciblé en ajoutant sa valeur à la suite précédée d’un « = ».

Syntaxe complète : [attr] [attr=valeur] [attr~=valeur][attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]

Exemple : [autoplay] permettra de cibler tous les éléments (toutes les balises HTML) qui possèdent l'attribut autoplay défini (quelle que soit sa valeur).

<p id="premier">Mon premier paragraphe</p>

<p class="important">Mon deuxième paragraphe</p>

<p id="dernier" class="important">Mon troisième paragraphe</p>

Exemple de code CSS appliqué aux 3 paragraphes ci-dessus à tester dans un véritable navigateur :

[id] {
     /* cible le premier et le troisième paragraphe */
     background-color:#FFFF00;
     }

[id="dernier"] {
               /* cible uniquement le troisième paragraphe */
               color:red;
               }

[class] {
        /* cible le deuxième et le troisième paragraphe */
        font-size:24px;
        }

Rappel : dans le code CSS le texte placé entre /* (« slash astérisque ») et */ (« astérisque slash ») est considéré comme un commentaire, et sera donc ignoré par le navigateur.

Ce sélecteur est particulier, car il permet de cibler un ensemble d’éléments dans un document. Il est représenté avec un astérisque « * » qui permettra de cibler tous les éléments du document.

L'exemple suivant montre comment imposer la police Verdana dans toutes les balises d'un document HTML :

* {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police par défaut */
}

À partir des 5 sélecteurs simples vues précédemment, il est possible de définir des sélecteurs composés (utilisant plusieurs sélecteurs simples en cascade) afin de cibler encore plus précisément les balises concernés par les règles CSS.

Voici quelques exemples à tester et à compléter. Commençons par les sélecteurs descendants : ils permettent de cibler des balises qui sont enfant d'autres balises dans l'arborescence du document HTML. Dans ce cas les différents types de balises sont séparés par un caractère « espace » :

p a {
    // toutes les balises <a> qui sont dans une balise <p>
    }

div p a {
        // les balises <a> dans des balises <p> qui sont enfant d'une balise <div>
        }

Il est également possible grâce au sélecteur de classe de ne cibler que certains types de balise :

.info {
      // toutes les balises qui sont de classe info
      }

div.info {
         // seulement les balises <div> qui sont de classe info
         }

Il est possible d'affecter plusieurs classes à une balise (l'attribut class peut se voir affecter plusieurs valeurs séparées par un espace). Les sélecteurs CSS permettent alors de sélectionner les balises possédant plusieurs classes :

p.info.premier {
      // seulement les balises <p> dont l'attribut class vaut info et premier
      }

div p.info.dernier a.important {
       // seulement les balises <a> de classe important
       // appartenant à une balise <p> de classe info et dernier
       // qui sont dans une balise <div>
       // Exemple de code HTML concerné :
       // <div><p class="info dernier"><a href="page.html" class="important">
       // cliquez ici</a></p></div>
       }

Grâce aux sélecteurs composés de CSS il est possible de cibler avec précision une balise quelconque en fonction de sa position dans l'arboresence du document HTML ou en fonction des valeurs de ces classes.

Le sélecteur de pseudo-classe est représenté par le signe deux points « : ». Une pseudo-classe est un mot clé préfixé par deux points qui s'ajoute à un sélecteur CSS pour appliquer un style à un élément dans un cas particulier (permière lettre d'un paragraphe, survol d'un lien, etc.).

Voici quelques pseudo-classes qui s'appliquent à une balise de paragraphe <p> :

Voyons quelques exemples d'utilisation de ces pseudo-classes à tester dans un véritable navigateur pour y voir plus clair.

Sélecteur de pseudo-classe	Rôle
p:first-letter	sélectionne la première lettre d'un paragraphe
p:first-line	sélectionne la première ligne d'un paragraphe
p:first-child	sélectionne la première balise enfant d'une balise
p:last-child	sélectionne la dernière balise enfant d'une balise

Sélecteur de pseudo-classe	Rôle
a:link	configure le style des liens qui n'ont pas encore été visités
a:visited	configure le style des liens déjà visités
a:hover	configure le style des liens survolés par la souris
a:active	configure le style des liens actifs (qui ont le focus)

<p class="texte">Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML ou XML. Par l'intermédiaire de propriétés d'apparence (couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d'une page web peut être intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles de styles ont d'ailleurs pour objectif principal de dissocier le contenu de la page de son apparence visuelle. La puissance et de l'intérêt des CSS peut être démontrée en modifiant radicalement l'apparence d'une page, sans changer son code HTML d'un iota... Bref les CSS permettent de gagner en productivité et en maintenabilité des sites web, tout en offrant des possibilités graphiques incontestables. Lorsqu'on se lance dans la conception de pages web, il faut apprendre les CSS !</p>

Sans règle CSS particulière pour la classe "texte", voici comment est affiché ce paragraphe brut dans le navigateur :

Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML ou XML. Par l'intermédiaire de propriétés d'apparence (couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d'une page web peut être intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles de styles ont d'ailleurs pour objectif principal de dissocier le contenu de la page de son apparence visuelle. La puissance et de l'intérêt des CSS peut être démontrée en modifiant radicalement l'apparence d'une page, sans changer son code HTML d'un iota... Bref les CSS permettent de gagner en productivité et en maintenabilité des sites web, tout en offrant des possibilités graphiques incontestables. Lorsqu'on se lance dans la conception de pages web, il faut apprendre les CSS !

Ajoutons les règles CSS suivantes afin de justifier le texte dans le paragraphe, de configurer la couleur de fond et une marge intérieure, et de mettre en valeur la première lettre du paragraphe :

p.texte { /* style du paragraphe */
        text-align:justify; /* texte du paragraphe justifié */
        background-color:#CCFFFF; /* couleur du fond du paragraphe */
        padding:30px; /* taille de la marge interne */
        }

p.texte:first-letter { /* style de la première lettre du paragraphe */
        font-size: 200%; /* taille de la première lettre */
        font-weight:bold; /* première lettre en gras */
        color: red; /* couleur de la première lettre */
}

Et voici comment le paragraphe de classe "texte" est désormais affiché dans le navigateur :

<a href="http://nsi.gecif.net/" target="_blank" class="lien">Cliquez ici pour ouvrir nsi.gecif.net</a>

Sans règle CSS particulière pour la classe "lien", voici comment est affiché ce lien dans le navigateur :

Ajoutons les règles CSS suivantes utilisant les pseudo-classes afin de modifier l'apparence du lien, aussi bien lorsqu'il est en attente, déjà visité, ou survolé par la souris :

.lien:link { /* lien en attente pas encore visité : style de base */
           color:#00FF33;
           text-decoration:none;
           font-weight:bold;
           background-color:#666666;
           border:dotted;
           border-color:red;
           padding:8px
           }

.lien:visited { /* style lorsque le lien a déjà été visité (identique au style de base) */
           color:#00FF33;
           text-decoration:none;
           font-weight:bold;
           background-color:#666666;
           border:dotted;
           border-color:red;
           padding:8px
           }

.lien:hover { /* style lorsque le lien est survolé par la souris */
           color:#FFFFFF;
           text-decoration:none;
           font-weight:bold;
           background-color:#FF0000;
           border:double;
           border-color:#FFFF00;
           padding:12px
           }

Grâce aux pseudo-classes CSS appliquées à une balise <a> il est facile de convertir un simple lien texte en un bouton interactif apportant plus de modernité et de convivialité sur la page web.

Nous allons voir ici comment mettre en forme un tableau grâce à différentes règles CSS.

Nous disposons d'un tableau représentant des informations sur des clients. Pour chaque client, le tableau indique :

<table id="tableau">
    <tr>
        <td>Client</td>
        <td>Prénom</td>
        <td>NOM</td>
        <td>Adresse</td>
        <td>Code postal</td>
        <td>Ville</td>
        <td>Téléphone</td>
    </tr>
    <tr>
        <td>1</td>
        <td>laurent</td>
        <td>DUPONT</td>
        <td>5 rue de la liberté</td>
        <td>75000</td>
        <td>PARIS</td>
        <td>0611223344</td>
    </tr>
    <tr>
        <td>2</td>
        <td>paule</td>
        <td>MARTIN</td>
        <td>10 rue des loups</td>
        <td>33063</td>
        <td>BORDEAUX</td>
        <td>0677885544</td>
    </tr>
    <tr>
        <td>3</td>
        <td>jean</td>
        <td>DURANT</td>
        <td>3 place d'armes</td>
        <td>44109</td>
        <td>NANTES</td>
        <td>0697877767</td>
    </tr>
    <tr>
        <td>4</td>
        <td>valérie</td>
        <td>CHALET</td>
        <td>56 avenue de verdun</td>
        <td>59350</td>
        <td>LILLE</td>
        <td>0601020304</td>
    </tr>
</table>

Sans règle CSS particulières pour le tableau d'identifiant "tableau", voici comment ce tableau de base est affiché dans le navigateur :

Nous remarquons que ce tableau brut ne possède aucune mise en forme, et notamment que :

En ajoutant des règles CSS, nous allons améliorer l'affichage de ce tableau, sans toucher le code HTML du tableau, mais en agissant seulement "à distance" sur l'identifiant #tableau.

Voici le code CSS complet mettant en forme le tableau à tester dans un véritable navigateur :

#tableau { /* configuration globale du tableau */
          border-style: solid; /* bordure en trait plein */
          border-width: 4; /* largeur de la bordure en pixels */
          border-collapse: collapse; /* cellules collées */
          }

#tableau td { /* chaque cellule du tableau */
          border-style: solid; /* bordure en trait plein */
          border-width: 4; /* largeur de la bordure en pixels */
          text-align:center; /* texte centré horizontalement */
          width:150px; /* largeur de la cellule en pixels */
          height:30px; /* hauteur de la cellule en pixels */
          border-color:#00DD00; /* couleur de la bordure */
          }

#tableau tr:first-child { /* première ligne du tableau */
          color: #FFFF00; /* couleur du texte */
          background-color:#006600; /* couleur du fond */
          font-weight:bold; /* texte en gras */
          }

#tableau td:first-child { /* première colonne du tableau */
          color: #FFFF00; /* couleur du texte */
          background-color:#006600; /* couleur du fond */
          font-weight:bold; /* texte en gras */
          }

Et voici comment le tableau est finalement affiché dans le navigateur grâce à la mise en forme par CSS :

Les propriétés CSS sont très nombreuses. En voici d'autres à tester expérimentalement (édition du code source dans Dreamweaver et visionnage du résultat dans un véritable navigateur en mémorisant l'effet obtenu pour différentes valeurs données par l'auto-complétion de Dreamweaver) :

Voilà, vous savez désormais utiliser le langage CSS pour configurer les styles des balises HTML afin de personnaliser vos pages web et surtout de centraliser en un seul point du code les styles utilisés plusieurs fois sur une même page web.

Propriété CSS	Rôle
border-bottom	style du trait inférieur d'une bordure
border-top	style du trait supérieur d'une bordure
border-left	style du trait gauche d'une bordure
border-right	style du trait droit d'une bordure
padding	taille de la marge interne
margin	taille de la marge externe
cursor	change l'aspect du curseur de la souris
display	change la manière dont un élément est affiché
overflow	définit la mise en page d'un élément trop grand

Client	Prénom	NOM	Adresse	Code postal	Ville	Téléphone
1	laurent	DUPONT	5 rue de la liberté	75000	PARIS	0611223344
2	paule	MARTIN	10 rue des loups	33063	BORDEAUX	0677885544
3	jean	DURANT	3 place d'armes	44109	NANTES	0697877767
4	valérie	CHALET	56 avenue de verdun	59350	LILLE	0601020304