Cette mini-étude portera sur la version 3.0 du CSS.
Seules les bases seront abordées. Elles seront cependant suffisantes pour réaliser de
très jolies pages web.
Pré-requis
- Avoir suivi le mini-cours consacré au HTML.
- Savoir créer quelques pages HTML avec un éditeur de texte.
- Savoir consulter le code source de pages web créées par d'autres.
Qu'est-ce que le CSS ?
Avant le CSS, la présentation du texte était faite par le biais de balises. L' inconvénient était que le fichier HTML devenait de plus en plus gros au fur et à mesure que la présentation était belle. De plus, la mise à jour de la présentation d'un site internet était de plus en plus difficile au fur et à mesure de l'augmentation du nombre de pages. Sans parler du fait que le surpoids des fichiers HTML dû uniquement à la présentation surcharge les autoroutes de l'information, d'autant plus que le nombre de pages web explose; ni du fait que les moteurs de recherche qui ne sont pas intéressés par la présentation - ils sont aveugles ! - perdaient de plus en plus de temps pour trouver le texte.
Le terme CSS est l'abréviation de Cascading Style Sheets ( expression anglaise ) qui peut se traduire par "feuilles de style en cascade" - nous verrons plus tard pourquoi on parle de "cascade". Le CSS est un langage informatique utilisé pour présenter le contenu des fichiers HTML. Les fichiers CSS contiennent du code qui permet de gérer le design d'une page web. Un fichier CSS est une liste de styles à appliquer dans certains cas au texte compris entre deux balises.
Le style est la façon de présenter le texte : gras, italique, souligné, centré, ...
De nos jours, bien qu'il soit encore possible de mettre en forme le texte à l'aide de quelques balises prévues à cet effet ( mark, strong, em, ... ), il est plus judicieux de n'utiliser le HTML que pour le contenu et d'utiliser au maximum le CSS pour la présentation du contenu.
Pour juger de la qualité d'un site ( d'un point de vue technique ), il suffit de regarder le code-source de sa page d'accueil. Si la première ligne n'est pas : <!DOCTYPE html> et si, en plus, vous trouvez des balises </font> ...
De plus, l'avantage d'utiliser deux fichiers - l'un pour le texte, l'autre pour la présentation du texte - réside dans la réutilisation du code CSS pour d'autres textes. Un seul fichier CSS peut être utilisé pour plusieurs fichiers HTML. Sans ce fichier CSS, il serait difficilement envisageable de mettre à jour la présentation de site contenant plusieurs centaines de pages.
Autre point fort ( impossible à réaliser avec le HTML ). Le CSS permet de créer des styles spécifiques aux appareils utilisés pour lire le fichier HTML. Le même fichier HTML peut être affiché sur un écran d'ordinateur, sur un petit écran de smartphone ou être imprimé. Le CSS permet d'adapter le contenu du fichier HTML aux différents média : ordinateur, smartphone, imprimante, ...
Avec le CSS les pages web sont plus légères. Les internautes apprécient les autoroutes de l'information non-encombrées. Le développeur apprécie le fait que la mise à jour de la présentation est grandement facilitée. Le visiteur apprécie aussi le fait que la page se charge vite car légère ( surtout s'il utilise un smartphone ), mais également que l'apparence du site soit uniformisée.
Enfin - et c'est peut être le plus important - les robots des moteurs de
recherche - insensibles à la beauté d'une page - apprécient aussi les
pages HTML ayant un bon rapport texte / fichier
Alors s'ils tombent sur des balises </font>, des séries de
, des séries de <br>, ... votre site sera mal coté
par Google et il recevra moins de visiteurs !
Même si on n'a pas l'intention de publier ses notes, le CSS reste incontournable.
Bonne nouvelle !
Il n'est pas nécessaire d'apprendre le CSS pour utiliser du code CSS ...
Après avoir suivi le mini-cours consacré au HTML, vous savez que le texte présent dans le fichier HTML peut être visuellement amélioré grâce à un fichier CSS. La balise <link ... /> contient l'adresse de ce fichier texte.
Il suffit de regarder le code source d'une page web pour trouver l'adresse du fichier CSS, de télécharger ce fichier CSS dans le dossier de ses propres pages web. Puis, pour réutiliser ce code, il suffit de modifier la balise <link ... /> de ses propres fichiers HTML de telle sorte qu'ils pointent vers le fichier CSS téléchargé. Et, le tour est joué !
Exemple
Le fichier que vous lisez est un fichier HTML. En regardant dans la barre d'adresse du navigateur vous constatez que son nom est "index.htm".
En regardant le code-source du fichier HTML, vous constatez que l'adresse du fichier CSS est "cours.css".
Début du fichier index.htm :
<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
...
<link rel="stylesheet" href="../../cours.css" />
<link rel="stylesheet" href="../../cours2.css" />
...
<title>Mini-cours de CSS</title>
</head>
Dans la barre d'adresse du navigateur, en remplaçant index.htm par cours.css, sous vos yeux ébahis, apparaît alors le code CSS ! ... soit directement dans votre navigateur ou - après avoir accepté que votre navigateur lance un autre logiciel - dans la fenêtre du logiciel dédié à l'édition du code CSS. À moins que vous préféreriez l'enregistrer directement sur votre disque dur - par exemple, dans le dossier de vos pages web.
Exemple de contenu d'un fichier CSS :
/* les balises ========================== */
/* ========= body et les grandes sections */
body{
background-color: gray;
}
header {
background-color: #d5b980;
border-radius: 20px;
margin: 5px;
padding: 5px;
text-align: center;
}
article {
background-color: #b9d175;
border-radius: 20px;
padding: 10px;
margin: 5px;
}
footer {
background-color: #d5b980;
border-radius: 20px;
margin: 5px;
padding: 5px;
text-align: center;
}
aside {
background-color: #96dc97;
border-radius: 20px;
padding: 5px;
margin: 5px;
}
nav {
background-color:#80FFFF;
border-radius:20px;
margin: 5px;
padding: 5px;
}
/* ====================== autres balises */
/* ------------- lien ------------------- */
a:link{color: blue;}
a:visited {color: red;}
a:hover {color: white;}
/* ------------- titres ----------------- */
h1 {
background-color : #FF1493;
text-align: center;
margin-top: 60px;
}
h2 {
background-color : #FF69B4;
padding-left: 15px;
margin-top: 30px;
}
h3 {
background-color : #FFC0CB;
padding-left: 30px;
margin-top: 15px;
}
/* les class ===================== */
.code {
background-color: white;
color: black;
}
.note {
color: #ff4500;
font-size: 10pt;
text-align: justify;
}
/* les id ======================= */
#titre {
font-size: 200%;
}
La connaissance de très peu de styles suffit à la réalisation de très jolies pages : background-color, color, margin (et ses dérivés), padding (et ses dérivés), text-align, display et border-radius. Soit 7 styles. Et, le dernier est très facultatif.
Pourquoi apprendre le CSS ?
Car, pour les étudiants qui savent créer des notes au format HTML, les rendre belles facilite la mémorisation.
De plus, c'est plus facile qu'apprendre les bases du HTML.
C'est la suite logique du cours de HTML.
Et, ce mini-cours est encore plus court que celui consacré au HTML !
Les goûts et les couleurs variant d'un individu à l'autre, l'apprentissage du CSS permet de personnaliser un fichier CSS créé initialement par un autre.
Il existe sur Internet de nombreux cours pour apprendre le CSS. Certains sont complets et donc assez long à apprendre. D'autres sont plus simples. Ce cours vise moins à créer de belles pages web que de belles notes.
Certains puristes pourraient critiquer la façon de présenter les choses. J'ai privilégié l'aspect pédagogique, voire ludique, par rapport à une orthodoxie qui elle-même évolue.
À la fin de ce cours, si cette initiation vous a plu, vous aurez la possibilité d'aller plus loin vers de "vrais" cours.
Pour éviter l'indigestion et croire, à tort, que c'est compliqué, il ne faut pas vouloir tout comprendre en quelques minutes. Lire une partie ( un ou deux chapitres ) par jour, c'est bien suffisant.