Valid XHTML 1.0! Valid CSS !

Introduction au CSS

Pour le moment, nous n'avons travaillé qu'avec un seul langage : Le XHTML. Il est temps d'introduire un nouveau langage appelé CSS. Il est assez différent du XHTML mais les deux sont complémentaires .

Il est en théorie possible de faire un site uniquement en XHTML. D'ailleurs, c'est exactement ce que l'on a fait jusqu'à présent. Le problème c'est que la présentation du site laissait à désirer. Heureusement que le CSS est la pour embellir tout ça !

On peut faire de nombreuses choses grâce au CSS : changer la couleur du texte ou du fond, changer la police, la taille, etc.

Insérer du code CSS

Pour insérer du code CSS, il existe 3 façons différentes. Certaines sont plus ou moins adaptées selon le cas. Nous allons étudier chaque méthode.

Dans un fichier .css

C'est la technique la plus courante ( et la plus conseillée !) qui consiste à créer un fichier spécial pour placer le code CSS. Jusqu'ici, nous avons créer des fichiers à l'éxtension .html, par exemple exemple1.html. Cette fois il faut créer un nouveau fichier avec l'éxtension .css

Voici les différentes étapes :

Créer un fichier . css, par exemple style.css avec notepad++ ;
Activer la coloration dans le menu Langage/CSS pour activer la coloration du Code CSS ;
Tapez le code CSS désirez.

Voici un code CSS par exemple :

p
{
text-align : center;
}

Maintenant que cela est fait, il va falloir modifier le fichier XHTML. (exemple1.html) pour lui dire d'utiliser le fichier style.css.

On doit rajouter une balise entre <head> et </head> : la balise <link/>

Voici un exemple d'utilisation :

Il est facile de vérifier si cela fonctionne: normalement le paragraphe : Bonjour, je suis un paragraphe est centré.

Exemple

D'en l'en-tête du fichier XHTML

Une autre technique consiste à placer le code CSS à l'intérieur même du fichier XHTML. Il devra être placé entre des balises spéciales situées entre <head> et </head>. Cette fois, pas besoin de créer de nouveau fichier à l'extension .css : tout se passera dans le fichier .html

La balise permettant d'insérer du CSS dans un fichier XHTML est <style> : Elle s'utilise comme ceci :

On obtient le même résultat en ajoutant le code CSS entre <style> et </style>. C'est magique

Exemple

A l'intérieur des balises

Enfin il existe une dernière façon d'utiliser le langage CSS.
Il est possible d'ajouter un attribut style à la plupart des balises XHTML. Petit Exemple :

<p style="text-align:center;"> Bonjour, je suis un paragraphe :</p>

On peut utiliser cette technique pur changer l'apparence d'un paragraphe en particulier (comme ici).
Cependant cette technique n'est pas très recommandée et comporte de nombreux défauts. En effet cela rend la maintenance du site très difficile : surtout si les fichiers sont gros, on mettra du temps à retrouver dans le code source le paragraphe dont on voudra changer l'apparence.

Pourquoi est-il préférable d'utiliser la première technique :

Cela évite d'avoir à dupliquer le même code CSS dans plusieurs fichiers XHTML.
Les fichiers .css sont mis en cache dans le navigateur. Ainsi la navigation sur nos sites web sera accélérée.
La maintenance du site sera simplifiée.

Appliquer un style à une ou plusieurs balises

Maintenant que nous avons vu comment lier un fichier CSS et un fichier XHTML, nous allons nous concentrer sur l'écriture de code CSS.

Appliquer un style à toutes les balises

On peut appliquer un style à toutes les balises, que ce soit des paragraphes <p>, des titres <h1>, des citations <q>, etc. Dans ce but, on utilise le selecteur universel. Derrière ce nom terrifiant se cache... le symbole étoile *. Il signifie "appliquer à toutes les balises".

On Insére une étoile suivie d'une accolade ouvrante et d'une accolade fermante, comme ceci :

*
{
}

Les accolades délimitent le style. Tout le code CSS qui se trouve à l'intérieur sera appliqué à toutes les balises. Si on veut centrer le texte de toute la page web (titres, paragraphes...), on écrira le code suivant :

*
{
text-align : center;
}

Dans cet exemple, text-align est ce qu'on appelle une propriété CSS, et center est une valeur. Il est possible de définir plusieurs propriétés CSS à la fois : dans ce cas elles se combineront. On peut ainsi faire en sorte que le texte soit centré et écrit en bleu, italique, souligné à la fois.

Testons notre code, sur cette exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Welcome !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" style="text/css" title="Mon style" href="style2.css" />
</head>

<body>
<h1>Bienvenue sur mon site Web !</h1>
<h2>Présentation</h2>
<p>Ceci est le site d'Alexandre un passioné de XHTML et CSS.</p>
<p>Revenez dans quelques jours car le site Web n'est pas encore finit. Promis il sera finit le 25 janvier.</p>
</body>
</html>

Exemple

En résumé : Il faut séparer la propriété de sa valeur par le symbole deux points (:) et terminer par un point-virgule après la valeur. Schématiquement, notre code CSS devrait donc toujours ressembler à ceci :

*
{
  propriété : valeur;
  propriété : valeur;
  propriété : valeur;
}

Appliquer un style à une balise

Maintenant nous savons changer l'apparence de toute la page Web grâce au sélécteur universel *. Comment faire pour ne changer par exemple que les titres ?.
Facile on remplace l'étoile par la balise désirée. Ainsi si nous voulons centrer nos titres <h1> uniquement, il nous faudra donc écrire :

h1
{
text-align : center;
}

Cette fois en ayant modifié seulement le code CSS, la page va prendre une apparence toute différente.

Exemple

Appliquer un style à plusieurs balises

Il est aussi possible d'appliquer un même style à plusieurs balises à la fois. Pour faire cela, il suffit de séparer les noms des balises par des virgules.

Par exemple, si nous voulons center nos titres <h1> et <h2> :

h1,h2
{
text-align : center;
}

Exemple

Les titres <h1> et <h2> sont désormais centrés.

Appliquer un style à des balises imbriquées

Le CSS permet de définir des règles encore plus précises. Une qui est souvent utilisée est celle qui permet d'appliquer un style à des balises imbriquées. Une balise imbriquée est une balise qui en contient une autre. Petit exemple :

<blockquote>
<p>
Le voile du matin sur les monts se déploie.<br/>
Vois, un rayon naissant blanchit la vieille tour;<br/>
Et déjà dans les cieux s'unit avec amour,<br/>
Ainsi que la gloire à la joie.<br/>
</p>
</blockquote>

L'on peut créer une règle CSS qui ne centrera que les paragraphes situés à l'intérieur de balises <blockquote>. Il suffit d'écrire les balises dans cet ordre précis en les séparant par un espace :

blockquote p
{
text-align : center;
}

Cela signifie "Centrer tous les paragraphes (p) situé à l'intérieur de citations longues (blockquote)".
On peut même faire une triple imbriquation si on veut :

blockquote p strong
{
text-align : center;
}

Cette fois, cela signifie "Centrer tous les textes importants (strong) situés dans des paragraphes (p) eux-mêmes situés dans des citations longues (blockquote)".

Exemple

Appliquer un style à certaines balises

Id : Un identifiant unique

Nous savons comment changer l'apparence de toutes les balises d'un même type (par exemple tous les paragraphes). Comment faire pour changer l'apparence d'un seul paragraphe en particulier ?
En fait, il s'agit d'identifier un paragraphe précis en CSS. Et pour cela, il faut donner un nom à la balise qui nous intéresse.

Prenons le paragraphe suivant :

<p>Ceci est le site d'Alexandre un passioné de XHTML et CSS.</p>

Si on veut changer l'apparence de ce paragraphe-la, il faut d'abord lui donner un nom. On doit utiliser l'attribut id que l'on peut appliquer à presque toutes les balises :

<p id="introduction">Ceci est le site d'Alexandre un passioné de XHTML et CSS.</p>

Notre paragraphe est maintenant identifé : il a pour nom "introduction".

Maintenant rendons-nous dans notre fichier CSS pour y mettre le code suivant :

#introduction
{
text-align : center;
}

Le symbole dièse (#) permet d'indiquer que l'on parle d'une balise ayant un nom précis. L'exemple nous montre que seul le paragraphe ayant pour nom "introduction" a été centré.

Exemple

Class : Un identifiant réutilisable

Le défaut de l'identificateur id, c'est qu'on ne peut l'utiliser qu' une seule fois. Il donne un nom unique.

Heureusement, il existe un autre attribut, lui aussi utilisable sur la plupart des balises. Il s'agit de class. Son fonctionnement est pratiquement le même que celui d'id, à la différence près qu'on peut l'utiliser sur plusieurs balises en leur donnant le même nom.

Dans cet exemple, nous donnons un même nom au titre <h1> et au premier paragraphe.

<h1 class="maclasse">Bienvenue sur mon site Web !</h1>
<h2>Présentation</h2>
<p class="maclasse">Ceci est le site d'Alexandre un passioné de XHTML et CSS.</p>
<p>Revenez dans quelques jours car le site Web n'est pas encore finit. Promis il sera finit le 25 janvier.</p>

Cette fois, il faut modifier le CSS et utiliser un point à la place du dièse :

.maclasse
{
text-align : center;
}

Résultat : toutes les balises utilisant la classe maclasse verront leurs textes centrés.

Exemple

Remarque : Il est possible de donner plusieurs classes à une même balise. Exemple :

Les autres selecteurs

Il faut savoir qu'il existe d'autres sélécteurs en plus de ce que nous avons vu précédemment.

Les sélécteurs de déscendances (ou d'enfant)

Nous avons déja vu un de ces sélécteurs : c'est l'espace. Mais il en existe un autre le >. Exemple :

p>strong
{
text-align : center;
}

Cela signifie que tous les éléments strong (enfant) de l'élément p (parent) seront centrés. L'élément strong doit être contenu dans p directement. Par exemple:

<p> <strong><a>Voici un lien !</a></strong> </p>

Le sélécteur p>strong fonctionnera dans cet exemple, mais pas p>a car <a> n'est pas directement contenu dans <p> .

Le selecteur d'adjacence

Le symbole du sélécteur d'adjacence est le +. Voici un exemple d'utilisation :

li+li+li
{
text-align : center;
}

Le sélécteur d'adjacence sert à séléctionner dans cet exemple tous les éléments li imédiatement précédés d'un élément li. Exemple :

<ul>
<li>Un oiseau</li>
<li>Un chat</li>
<li>Un chien</li>
</ul>

Exemple

Ainsi c'est le troisième li qui est concerné par un alignement centré du texte.

Le selecteur d'attributs

Le symbole du sélécteur d'attributs est : [attr], [attr] séléctionne tous les éléments comportant l'attribut attr : Ainsi si le code est :

H2[title]
{
text-align : center;
}

Tout les H2 ayant des titres seront alignés.

De plus il existe aussi le sélécteur [attr="valeur"] qui signifie que tous les éléments comportant l'attribut attr associé à une valeur seront afféctés par la propriété CSS. Exemple :

p[class=exemple]
{
text-align : center;
}

Tout les éléments p ayant comme class exemple seront afféctés par le centrage du texte.

Les commentaires en CSS

Il est possible d'insérer des commentaires en CSS. Cela ne se fait pas éxactement de la même manière qu'en XHTML. Il faut cette fois utiliser /* pour indiquer un début de commentaire et */ pour indiquer une fin de commentaire.

/* Tous les paragraphes situés dans des citations longues seront centrés */
blockquote p
{
text-align : center;
}

Les commentaires CSS, tout comme les commentaires XHTML, n'apparaitront pas sur la page. Ils servent uniquement à donner des renseignements pour nous orienter dans le code. Ils font office d'aide mémoire.

Voir la partie sur la Mise en forme du Texte (CSS).