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 ?

>> Téléchargez ce guide et découvrez les bases des langages HTML et CSS 

Quel est le rôle du CSS sur une page web ?

Le rôle du CSS est de 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 de programmation. C'est l'un des outils principaux du développement web permettant de créer la structure informatique d'une page internet.

Quant au XML (Extensible Markup Language), c'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 un langage de programmation.

 

Pourquoi utiliser le CSS ?

L'objectif du CSS est de séparer la structure d'un 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.

Le CSS prend en charge toutes les règles de présentation des documents :

  • Les polices de caractères.
  • Les couleurs.
  • Les bordures des pages.
  • Les marges et le rembourrage autour des éléments.
  • L'alignement.
  • Les titres et sous-titres.
  • La création d'éléments géométriques.
  • L'application d'effets ou d'animations simples.
  • L'apparence des menus.

Celles-ci s'appliquent à plusieurs documents simultanément, ce qui permet de gagner du temps de programmation. Dans le cas où il y aurait un changement stylistique à apporter, la règle s'applique automatiquement à l'ensemble des pages d'un site. Là encore, cela constitue un gain de temps considérable.

En résumé, 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.

Que sont les langages de programmation HTML et CSS ?

Téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web.

 

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 ».

Écriture HTML de la balise ancre : <a>nouvellepageweb</a>.

 

Définition d'un attribut

Un attribut définit une propriété qualifiant plus spécifiquement une balise. Un attribut vient toujours avec une valeur et ces deux éléments sont toujours séparés 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.

Écriture HTML de l'attribut « href » avec la balise ancre : <a href="https://adressedelapageweb">nouvellepageweb</a>.

 

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 (header). Pour cela, il suffit de réunir le code dans la balise « style » à 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>.

 

Quelle est la meilleure façon d'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 :

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, téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base des langages de programmation HTML et CSS pour gérer votre site web.Guide d'introduction aux langages HTML et CSS

Publication originale le Dec 23, 2021 3:16:00 AM, mise à jour le 18 avril 2022

Sujet(s):

Développement web