Langage CSS : le guide pour débutants

En programmation, les options stylistiques d'un document HTML ou XML sont quelque peu limitées. C'est à ce moment-là qu'intervient le CSS. Ce langage informatique prend en charge la mise en forme et le style des contenus des pages web. Quel est le rôle du CSS sur une page web ? Quel est le meilleur endroit pour placer le code CSS ?

À quoi sert CSS ?

CSS sert à définir un ensemble de règles stylistiques à l'intérieur de pages web codées en HTML ou en XML.

Pour rappel :

• Le HTML (HyperText Markup Language) est un langage informatique de balisage. C'est l'un des outils principaux du développement web permettant de créer la structure informatique d'une page internet.
• Le XML (Extensible Markup Language) est un langage informatique au même titre que le HTML. Il a été développé par le W3C (World Wide Web Consortium) dans le but de faciliter la transmission sur internet d'informations générées avec un langage plus complexe : le SGML (un langage de balisage généralisé normalisé).

Sachant cela, il est naturel de se demander ce que le CSS apporte de plus à une page web qui a déjà été codée avec HTML ou XML.

Pourquoi utiliser CSS ?

Utiliser CSS permet de séparer la structure du document HTML ou XML de sa présentation. En effet, ces deux langages gèrent déjà beaucoup de règles. En voici une liste non exhaustive :

• La structure de page.
• L'écriture d'hypertexte.
• La création de formulaires de saisie.
• L'intégration de supports visuels.
• La structure sémantique de la page.

Plutôt que de leur confier en supplément la mise en forme du contenu, il est possible de la déléguer au CSS.

Utiliser CSS pour gagner du temps

Le webdesigner peut utiliser CSS pour appliquer des règles de mise en forme à plusieurs documents ou éléments simultanément. Exemple : le webdesigner veut colorer en vert les titres de second niveau ; au lieu de renseigner la couleur pour chaque titre, il indique dans le CSS que les titres < h2 > doivent s'afficher en vert : une seule ligne de code suffit.

Appliquer les règles de mise en forme simultanément permet ainsi au webdesigner de gagner du temps au moment de rédiger le code. De même, il gagne du temps dans le cas où il y aurait un changement stylistique à apporter : la règle est modifiée à un endroit unique du code, et s'applique automatiquement à tous les éléments concernés.

Utiliser CSS pour améliorer la lisibilité du code

Le HTML et le XML servent à créer la structure d'une page web et s'adressent plus particulièrement aux développeurs back end. De son côté, le CSS donne un style visuel aux éléments. Il est plus efficace pour définir l'esthétique d'un site web et il est largement utilisé en développement front end. De fait, utiliser CSS permet de séparer concrètement les rôles, et de distinguer plus clairement le code structurant du code descriptif de présentation. La lisibilité globale du code est ainsi améliorée, et le risque d'erreur est réduit.

Utiliser CSS pour appliquer une mise en forme cohérente

Très concrètement, utiliser CSS sert en premier lieu à définir et appliquer une mise en forme. Le CSS en effet prend en charge toutes les règles de présentation des documents, et notamment :

• La police de caractères et la couleur de texte.
• Les marges, le rembourrage et les bordures, pour définir l'espace entre les différents éléments d'une page, ou pour encadrer du texte ou des images.
• La disposition des éléments, pour ajouter une image en arrière-plan d'une page par exemple.
• L'alignement des éléments, pour centrer une image ou justifier un texte à droite, par exemple.
• L'apparence des titres et sous-titres, pour transformer les titres de niveau supérieur en éléments de liste grâce à la propriété CSS display, par exemple.
• La création d'éléments géométriques.
• L'apparence des menus de navigation.

Avec CSS, le webdesigner définit une mise en forme esthétique et conforme à la charte graphique, et l'applique de manière cohérente sur l'ensemble des pages du site web.

Utiliser CSS pour créer des templates complexes

Toujours d'un point de vue pragmatique, CSS est très utile pour concevoir la maquette du site web. Lorsque le site est créé à partir d'un CMS, différents templates au choix génèrent automatiquement la disposition des contenus des pages web. Sans CMS, il faut coder le template pour afficher une disposition harmonieuse, et personnalisée. Le module CSS grid permet de créer plusieurs colonnes de texte, d'insérer un logo en-tête de la page et de positionner un formulaire de contact en bas à droite, par exemple.

Utiliser CSS pour créer des animations

Utiliser CSS sert également à rendre le site web dynamique et attractif. Les animations CSS permettent en effet de mettre en mouvement des éléments de la page, pour créer des effets au chargement de la page ou lorsque l'internaute interagit avec l'élément.

Quel est le meilleur endroit pour placer le code CSS ?

Pour placer du code CSS dans une feuille HTML, il existe trois façons de procéder :

• Intégrer le code directement dans la balise HTML avec l'attribut style.
• Intégrer le code directement dans le fichier HTML avec l'attribut style.
• Créer un fichier CSS externe et relié à la feuille HTML via la balise link.

Sachant cela, il est intéressant de bien faire la différence entre un attribut et une balise.

Définition d'une balise

Une balise est utilisée pour marquer le début et la fin d'un élément. Par exemple, une ancre est une balise utilisée pour intégrer un lien hypertexte dans une page afin de renvoyer vers une autre page web. La balise d'ancrage est représentée avec la lettre « a ». Autre exemple : un div est une balise utilisée pour insérer une section distincte sur la page, visuellement séparée des autres contenus.

Écriture HTML de la balise div : < div >section distincte< /div >.

See the Pen langage-css_balise by HubSpot France (@HubSpot-France) on CodePen.

Définition d'un attribut

Un attribut est une propriété qui qualifie plus spécifiquement une balise. Un attribut vient toujours avec une valeur, et le nom de l'attribut est séparé de sa valeur par le symbole « = ».

Dans l'exemple de la balise d'ancrage, il faudra lui ajouter l'attribut « href » pour faire fonctionner correctement la redirection hypertexte vers une autre page web. C'est cet attribut qui précise quelle est la page de destination. Dans l'exemple de la balise div, ajouter l'attribut « style » permet de placer du code CSS pour mettre en forme la section.

Écriture HTML de l'attribut style avec la balise div : < div style="style de mise en forme CSS" >section distincte< /div >.

See the Pen langage-css_attribut by HubSpot France (@HubSpot-France) on CodePen.

Où intégrer le code CSS ?

Le plus judicieux sera d'intégrer le code en fonction du contexte.

• Si le code CSS est commun à plusieurs pages, il est recommandé de faire un fichier à part, c'est-à-dire de créer un fichier CSS externe relié à la feuille HTML. Cela permet d'assurer la cohérence des styles entre toutes les pages d'un site.
• Si le code CSS est commun à plusieurs éléments à l'intérieur d'un même document HTML, mieux vaut l'intégrer dans le haut de la page (le header). Pour cela, il suffit de réunir le code CSS à l'intérieur de la balise « head ».
• S'il s'agit d'un morceau de code CSS spécifique, le plus simple est de l'intégrer directement dans la balise HTML d'un élément avec l'attribut style.

Comment importer un fichier CSS dans une page HTML ?

À l'intérieur d'un site web, de très nombreux styles apparaissent. Plus le site est grand, plus les styles se multiplient. Ils peuvent contenir des centaines, voire des milliers de lignes de code. La création d'un fichier dédié au style et écrit en CSS est la pratique la plus courante. Voici comment importer un fichier CSS dans une page HTML à l'aide de la balise « link ».

La balise « link » pour le CSS présente au moins trois attributs :

• « rel », qui définit le type de relations.
• « type », qui identifie le format des données.
• « herf », qui renvoie à la ressource liée.

Un quatrième attribut peut être intégré dans une balise « link » :

• « media », qui indique sur quel type de support de consultation exploiter le fichier.

Voici un exemple de balise « link » :

< link rel="stylesheet" type="text/css" href="source/page.css" media="screen"/ >

Bon à savoir : La balise « link » se place toujours avant la fin de la balise « head » dans le document HTML.

5 ressources CSS pour les sites web

Voici 5 ressources CSS pour nourrir les esprits créatifs, qui ont à cœur de suivre les tendances du webdesign :

• Création de palettes de couleurs avec ColorZilla.
• Mise en place rapide de dégradés avec Ultimate CSS Gradient Generator.
• Création d'effets lumineux avec CSS Deck.
• Élaboration de barres de pourcentage avec CSS Deck.
• Réalisation rapide de boutons avec CSS Tricks.

Le langage informatique CSS est un outil apprécié autant par les développeurs web que par les designers web. Il fait gagner du temps et offre une plus grande liberté au niveau de la créativité.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.