Les CSS (Cascading Style Sheets) peuvent constituer le point de réference du formatage (couleurs et apparence du texte, des liens, et de certains éléments de la page html) de tout le site web. Si votre site comporte plus d'une centaine de pages HTML, il serait fastidieux de les modifier une à une, si vous décidez de changer la couleur de vos liens sur votre site ! Les CSS vous permettent une maintenance extrèmement simple...
Par exemple, si vous désirez que tous les liens de votre site soient rouges, blancs lorsqu'ils sont survolés par la souris, et orange une fois cliqués, vous utiliserez ce code :
Autre exemple, mais ici les liens survolés vont être en gras, soulignés, verts et en taille de 20pt :
Intégrez la couleur du body dans les CSS et non dans le code HTML de la page : si vous décidez de modifier après coup la couleur du body, vous n'aurez qu'à modifier une ligne dans le fichier CSS et non chaque page HTML !
Les barres de défilement :
Les mots ou paragraphes qui appartiennent à la famille "beurk" seront rouges,
d'une taille de 20, en police verdana, en gras et soulignés... Ces mots ou paragraphes
seront intégrés dans un <span> :
<span id="beurk"> ce mot adopte les caractéristiques de la famille "beurk"</span>
Cette phrase se référe aux attributs de la famille "glob" :
<span id="glob">Bonjour à tous, petits et grands...</span>
Si l'on souhaite attribuer à un paragraphe un style particulier et un autre style aux liens de ce même paragraphe, on procèdera ainsi :
On obtient alors un paragraphe adoptant le style "glob2" pour le texte mais ses liens qui pointent sur les CSS auront un style différent...
Voici le code de cet élément :
Souvent dans une même feuille de style, on trouve #identifiant ou .identifiant ... Et dans les pages web, on trouvera <div class="nom_style"> ou <span id="nom_style">
Comment s'y retrouver ? Si au sein d'une même page, plusieurs éléments peuvent faire appel au même style, alors ils partagent le même héritage commun, la même classe. On appliquera donc alors le code :
<span class="nom_style"> un texte, un paragraphe... </span>
<span class="nom_style"> un autre texte, un autre paragraphe... </span>
Dans le même temps, la feuille de style comportera cette ligne :
Si au contraire, la feuille de style comporte :
#nom_style { attributs du style:propriétés;}
seul un élément dans la page web pourra y faire appel et adopter les attributs définis. Cet élément se référera au style de la manière suivante :
<span id="nom_style"> un texte, un paragraphe... </span>
On a vu que les CSS s'intégrent dans la page HTML au niveau du <head> mais plutôt que de répéter à chaque page HTML les mêmes CSS, vous pouvez créer un fichier.css qui incluera toutes vos CSS.
Un fichier CSS se crée de la même manière que vous créez une CSS mais SANS les balises d'ouverture et de fermeture <style> et </style> !!!
Pour appeler votre fichier votre fichier.css, vous intégrerez dans le <head> de votre page HTML ce lien :
Pour aller plus loin, -- bien plus loin -- avec les CSS, visitez ce site sur les CSS.