la feuille de style (CSS)

Une des techniques clés utilisées dans les techniques modernes de conception de page Web est quelque chose appelé la séparation de la présentation et du contenu. 

Dans les premiers jours du web, il n'y avait aucun moyen de le faire, ce qui signifie que les pages HTML étaient gonflées, répétitives et difficiles à comprendre.

 Par exemple, si vous souhaitez que le texte du corps principal du site utilise la police type Verdana, d'une taille de 12 pt, chaque paragraphe de texte doit commencer par une balise <font face = verdana size = 12pt>. Cela pourrait représenter des centaines ou des milliers de ces balises sur l'ensemble du site. Si vous avez par la suite voulu remanier le site, changer tous ces tags a été beaucoup de travail.

Il y a quelques années, il y a eu une nouvelle révision du langage HTML (et une nouvelle génération de navigateurs Web qui étaient capables d'afficher des pages créées avec elle). Haut de la liste des nouvelles fonctionnalités était quelque chose appelé CSS, Cascading Style Sheets ou HTML Style Sheets.

Une feuille de style est un fichier distinct qui complète une, une partie ou la totalité des pages HTML de votre site. Il contient toutes les informations sur la façon dont le texte, les images et la mise en page de vos pages réellement regarde. Ainsi, pour mettre à jour l'exemple ci-dessus, il peut y avoir une section dans le fichier CSS qui indique que toutes les occurrences de la balise <p> doivent utiliser la police type Verdana dans une taille 12pt. Maintenant, toutes les pages de votre site ont simplement besoin d'entourer les paragraphes avec rien de plus qu'une balise <p> et ils apparaîtront tous magiquement dans la police de caractères et la taille correcte. Le meilleur bit, c'est que vous pouvez changer l'apparence de chaque paragraphe dans votre site entier en changeant une entrée dans un seul fichier CSS, plutôt que d'avoir à changer les balises <font>.

Dans le fichier css, on écrit : 

p {font-family: verdana,sans-serif;}

cela signifie ce style est appliqué pour  toutes paragraphes qui existent sur les fichiers HTML liés avec cette feuille de style .  

CSS a d'autres avantages aussi. Lorsque vous spécifiez quel fichier CSS doit être utilisé pour formater votre page, vous pouvez spécifier différents fichiers CSS pour différentes situations. Par exemple,  pour une page affichée à l’écran, on peut utiliser un ensemble de styles répondant à ce style d’affichage et  un ensemble différent pour sortie  imprimante. Et encore un autre ensemble pour les pages Smartphone ou un PDA ou un projecteur.

Et également accessibilité aux personnes handicapées, CSS peut vous aider  aussi. Vous pouvez configurer une feuille de style distincte pour les personnes qui ont des problèmes de vue de base ou de dyslexie, c'est-à-dire un texte volumineux, pas de graphiques et une couleur de fond plus lisible. Vous pouvez ensuite facilement ajouter une option à votre site qui utilise cette feuille de style plutôt que la normale, pour les visiteurs qui le préfèrent. Et tous, bien sûr, sans avoir à maintenir des copies distinctes du contenu de la page, parce que c'est maintenant séparé de la présentation des choses.

La capacité de séparer la présentation et le contenu a d'autres avantages aussi. Création de bons sites Web exige des compétences à la fois l'écriture et la conception. CSS signifie qu'une personne peut se concentrer sur l'écriture du contenu pour le site, tandis que quelqu'un d'autre peut travailler leur magie sur les feuilles de style

CSS est tellement partie de la conception web de nos jours. Il est rare pour quiconque de créer un nouveau site à partir de zéro qui utilise les vieilles balises <font>. Cela ne veut pas dire qu'il n'y a pas encore des millions de pages à l'ancienne, mais CSS est certainement une meilleure façon de faire les choses

 CSS : Syntaxe et Règles                                        


 Les styles CSS en HTML 

Définition des propriétés de la police en CSS    

               
CSS - Positionnement et calques 

CSS –Background   

                                                              
CSS - Unités de mesure