Vous voulez créer un site mais vous ne savez pas comment vous y prendre; vous avez un site perso, construit en HTML avec un outil WYSIWYG tel que Frontpage, mais on vous a dit que ce n’était pas la meilleure solution pour créer un site; ou tout simplement vous êtes curieux: cet article est fait pour vous. Je vais tenter d’expliquer ici, dans un premier temps ce que sont ces fameuses "CSS"; dans un second temps pourquoi il faut les utiliser; et dans un troisième temps, brièvement, comment les utiliser.
Vous avez dit CSS ?
Les CSS sont des feuilles de style en cascade, ou Cascading StyleSheets. Vous savez que pour créer une page Web, il faut savoir programmer, programmer en HTML. Ce que font des outils tels que Dreamweaver, GoLive, Frontpage, NVU pour ne citer qu’eux, est une simple transposition de ce que vous voyez à l’écran en code source HTML. D’où l’abréviation WYSIWYG, what you see, ce que vous voyez, is what you get, est ce que vous obtenez (en code source).
Créer une page Web, c’est donc programmer. Le HTML est un langage de programmation. Il existe des dizaines de langages de programmation, et ils sont tous différents; cependant, on peut tous les classer dans des grandes familles. Il existe ainsi plusieurs critères caractérisant les langages de programmation, chaque critère servant de base à une manière précise de classer ces derniers. Le HTML est un langage purement descriptif, c’est à dire que tout ce qu’il peut faire, c’est décrire un état, il ne peut en aucun cas modifier cet état. Vous utilisez Windows, Linux ou Mac OS X ? Ces systèmes d’exploitation sont respectivement écrits en C++ et C. Le C et le C++ sont des langages complexes qui permettent de décrire une situation (il y a une fenêtre de telle taille, avec un bouton au centre) et de créer des évènements (quand on clique sur ce bouton il se passe telle chose). Le HTML, lui, n’est capable que de décrire la situation. Ainsi, le HTML vous servira à dire au navigateur Web: affiche un image en haut à gauche, affiche un tableau en dessous, affiche un texte dans le tableau, etc.
Le HTML est un langage de programmation descriptif qui sert à afficher les éléments composant une page Web (textes, images, boutons, etc). Dans une page Web, on distingue la structure, le contenant, des éléments qui la composent, le contenu. Le HTML sert à définir comment doit être le contenant et quel doit être le contenu.
Le code HTML suivant: <b><i>Bonjour le monde!</i></b> permet d’afficher Bonjour le monde! (contenu) en gras grâce à la balise <b></b> et en italique grâce à la balise <i></i> (contenant).
Tout cela est bien beau, mais c’est terminé! En effet, le W3C (World Wide Web Consortium) a décidé de ne plus développer le HTML, et de le remplacer par le XHTML. Le XHTML, c’est du HTML mais avec un X! Le X de XML, autre langage de programmation similaire au HTML. La différence est que maintenant le contenu est séparé du contenant. Le contenu est défini dans un fichier écrit en XHTML alors que le contenant est géré par une feuille de style CSS. Vous savez donc maintenant ce que sont les CSS: ce sont des outils pour gérer le contenant d’une page Web, autrement dit tous les éléments de présentation, de formatage ou de mise en page.
Pourquoi utiliser les CSS ?
Le HTML est un langage mort puisqu’il n’est plus développé. Il a laissé sa place au XHTML+CSS. Sans entrer dans les détails, je vais vous expliquer les deux principales raisons de ce changement.
Premièrement, le HTML a atteint ses limites. En effet, il convenait pour afficher les sites Web de la première génération: un titre avec une image en dessous, des barres horizontales de partout, des gifs animés, un gros paté de texte non justifié (je parle de l’alignement ;-) et un fond d’écran tout laid. Mais dès lors que vous voulez sortir de ça et avoir plus de contrôle sur la mise en forme de votre contenu, il vous faut abandonner le HTML. Les CSS arrivent en renfort pour vous aider: elles ont été crées pour gérer le contenant, et elles le font très bien!
Deuxièmement, imaginez que vous avez un site similaire à celui-ci. C’est à dire que vous avez, par exemple, une centaine de pages dont le contenu est différent mais dont la présentation graphique doit être exactement la même pour garantir l’uniformité du site. Si vos pages sont construites en HTML pur, si vous décidez de changer un élément dans un fichier (par exemple passer votre police par défaut de la taille 10 à la taille 12), vous devrez modifier un par un tous les fichiers. Avec les CSS, il n’en est plus question: on crée un fichier appelé "machinchouette.CSS" et on indique à chaque page du site qu’elle doit afficher son contenu en suivant les règles de présentation définies dans ce fichier. Ainsi, c’est ce fichier qui dit que la taille de la police est 10: il suffit de mettre 12 à la place de 10 dans ce fichier, et la police de toutes les pages passera en taille 12! Outre le fait que cela soit beaucoup plus simple lors des mises à jour de votre interface, recourir aux CSS est une bonne idée: le code source est écrit une seule fois (dans le fichier .CSS) et non pas répété dans chaque fichier (donc le chargement des pages est plus rapide, et vous occupez moins de place sur votre serveur).
Utilisation basique des CSS
On l’a compris, les CSS servent à gérer le contenant alors que le XHTML sert à gérer le contenu. Nous allons donc créer un fichier XHTML avec du contenu, puis une feuille de style définissant le contenant.
Voici un exemple de code XHTML:
<div id="important">
<h1>Ceci est important:</h1>
<p>J’utilise les <span class="code">CSS</span> !!!</p>
</div>
Le contenu est le suivant: Ceci est important: et J’‘utilise les CSS. Il est formaté de trois manières différentes: le Ceci est important: doit être en gros et en rouge, le J’utilise les doit être en texte normal, et le CSS doit être dans une police sans-serif comme Courier. Pour cela, on doit indiquer dans la page XHTML qu’on a affaire à des morceaux de textes à présenter de manière différente.
Les balises <div></div> et <span></span> servent à définir un conteneur. Ainsi, mon texte se trouve dans le conteneur DIV appelé "important", car il est important! La balise DIV s’utilise de manière générique pour être appliquée à un contenu, tandisque la balise SPAN s’utilise de manière spéciale pour un contenu restreint encadré d’un contenu global présenté d’une autre manière. Par exemple, le texte de cet article est écrit dans la police Apple Garamond Light (dans des balises DIV) et l’exemple de code ci-dessus est imbriqué au milieu du texte de l’article grâce à une balise SPAN.
On a donc la balise DIV à laquelle on a donné un nom: "important". Ensuite, on trouve la balise <h1></h1>. Elle sert à définir un header de rang 1, ou en français un titre de rang 1. Si vous utilisez Microsoft Word, vous connaissez les styles: Style 1, Style 2, … Style 9. Ici, c’est pareil: <h1><h2>…<h9>. La balise <p></p> sert à indiquer qu’il s’agit d’un nouveau paragraphe.
Une fois le contenu écrit, il faut se charger du contenant. Voilà ce qu’il faut écrire:
#important {
font-family: "Apple Garamond Light", Times, serif;
font-size: 12px;
}
.code {
font-family: Courier, sans-serif;
font-size: 12px;
}
h1 {
font-family: "Apple Garamond Light", Times, serif;
font-size: 30px;
color: red;
}
Ceci est une feuille de style (et oui!).
La feuille de style se charge en premier de la manière d’afficher le contenu entre les balises <div> dont le nom est "important" (donc <div id="important">). Elle impose à ce contenu de s’afficher avec la police Apple Garamond Light, si elle n’est pas installée, avec la police Times, et si elle n’est pas installée non plus, avec n’importe quelle police avec empattements (serif en anglais). La taille de cette police est établile à 12 pixels (12px). Elle définit ensuite la présentation du contenu pour la balise <div id="code"> : la police Courier, et à défaut n’importe quelle police sans empattement, à une taille de 12 pixels. Pour finir, la feuille de style définit la présentation de tout les contenus encadrés des balises <h1></h1>: la police, sa taille (ici 30 pixels) et sa couleur (rouge).
J’ai écrit #important, .code et h1; avec <div id="">, <span class="">, et <h1></h1>. Au conteneur DIV, on assigne un nom par le biais de texte id="": le conteneur est individualisé, et la présentation faite par la feuille de style sous #important ne pourra être utilisée que pour lui. Il ne peut pas y avoir un autre conteneur appelé "important". Ainsi, quand on veut assigner une présentation particulière à un élément individualisé, on utilise le symbole # devant le nom de cet élément dans la feuille de style. Si par contre on veut pouvoir utiliser de nouveau la même présentation plus loin, on doit recourir à une classe CSS. Ici, il s’agit de la classe .code caractérisée par le symbole . (point) devant son nom. On appelle cette classe tout naturellement avec le texte class="". Et si, dans un troisième temps, on veut redéfinir la présentation de tout le contenu encadré de balises d’un certain type, comme ici <h1>, on laissera h1 sans symbole supplémentaire dans la feuille de style. Cette dernière option ne fonctionne que pour les balises XHTML existantes (c’est à dire généralement pour les balises <hx> et <a…>(lien).
Vous avez maintenant un contenu et un contenant, il ne reste plus qu’à les associer. Il existe 3 manières d’associer un style CSS à un contenu: l’intégration ponctuelle dans le code source de la page XHTML (inline CSS ); l’intégration dans l’en-tête de la page XHTML, entre les balises <head></head>(embedded CSS ); et la liaison ou l’inclusion d’un feuille de style externe (external CSS ).
La première méthode est difficilement utilisable dans notre cas car il faudrait réécrire le code CSS, mais voici un petit exemple pour formater le contenu de notre balise "important":
<div id="important" style="font-family: ‘Apple Garamond Light’, Times, serif;
font-size: 12px;">
La seconde méthode consiste à faire un simple copier coller du code commenté plus haut dans l’en-tête de la page HTML. On obtient ceci:
<head>
<style TYPE="text/css">
<!–
#important {
font-family: "Apple Garamond Light", Times, serif;
font-size: 12px;
}
–>
</style>
</head>
La troisième méthode est beaucoup plus intéressante, et c’est celle que j’utilise pour ce site. Créez votre fichier HTML avec le code du début de ce document; puis créer un fichier texte "maCSS.css" dans le même répertoire et copiez y le code ci-dessus tel quel. Dans le fichier HTML écrivez entre les balises <head></head> le code suivant:
<link href="maCSSs.css" rel="stylesheet" type="text/css" />
Cette méthode fait appel au fichier externe pour le lier au fichier XHTML. Avec cette méthode, on ne peut lier qu’un seul fichier CSS. Si vous avez besoin d’en utiliser plusieurs, vous devrez non pas les lier mais les inclure. Cependant, contrairement à la liaison, l’inclusion n’est pas bien supportée par tous les navigateurs.
<STYLE TYPE="text/css"> @import url("maCSS.css") </STYLE>
Voilà, vous savez maintenant comment utiliser les CSS!
Je tiens à rajouter une petite explication à propos des pseudo-classes. Imaginez qu’au lieu de formater les balises <hx> vous vouliez formater les balises <a> (liens), mais que vous vouliez aussi définir des états différents selon que le lien est actif, visité, passif, etc. Pour cela, vous devez avoir recours aux pseudo classes. Pour cela, écriez d’abord le tag à modifier, ajoutez le symbole : (deux points) et mettez l’état pour lequel vous voulez définir la présentation. Par exemple, pour définir l’apparence d’un lien visité, écrivez: a:visited { }. Voici un exemple:
a:link {
color: #666633;
font-style: italic;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666633;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #666633;
}
Pour finir, je vous laisse un petit exemple commenté d’une classe CSS: la classe basique servant pour le texte brut de ce site.
En CSS, le code contenu entre /* et */ est un commentaire: il n’est pas interprété, le logiciel n’en tient pas compte. Dans le code ci-dessous j’ai inséré de nombreux commentaires, et ils fonctionnent ainsi: letter-spacing: normal; /* normal|length */ signifie que pour la propriété letter-spacing (l’espace entre deux lettres dans un mot), on peut soit choisir la valeur par défaut de la police (c’est le cas ici: normal), soit une certains longueur que l’on devra définir (length).
.TEXTE {
font-family: "Apple Garamond Light", Times, serif;
font-size: 14px; /* absolute size: relative to browser settings (xx-small|x-small|small|medium|large|x-large|xxlarge)
|relative size: relative to parent style settings (larger|smaller)
|length (number + em|ex|px|pt|pc|mm|cm|in)
|percentage (n%) /
font-style: normal; / normal|italic|oblique /
font-variant: normal; / normal|small-caps /
font-weight: normal; / normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 */
line-height: normal; /* normal|number|length|percentage /
word-spacing: normal; / normal|length /
letter-spacing: normal; / normal|length */
text-decoration: none; /* none|underline|overline|line-through|blink /
vertical-align: baseline; / baseline|bottom|middle|sub|super|text-bottom|text-top
|top|percentage /
text-transform: none; / none|capitalize|lowercase|uppercase /
text-align: justify; / center|justify|left|right */
/* text-indent: length|percentage; /
/ margin-top/bottom/right/left: length|percentage|auto; /
/ margin: length|percentage|auto; /
/ padding-top/bottom/right/left: length|percentage; /
/ padding: length|percentage; /
/ border-top/bottom/right/left-width: thin|medium|thick|length; /
/ border-width: thin|medium|thick|length; /
/ border-color: color name|RGB value; /
/ border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset; */
color: #666633; /* color name|RGB color value (COULEUR DU TEXTE: FOREGROUND)/
background-color: #B3B380; / color name or RGB value|transparent /
background-image: none; / url("http://"); */
}
à Montpellier 28/12/2004