Formations et ressources pour les TICE - IUFM Aix-Marseille

Les feuilles de style ne sont pas une nouveauté mais les CSS (Cascading StyleSheet) sont devenues la solution la plus utilisée pour mettre en forme un document XML ou HTML.

Le terme cascading souligne une propriété importante du langage : les caractéristiques de présentations se transmettent « en cascade » d’un élément à ses fils. Par exemple, si un élément de type a, dont on ne sait rien de la police, se trouve dans un élément de type em, qui est en italique, alors le a va hériter de son père em le fait d’être en italique.

La mise en forme va être placée à part du code HTML, le plus souvent dans un fichier extérieur. Elle devient donc modifiable indépendamment du contenu.

Il est possible d’inclure une feuille de style de deux manières différentes dans un document. La première est de mettre la feuille de style directement dans l’entête du document, entre des balises <style type="text/css">...</style. >

La seconde est de mettre le code dans un fichier externe et de l’inclure avec dans l’entête une balise de la forme

Ces deux méthodes peuvent d’ailleurs être utilisées ensemble dans le même document. Dans ces conditions, si elles se contredisent, c’est la feuille écrite directement dans le document qui a raison. Une feuille de style externe permet de donner une présentation unifiée à tout un site.

Tutoriels en ligne

• sur aide.net
• sur le site du zéro
• Alsacréation
• Les sélecteurs en détail
• aide mémoire des sélecteurs
• référence complète de la syntaxe CSS

Exemples

• le site d’anglais d’Aix-Marseille (voir la CSS)
• avec une autre feuille de style(voir la CSS)
• avec encore une autre feuille de style(voir la CSS)
• Toute la puissance des CSS : CSS Zen Garden

Créer ses CSS

• Editeurs CSS Cascade ; Css toolbox
• Générateur en ligne : générateur de CSS ou (en anglais) CSSCreator
• Optimiseur en ligne : CleanCSS
• Validateur de CSS
• Yahoo User Interface library ensemble d’utilitaires prêts à l’emploi en Javascript et Ajax dont CSS Grid Builder, un générateur de mise en page à base de CSS