CSS (Cascading Style Sheets) fait son apparition 5 ans après l'HTML. Avant cela, on réglait la forme des pages WEB directement dans les balises HTML mais les pages devenant trop complexes rendaient le codage illisible. Le CSS permet de gérer cela à part.
Pour vous persuader de son intérêt, retirer le style de la page que vous êtes en train de lire. (Dans Firefox, Affichage puis Style de la page puis Aucun style)
Ouvrir un nouveau fichier dans gedit et l'enregistrer sous style.css dans votre dossier ICN-VOTRENOM.
Ensuite ouvrir dans gedit votre fichier maprésention.html et insérer dans la balise <head> la ligne de code suivante:
<link rel="stylesheet" href="style.css" />
Ceci indique au navigateur que le style de la page se trouve dans le fichier style.css.
Pour la suite, pour plus de lisibilité, séparer votre écran en deux avec:
p
{
color: green;
}
Incorporer ce code dans votre fichier style.css, enregistrer puis mettre à jour votre page mapage.html. Que se passe-t-il?
Le "problème" avec le code précédent est que tous les paragraphes seront écrits en vert. Pour mieux distinguer certains paragraphes, certains titres, certaines divisions, on les identifie grâce à id ou class comme on l'a déjà fait avec les ancres au chapitre précédent.
id : une seule fois par page. Par exemple, ajouter à un de vos paragraphes de votre fichier mapage.html la partie noire du code ci-dessous correspondant à id :
<p id="important"> ...votre paragraphe... <p/>
Vous venez d'identifier ce paragraphe par l'identifiant "important" (on peut mettre ce que l'on veut comme identifiant...). A présent, vous allez écrire dans la feuille de style style.css comment vous voulez que CE paragraphe apparaisse dans votre page WEB.
Ajouter dans votre fichier style.css, le code CSS suivant:
#important
{
color: red;
font-size:14px;
font-weight:bold;
}
Enregistrer vos fichiers puis mettre à jour votre page mapage.html.
Vous commencez à voir apparaître d'autres attributs permettant la gestion de la taille du texte ou de son apparence, 14 pixels et en gras ici. Une liste (non exhaustive!) de ces propriétés CSS sera donnée par la suite.
L' id "important" ne pourra pas être utilisé pour un autre paragraphe une seconde fois dans votre page. C'est ce qui le différencie de l'identification par class .
class : plusieurs fois par page. Tout a été dit précédemment. Pour ce qui est du code, il suffit de remplacer id par class dans le document HTML et # par . dans le document CSS:
<p class="important"> ...votre paragraphe... <p/>
.important
{
color: red;
font-size:14px;
font-weight:bold;
}
Vous pourrez ainsi utiliser l'identification "important" pour plusieurs paragraphes.
Pour cela, on modifie les propriétés de la balise <body>. Insérer ce code dans votre fichier style.css en ayant au préalable enregistré une image nommée fond.jpg ici dans votre dossier images.
body
{
background: url(images/fond.jpg);
}
L'excellent site du zero qui d'ailleurs vous sera d'une grande aide par la suite propose un mémento des principales propriétés de mise en forme CSS.