Les CSS - Créer son site Web professionnel

Avant 1999, quand un designer de sites Web voulait effectuer la mise en forme et la mise en page de ses
créationsWeb,ildevaitlefairedanslecodeHTML.C ’ est à direqu ’ ilfallait«mélanger »ladescriptionducontenu
etlamiseenforme,letoutdansunjoyeuxfatras!Cecinefacilitaitpaslesmisesàjourdesmisesenformeet
desmisesenpage.
Avec l ’ HTML 4, en décembre 1996, sont apparues les CSS, les Cascading Style Sheets, ou feuilles de style en
cascadedanslalanguedeMolière.
Lesfeuillesdestyleontpourobjectifdeséparerladescriptionducontenuquiincombeàl ’ HTML,delamiseen
forme et de la mise en page. Nous avons ainsi deux langages avec des rôles bien définis, bien distincts.
Actuellement,cesontlesCSS2.1quiprévalent(recommandationofficielleduW3Cenjuin2011).
UtiliserlesCSSn ’ aquedesavantages:
Comme pour l ’ HTML,lesCSSévoluent.ActuellementlesCSSarriventenversion3,avecdebellesnouveautés
pour les designers Web : zones d ’ affichage aux coins arrondis, ombres portées, des dégradés et de la
transparence, utilisation de polices de caractères variées, des formulaires de saisie interactifs... De nouveau,
cettenouvelleversion3desCSSn ’ estpasencoreenrecommandation,elleesttoujoursenversiondetravail
( Working Draft) et les navigateurs Web ne reconnaissent pas encore la totalité des spécifications. Mais les
designersutilisentaujourd ’ huicertainsélémentsreconnuspartouslesnavigateurs.
PoureffectuerunemiseenformeetunemiseenpageenCSS(lesconcepteursparlentdesite«fullCSS »pour
lessitesWebquiutilisentparfaitementlesdeuxlangages,HTMLetCSS,dansleursrôlesdédiés),ledesigner
doitindiquersurquoivonts ’ appliquerlesstylesCSSqu ’ ilacréés.Pourindiquersurquoivonts ’ appliquerses
styles,ledesignerutilisedessélecteurs .
Il existe beaucoup de types de sélecteurs ; voici, de manière non exhaustive, trois des sélecteurs les plus
utilisés:
LesCSS
1.L ’ étatdeslieux
●Séparationclaireetnetteducontenu,delamiseenformeetdelamiseenpage.
●Beaucoupplusdepossibilitésdemiseenforme.
●Misesenpagemieuxstructurées.
●Créationuniquedestylespourlamiseenformeetlamiseenpage.Doncrisqued ’ erreurquasimentnul,
puisqu ’ iln ’ yapasderépétitiondesaisie.
●Réutilisabilitédesstylesàvolonté.
●Miseàjour«instantanée »surlatotalitédusite.
2.Lessélecteurs
●Lesélecteurdeclassepermetdecréerunstyleetdel ’ appliquersurlesélémentsHTMLqueledesigner
souhaite.
●Lesélecteurd ’ élément permet de créer un style et de l ’ appliqueruniquementsurlesélémentsHTML
voulus.
●Lesélecteurd ’ identificationpermetdecréerunstyleetdel ’ appliquerdemanièreuniquesurunélément
HTMLspécifié.Ceciestsurtoututilisépourlamiseenpage.
3.Lamiseenforme
- 1 -© ENI Editions - All rights reserved - boulet02 boulet02
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FbmkuRWRpdGlvbnMuTWVkaWFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VuaS5FZGl0aW9ucy5NZWRpYXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA4Ym91bGV0MDIgYm91bGV0MDIgLSA5NGNjMTZmZC0zZmU2LTQxNDUtOWY5Yi0yZjY3MTNjMjQ2YmPR9jds7A3PiAsA-enidentnumber

LesCSSpermettentd ’ effectuerunemiseenformetrèsélaboréeparrapportàcequenouspouvionsfaireen
HTML.Lamiseenformetypographiqueestévoluée,avecl ’ utilisationdepolicesdecaractèresetd ’ unitésvariées.
Lamiseenformedesimages,destableauxetdesformulairesestfineetprécise.
LesCSSexploitenttouteleur«puissance »danslesfonctionsdemiseenpage.Ledesignervapouvoirdéfinir
des zonesd ’affichagepositionnéesdemanièretrèspréciseàl ’ écran,pourensuite yplacerlescontenusvoulus.
Voilàunexempledestructurationenzonesd ’ affichagepourlapaged ’ accueildusitedujournalLeMonde.
AveclesCSS,vouspouvezcréerdesbarresdenavigationévoluées,desélémentsinteractifspourafficherdu
contenu(systèmed ’ onglets,d ’ accordéon,desgaleriesphotos...).
ExempledelabarredenavigationdusitedujournalLeMonde,nondéployée :
ExempledelabarredenavigationdusitedujournalLeMonde,déployée :
4.Lamiseenpage
- 2 - © ENI Editions - All rights reserved - boulet02 boulet02
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FbmkuRWRpdGlvbnMuTWVkaWFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VuaS5FZGl0aW9ucy5NZWRpYXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA4Ym91bGV0MDIgYm91bGV0MDIgLSA5NGNjMTZmZC0zZmU2LTQxNDUtOWY5Yi0yZjY3MTNjMjQ2YmPR9jds7A3PiAsA-enidentnumber

Exempledesystèmeavecdeuxongletssurlesited ’ Apple:
Exempled ’ unsystèmed ’ accordéonsurlesitedeCanon:
- 3 -© ENI Editions - All rights reserved - boulet02 boulet02
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FbmkuRWRpdGlvbnMuTWVkaWFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VuaS5FZGl0aW9ucy5NZWRpYXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA4Ym91bGV0MDIgYm91bGV0MDIgLSA5NGNjMTZmZC0zZmU2LTQxNDUtOWY5Yi0yZjY3MTNjMjQ2YmPR9jds7A3PiAsA-enidentnumber

- 4 - © ENI Editions - All rights reserved - boulet02 boulet02
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FbmkuRWRpdGlvbnMuTWVkaWFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VuaS5FZGl0aW9ucy5NZWRpYXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA4Ym91bGV0MDIgYm91bGV0MDIgLSA5NGNjMTZmZC0zZmU2LTQxNDUtOWY5Yi0yZjY3MTNjMjQ2YmPR9jds7A3PiAsA-enidentnumber

- 5 -© ENI Editions - All rights reserved - boulet02 boulet02
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FbmkuRWRpdGlvbnMuTWVkaWFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VuaS5FZGl0aW9ucy5NZWRpYXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA4Ym91bGV0MDIgYm91bGV0MDIgLSA5NGNjMTZmZC0zZmU2LTQxNDUtOWY5Yi0yZjY3MTNjMjQ2YmPR9jds7A3PiAsA-enidentnumber