L'Artisan du web Nous avons appris à lire, à écrire et à compter, ce n’est plus suffisant. Il faut aujourd’hui comprendre les codes informatiques qui prennent le contrôle de nos vies.

À propos de ce site

Design d’un site: le code CSS

Le site internet CSS Garden montre comment à partir d’un même fichier HTML on peut créer une page au design totalement différent.
Séparer le contenu de sa mise en forme permet de servir ce contenu dans des formats très variés en le gardant dans un fichier unique facile à gérer.

Dans un traitement de texte on crée une feuille de style pour choisir une police, une couleur de texte et d’arrière-plan, la taille des titres et des paragraphes, etc. Il suffit ensuite d’appliquer cette feuille de style à un texte pour le mettre en page automatiquement. Si on veut changer la mise en page il suffit de modifier la feuille de style.

Cascading Style Sheets

CSS signifie Cascading Style Sheets et ça fonctionne sur le même principe en plus compliqué.

Sur un poste internet on peut modifier l’affichage pour l’adapter à ses besoins (polices plus grosses, contraste), le navigateur va alors surimposer une feuille de style à celle du webmaster. C’est ce qu’on appelle la cascade, si un nouveau style est défini pour un même élément la dernière déclaration l’emporte.

C’est compliqué à saisir mais c’est très utile. Le webmaster va construire son fichier CSS en commençant par définir les éléments généraux. Par exemple la couleur de police du texte va être définie à noire. Puis il voudra avoir un paragraphe rouge dans un encart, il pourra alors cibler cette balise HTML et définir: p .encart {color: red;} ce qui signifie que les paragraphes de classe encart seront rouge mais que tous les autres resteront noirs.

Le code CSS offre beaucoup de souplesse pour pouvoir cibler chaque balise HTML et définir ses propriétés. Il est tellement précis qu’il devient complexe à manipuler. Le code est très simple, on choisit une balise et on définit ses propriétés: p {font-family: arial; font-size: 20px; color: red;}

Voici un exemple de feuille de style utilisée pour donner une présentation totalement différente du site CSS Garden, tous les effets sont produits uniquement avec les styles:

Grâce à la cascade on peut aussi surcharger le code HTML d’une page en insérant directement un style dans une balise, c’est comme ça qu’on faisait avant CSS. L’inconvénient est que ces surcharges sont dispersées partout dans le code HTML, il vaut toujours mieux les centraliser dans un fichier mais c’est parfois utile.

Le fichier CSS permet aussi de proposer plusieurs affichages du site (pour PC, tablette, téléphone, lecteur d’écran) sous forme de conditions. En demandant une page internet on envoie un signal indiquant le type d’appareil qui va l’afficher. Le fichier CSS va donc définir les éléments communs puis dire Si c’est un PC, ce sera tel affichage, etc. Les blocs seront réorganisés, les tailles vont diminuer pour les téléphones.

Modifier le style de son site WordPress

Les logiciels de création de site internet proposent des thèmes de site que l’on peut personnaliser grâce à un fichier CSS. On peut redéfinir les propriétés qui ne nous conviennent pas en ciblant très précisément un élément. Il suffit alors d’aller voir le code HTML de la page (Ctrl+U) et de chercher la balise que l’on veut modifier pour pouvoir la cibler.

Laisser un commentaire