Les styles CSS — Informatique, 11–13
Le CSS contrôle l’apparence d’une page web sans changer son contenu principal. Tu apprends à séparer le sens de l’apparence, puis à régler les couleurs, les espaces, les tailles et la disposition avec des règles.
Contenu et apparence
Une page web contient des éléments comme un titre ou un paragraphe, et peut aussi avoir un style visuel. Le CSS donne des instructions sur leur apparence : texte bleu, grande marge ou disposition en deux colonnes. La page peut garder le même message tout en changeant de style.
Pourquoi séparer le style ?
Si chaque page mélangeait ses mots et toutes ses instructions visuelles, changer une couleur ou corriger la disposition obligerait à modifier de nombreux endroits. Le CSS est né du besoin de donner un style cohérent à plusieurs pages et de les mettre à jour plus facilement. Il permet aussi d’adapter le même contenu à un téléphone, un grand écran ou une imprimante.
Rendre un titre bleu
Imagine qu’une page possède un titre identifié comme tel. D’abord, choisis ce type d’élément comme cible. Ensuite, règle la couleur du texte sur bleu et la taille sur 24 pixels. Quand le navigateur charge la page, chaque titre correspondant reçoit ces réglages. Tu modifies la règle une fois, et tous ces titres changent ensemble.
Le piège de confondre style et contenu
Il est tentant d’utiliser la taille ou la couleur pour dire ce qu’est un élément, car tu remarques d’abord son apparence. La page peut alors sembler correcte tout en ayant une structure peu claire pour les navigateurs et les technologies d’assistance. Indique ce qu’est l’élément, puis utilise le CSS pour régler son apparence.
Le CSS dans les vrais sites
Les sites que tu utilises emploient le CSS pour le texte lisible, les menus, les cartes, les espaces et des dispositions adaptées à différents écrans. Une boutique peut garder les mêmes informations sur un produit tout en changeant son apparence sur téléphone ou ordinateur. Le CSS ne crée pas un fait et ne rend pas une mauvaise image compréhensible : il organise la présentation.
Continue d'explorer
Autres langues
Chargement de MyLeoNes™…