Le langage informatique CSS« Cascading Style Sheets » permet de créer des mises en page complexes pour vos sites Internet. Couplé au langage HTML, le CSS vous permet de mettre en place des styles pour vos textes, vos photos, vos liens hypertextes, etc.
Les styles sont regroupés dans un fichier portant l’extension.css. Ce fichier, appelé « feuille de styles », peut-être importé sur chaque page de votre site, permettant ainsi de gagner un temps considérable en cas de modification de la présentation.
Pourquoi utiliser le CSS ? Lorsque vous créez une feuille de styles, vous dissociez complètement la structure HTML (les balises) de la présentation de votre site internet. Cela vous permet de réaliser des pages HTML plus simples (code source simplifié) mais surtout plus lisibles. L’utilisation d’une feuille de styles facilite la mise à jour de votre charte graphique, ce qui constitue le principal avantage du CSS.
Par exemple, imaginez que vous ayez dix titres de niveau 1 (balise<h1>) sur votre site internet ; par défaut, ces titres seront affichés en noir. Pour changer leur couleur, vous devriez modifier la balise<font>sur chacun d’eux.
En CSS, vous ferez la même chose en une seule ligne. Même facilité pour changer la couleur puisqu’il suffit de modifier le code hexadécimal défini dans la propriété.
Comment utiliser le CSS ? Le langage CSS s’écrit comme ceci sélecteur{ propriété CSS à utiliser : valeur ;} ExempleVoici le code CSS pour définir la couleur de fond d’une page en rouge :
body{background-color :red ;}
Pour la changer en noir, modifiez simplement la valeur : body{background-color :black ;}
Où placer le code ?
• vous pouvez directement l’ajouter à votre page HTML ;
• ou bien le placer dans un fichier externe (la feuille de styles qui porte obligatoirement l’extension .css) et ainsi l’importer dans plusieurs fichiers HTML.
Code CSS interne : Pour insérer du CSS directement dans la page, vous devez le coder entre les balises
<style type="text/css">et </style>que vous placerez ensuite dans l’en-tête de votre fichier HTML (entre les balises<head>et</head>).
Exemplemodification de la couleur de fond de la page :
<style type="text/css">
body{
background-color :red ; }
</style>
Code CSS externe : Pour extérioriser le CSS, vous devez en premier lieu créer un nouveau fichier ayant pour extension .css dans lequel vous rédigerez vos propriétés. Vous devrez ensuite l’importer dans toutes les pages de votre site Internet où vous désirez appliquer les modifications.
Pour importer une feuille de styles, il faut placer une balise<link>dans l’en-tête des fichiers HTML
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
lehref permet de définir l’emplacement de votre fichier CSS.
Des styles en cascade : Les propriétés CSS bénéficient d’un système d’héritage et toutes sont appliquées en cascade aux autres balises contenues dans la feuille de styles.
ExempleSi vous modifiez la couleur du texte dans la balisebody, tous les textes qu’elle contient seront modifiés.
Des styles combinés : Lorsque vous créez votre feuille de styles, il est parfois utile de modifier l’apparence de plusieurs balises en même temps. Vous pouvez donc définir des propriétés sur plusieurs sélecteurs différents.
ExemplePour modifier simultanément la couleur de plusieurs niveaux de titre, il suffit simplement de séparer les sélecteurs par une virgule.
h1,h2,h3{
color :red ; }
Commentaires : Il est parfois utile de commenter vos styles, notamment lorsque vous travaillez à plusieurs personnes sur les mêmes fichiers. Dans ce cas, vous devez simplement entourer votre commentaire par/* */.
Le texte sera visible dans le fichier (code source) mais ne sera pas affiché à la consultation de vos pages Internet.
Styles spécifiques
Le langage CSS permet de modifier l’apparence en utilisant un sélecteur global. Par exemple, on peut modifier tous les titres de niveau 1 en utilisant le sélecteur global h1.Il est aussi possible de créer des styles spécifiques et de les appliquer sur certains titres. On utilise alors une classe ou un ID.
Les classes : Une classe permet de spécifier des propriétés CSS sur une balise spécifique. La mise en place d’une classe se passe en deux-temps :
– création de la classe dans votre feuille de styles ;
– puis déclaration de la classe dans la balise HTML souhaitée.
ExempleVous avez trois titres rouges de niveau 1 dans votre fichier HTML ; cependant, vous désirez modifier la couleur du dernier en bleu.
Dans votre fichier HTML, vous déclarez la classe dans la troisième balise de titre simplement dans la balise ouvrante.
Listing 1 : Déclaration d’une classe
<h1> T i t r e 1 < /h1>
<h1> T i t r e 2 < /h1>
<h1 c l a s s=" titre - en - b l e u "> T i t r e 3 < /h1>
Puis vous créez la classe"titre-en-bleu"dans votre feuille de styles. La syntaxe est la même que précédemment, à ceci près que l’on fait précéder le sélecteur d’un point.
Le nom du sélecteur est peu important, cependant je vous conseille de le rendre le plus explicite possible (vous ne pouvez pas ajouter d’espaces ou de caractères spéciaux dans le nom d’une classe).
.titre-en-bleu{
color :blue ; }
Les ID : Les ID permettent de faire la même chose que les classes. Leur utilisation diffère à trois choses près : on ne peut les utiliser qu’une fois dans votre fichier HTML ; on doit faire précéder le sélecteur d’un dièse # ; enfin on doit écrire dans la balise ouvranteid=" "et non pasclass=" ".
Les ID sont le plus souvent utilisés pour définir la mise en page globale d’une interface graphique.
Exemple
Listing 2 : Exemple de code HTML contenant un ID suivi du code CSS
<h1 id=" titre - en - b l e u "> T i t r e 3 < /h1>
#titre-en-bleu{
color :blue ; }
Formater les textes
Grâce aux propriétés CSS on peut bien sûr modifier l’apparence des textes et bien entendu les combiner pour appliquer plusieurs de ces styles sur un seul et même texte.
Changer la couleur : Pour changer la couleur d’un texte on utilise la propriété color suivie de la couleur souhaitée. La couleur peut s’exprimer de trois façons différentes :
– par son nom (red, black, blue, orange, etc.) ;
– par son code hexadécimal correspondant précédé d’un dièse (#000000 pour le noir,#FFFFFF pour le blanc etc.) ; – par son code RVB (rgb(255,255,255) ou rgb(0,0,0)).
ExempleVoici comment modifier les textes contenus dans les balises paragraphes en bleu : p{
color :blue ; }
Alignement : Pour modifier l’alignement d’un texte on utilise la propriététext-align. On aligne le texte à gauche avec la valeur leftau centre avec centerou à droite avec right. On peut également justifier un texte avec la valeurjustify
ExempleVoici comment centrer les textes contenus dans les balises paragraphes : p{
text-align :center ; }
Mettre en gras : Pour mettre en valeur certaines parties du texte on peut bien sûr utiliser les balises HTML
<strong> ou<b>. La propriété équivalente en CSS est font-weightsuivie d’une valeur 100, 200, 300 (selon l’épaisseur des caractères souhaitées) ou tout simplement la valeurbold.
ExempleVoici comment mettre le texte des paragraphes en gras : p{
font-weight :bold ; }
Mettre en italique : Pour changer le texte en italique, on utilise la propriété CSS font-styleavec la valeur italic.
ExemplePour mettre en italique le texte des paragraphes : p{
font-style :italic ; }
Décoration : Pour changer la décoration des textes, on utilise la propriététext-decorationavec les valeurs suivantes :underline pour souligner,overlinepour surligner,line throughpour la barrer,blinkpour la faire clignoter et enfinnone pour annuler la décoration d’un texte.
ExemplePour souligner les textes des paragraphes : p{
text-decoration :underline ; }
Hauteur et espacement : Pour espacer les lignes en augmentant la hauteur des lignes, on utilise la pro- priétéline-height. Pour augmenter ou réduire l’espacement des lignes entre les caractères, c’est la propriété letter-spacing.
ExemplePour augmenter la hauteur des lignes ainsi que l’espacement entre les lettres des textes des paragraphes : p{
line-height :20px ; letter-spacing :2px ; }
Majuscules et minuscules : On peut définir la casse d’un texte en utilisant la propriététext-transformsuivie de la valeurlowercase pour changer le texte en minuscules ou uppercase pour le mettre en majuscules.
ExemplePour changer tous les textes des paragraphes en majuscules : p{
text-transform :uppercase ; }
Police de caractères : La limitation du nombre de police de caractères que l’on peut utiliser sur Internet permet d’augmenter la compatibilité de votre site entre les navigateurs (voir les possibilités en CSS3). Pour modifier la police de caractères d’un texte, on utilise la propriétéfont-family avec le nom de la police souhaitée comme valeur. Pour définir plusieurs polices, on sépare les noms par une virgule ; ainsi si la première de la liste n’est pas disponible sur l’ordinateur de l’internaute, la seconde sera utilisée.
ExemplePour définir la police de caractères des textes des paragraphes en Verdana puis en Arial : p{
font-family :Verdana,Arial ; }
ExemplePour modifier la taille des textes des paragraphes en 12 pixels : p{
font-size :12px ; }
Marge et bordure
Marges intérieure et extérieure : La marge intérieure est l’espace affiché entre un élément et sa bordure, la marge extérieure par contre est l’espace affiché au-delà de la bordure. Pour définir une marge intérieure, on utilise la propriétépaddinget pour la marge extérieure la propriété margin.
ExemplePour définir des marges intérieure et extérieure de 10 pixels sur les images : img{
padding :10px ; margin :10px ; }
Bordures : La propriété à utiliser estborderet les valeurs taille, couleuret type. En ajoutant le nom d’un côté, on peut définir l’apparence des bordures de façon indépendante ; par exemple la propriétéborder-bottom pour définir la bordure du bas.
ExemplePour créer une bordure noire de 10 pixels autour des images : img{
border :10px solid black ; }
Le background
Couleur en fond d’écran : Pour modifier la couleur du background d’un élément, on utilise la propriété background-color, suivie du nom de sa couleur (ou de son code, RVB ou hexadécimal).
ExemplePour modifier la couleur de fond de la page en noir : body{
background-color :black ; }
Image en fond d’écran : Pour modifier le fond d’écran en utilisant une image la propriété estbackground-image.
Par défaut l’image sera répétée pour tapisser le fond complet de votre écran.
ExemplePour tapisser votre page avec l’image photo.jpg : body{
background-image :url(photo.jpg) ; }
Position et répétition : Pour éviter que l’image soit répétée sur l’ensemble de l’écran, on utilise la propriété background-repeatavec comme valeur repeat-xpour répéter l’image sur une ligne horizontale,repeat-y pour répéter l’image sur une ligne verticale etno-repeat pour ne l’afficher qu’une seule fois.
On peut également la positionner de façon précise avec la propriétébackground-position suivie de son position- nement par rapport au bord haut gauche.
ExemplePour ajouter une image de fond, qui ne se répète qu’une fois et qui est placée en haut au centre : body{
background-image :url(photo.jpg) ; background-position :top center ; background-repeat :no-repeat ; }
Les listes
Apparence des puces : Par défaut, les puces affichées dans une liste sont rondes et noires. On en change le style en utilisant la propriétélist-style-typeavec comme valeur le nom du type souhaité,circle, square, décimal, etc. Pour supprimer l’affichage des puces on utilise la valeurnone.
ExemplePour supprimer les puces dans chaque liste : ul{
list-style :none ; }
Puces en image : Pour personnaliser vos listes en remplaçant les puces par une image, on utilise la propriété list-style-imagesuivie de l’URL du fichier graphique à utiliser.
ExemplePour remplacer les puces par l’image arrow.png : ul{
list-style-image :url(arrow.png) ; }
Taille des éléments
Définir la largeur : Pour définir la largeur d’un élément CSS, on utilise la propriétéwidth, suivie de sa taille.
Cette valeur peut-être exprimée en pixels, en pourcentage ou en auto. On peut également définir des largeurs maximum et minimum avec les propriétésmax-width etmin-width dont les valeurs sont exprimées en pixels, en pourcentage ou réglées surnone.
ExemplePour définir une largeur de 200 pixels sur les images (avec une largeur minimum de 200 et maximum de 250 pixels) :
img{
width :200px ; min-width :200px ;
Définir la hauteur : Pour définir la hauteur d’un élément, c’est exactement la même méthode que pour la largeur,widthdevenantheight. De même pour définir des hauteurs maximum et minimum on utilise les propriétés max-heightetmin-height. Les valeurs sont exprimées en pourcentage ou en pixels.
ExemplePour définir une hauteur de 200 pixels sur les images (avec une hauteur minimum de 200 et maximum de 250 pixels) :
img{
height :200px ; min-height :200px ; max-height :250px ; }
Positionnement
Absolute : Avec le langage CSS on peut créer des calques permettant de placer certains éléments les uns au dessus des autres. On peut ainsi positionner un élément très facilement sur la page en utilisant la propriété positionavec la valeurabsolute. Par défaut l’élément sera situé en haut à gauche à partir du bord. Par exemple pour placer l’élément à 50 pixels du haut et 40 du côté gauche, on utilise les propriétéstopet left.
ExemplePour placer un élément (contenant la classe bloc1) à 40 pixels du bord gauche et à 20 du bord haut : .bloc1{
top :20px ; left :40px ;
position :absolute ; }
Autres valeurs : On peut utiliser d’autres valeurs pour la propriétéposition. Avecstaticl’élément est affiché selon son ordre d’arrivée, c’est d’ailleurs a valeur par défaut. Avecfixed l’élément est positionné par rapport au bord gauche de la page mais il ne défilera pas avec elle. Avecrelativel’élément est positionné selon la position de l’élément précédent. Avecinherit, l’élément est positionné selon son élément parent.
Des styles par état
Au passage de la souris : On peut spécifier des styles différents selon que l’élément est survolé par le pointeur de la souris, actif, etc. Par exemple on peut changer la couleur d’un lien lorsque l’internaute passe le pointeur au dessus en ajoutant à la suite du sélecteur :hover.
ExemplePour modifier la couleur des liens en rouge lorsqu’ils sont survolés : a :hover{
color :red ; }
Quand l’élément est actif : On peut définir un style différent lorsque l’élément est cliqué en ajoutant à la suite du sélecteur :active.
ExemplePour changer la couleur des liens en bleu lorsque l’internaute clique dessus : a :active{
color :blue ; }
Quand l’élément est déjà cliqué : Lorsqu’une liste est trop importante, il est pratique pour l’internaute de savoir sur quel lien il a déjà cliqué. On peut le faire en ajoutant à la suite du sélecteur :visited. Les styles seront appliqués sur les liens ayant déjà été cliqués.
ExemplePour colorer les liens déjà visités en vert : a :visited{
color :green ; }
Conclusion
Le langage CSS est très vaste. De plus à cause des différences d’interprétation entre les navigateurs, on doit sans cesse jouer avec les astuces pour créer des feuilles de styles aboutissant à un graphisme identique entre Firefox, Chrome, Internet Explorer.
Je vous invite à vous rendre sur internet pour approfondir vos connaissances.
Par exemplewww.alsacreations.comqui publient des leçons complètes sur l’apprentissage de CSS, des astuces et des exercices.
– http ://lti.epfl.ch/CoursCSS/index.html pour se tester – TP : création d’un site pas à passur le site du zéro ! – Comprendre le fonctionnement d’un site webISN
