
INSTITUT UNIVERSITARIE DES SCIENCES ET TECHNIQUES D’ABECHE
DEPARTEMENT D’ELECTROMECANIQUE ET INFORMATIQUE INDUSTRIELLE
Technologie Internet : Le CSS
IIG3 Année académique 2012/2013
Chargé de cours : Dr Abakar Mahamat Ahmat
I - Qu’est ce que la CSS
Cela signifie : "Cascading Style Sheets", ce qui peut se traduire en français par "Feuilles de
style en cascade". Les CSS (Cascading Style Sheet = feuille de styles) sont des documents au
format texte, tout comme le HTML. La différence est qu'une CSS n'est prévue ni pour être
visualisée par l'internaute ni pour être affichée directement dans le navigateur. Une feuille de
styles n'est qu'un document qui définit comment une page HTML doit être affichée.
Le navigateur Web s'occupe de charger la CSS sans que l'internaute doive intervenir ; une
CSS a pour vocation d'agir en arrière plan.
En utilisant des styles, il est par exemple possible de dire que tous les liens, au lieu d'être
bleus ou violets comme on en a l'habitude, doivent être gris ; ou bien que le texte est toujours
orange.
En fait, l'idée est que le navigateur parcourt le document HTML. Lorsqu'il rencontre une
balise, il demande à la CSS de quelle manière il doit l'afficher. La CSS ne sait rien faire
d'autre que dire comment doit être affiché tel ou tel élément de la page Web.
II - Où mettre du code CSS
En règle générale, on écrit le code CSS dans un fichier à part (avec l'extension .css au lieu de
.html). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et
la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc.
On peut écrire du code CSS dans trois endroits différents, selon ce qu'on préfère :
Première méthode : dans un fichier .css (le moyen le plus recommandé)
Deuxième méthode : dans l'en-tete du fichier HTML
Et enfin troisième méthode : dans les balises
Première méthode : dans un fichier .css :
Le plus souvent on écrit du code CSS dans un fichier spécial ayant l'extension .css
(contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique
quasiment utilisée.
Parmi les nombreux avantages que cette solution apporte, il y a la possibilité de pouvoir
proposer facilement plusieurs designs différents aux visiteurs du site.
Remarque :
On doit ajouter dans le fichier HTML (XHTML) une ligne entre les balises <head> </head>
qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :
<link rel="stylesheet" media="screen" type="text/css" title="Essai_IUSTA" href="department_IIG.css" />
La balise <link /> comporte plusieurs attributs qu’on peut en modifier deux d'entre eux pour
le moment :
- title : c'est le nom de la feuille de style
- href : c'est l'emplacement où se trouve la feuille de style (sous forme de lien).
Il est conseillé de mettre dans le même dossier les deux fichiers .html et .css
Directement dans le header du fichier XHTML (Méthode B) :
Il est aussi possible de taper du CSS directement a l'intérieur même du fichier XHTML, entre
les balises <head> </head>. On doit y mettre une balise <style> </style> à l'intérieur :
Les deux méthodes se ressemblent beaucoup. Cependant, la première qui utiliser un .css
externe est plus pratique, car elle permettra de faire changer le design du site en un clin d'oeil.