Introduction au développement Web

Jean-Philippe Doyle, Projet Héritage 2005-2006

CSS

Table des matières

1 - Introduction
2 - Feuilles de style
3 - Syntaxe
4 - Révison
5 - Références

1 - Introduction

Avant de vous expliquer comment utiliser le CSS, il serait important de connaître ses origines. Le CSS a été introduit avec le HTML 4.0 afin de régler un problème. Le HTML servait à la base uniquement à définir le contenu d'une page (exemples; <table></table> : ceci est un tableau; <tr></tr> : ceci est une ligne du tableau; <td></td> : ceci est une colonne du tableau; <a></a> : ceci est un lien; etc.) mais les 2 navigateurs les plus connus ont ajouté des balises et des attributs aux spécifications du HTML original afin de modifier le style de ces éléments (exemple; <table bgcolor="red"></table> : un tableau au fond rouge). Comme suite à ces ajouts, il est devenu difficile de séparer le contenu de la forme de présentation et de faire un site comptabible avec tous les navigateurs. CSS, acronyme de "Cascading Style Sheet", vient donc régler ce problème en se s'occupant de définir comment les éléments HTML (tableaux, textes, liens, etc.) sont affichés.

2 - Feuille de style

L'affichage des éléments est défini par des styles qui sont en général enregistrés dans une feuille de style (fichier externe) mais qui peuvent aussi être appliqués directement aux éléments à travers HTML. Voici deux exemples ou l'on change la couleur par défaut des liens (bleu) pour le noir.

Exemple sans feuille de style :

Fichier index.html

<html>
<body>
<a href="test.html" style="color:black;">Lien 1 </a>
<a href="test.html" style="color:black;">Lien 2</a>
<a href="test.html" style="color:black;">Lien 3</a>
</body>
</html>

Exemple avec une feuille de style :

Fichier index.html

<html>
<link href="feuille.css" rel="stylesheet" type="text/css">
<body>
<a href="test.html">Lien 1 </a>
<a href="test.html">Lien 2</a>
<a href="test.html">Lien 3</a>
</body>
</html>

Fichier feuille.css

a{
color:black;
}

Les deux exemples donneront le résultat suivant :

Lien 1 Lien 2 Lien 3

Nous utiliserons ipso facto ici la méthode avec une feuille de style externe qui est bien plus utile, car on peut utiliser le même style pour plusieurs éléments sans avoir à le répéter à chaque fois et séparer de façon plus claire le contenu du contenant. L'utilisation de la feuille externe permet aussi de changer tout le style de son site sans avoir à modifier aucune page.

S'il y a plusieurs styles qui s'appliquent à un seul item, les attributs seront seront utilisés dans cet ordre de priorité (le premier ayant la plus haute priorité):

1. Style spécifié dans directement sur l'élément
2. Feuille de style interne
3. Feuille de style externe
4. Affichage par défaut du navigateur

3 - Syntaxe

Pour définir un style à l'intérieur d'une feuille, il faut utiliser soit utiliser le nom de la balise HTML existante, créé une classe ou utiliser un id.

3.1 - Balise HTML

Par exemple, si on veut que toutes les balises de paragraphes (toutes les utilisations de <p></p>) affiche un texte aligné, en noir et en Arial on utiliserais ce code dans notre feuille :

p{
text-align:justify;
color:black;
font-family:Arial;
}

Résultat :

Exemple

3.2 - Classe

Maintenant, si on veut que certaines balises de paragraphes ayant une classe définie (exemple : <p class="p1"></p>) affiche un texte souligné (en plus d'être un texte aligné à gauche, en noir et en Arial comme défini précédemment) on ajoute ce code à la feuille :

p.p1{
text-decoration:underline;
}

Résultat :

Exemple

3.3 - Id

Et finalement, si on veut qu'uniquement un seul paragraphe identifié par un id (exemple : <p id="unique"></p>) affiche un texte aligné à droite en vert (et en Arial comme défini précédemment pour toutes les balises <p></p>) on utiliserait ce code :

#unique{
text-align:right;
color:green;
}

Résultat :

Exemple

Maintenant que vous connaissez la l'essentiel du CSS, il vous reste à le mettre en pratique et d'en apprendre davantage. Afin de connaître tous les attributs possibles pour les différents éléments HTML, je vous propose de consulter les liens dans la section suivante.

4 - Révison

Voir la section à cet effet sur la page révison.

5 - Références

CSS Turorial, sur le site W3School Online Website (sans date). Consulté le 9 février 2006.
http://www.w3schools.com/css/

Cascading Style Sheets (9 février 2006), sur le site World Wide Web Consortium. Consulté le 10 février 2006.
http://www.w3.org/Style/CSS/