Introduction aux feuilles de style en cascade CSS

css

Introduction

Comme vous le savez sans doute, derrière chaque page Web que vous visitez se cachent un certain nombre de lignes de code écrites dans divers langages. Pour vous en convaincre, il vous suffit pour ceux qui utilisent Firefox d’utiliser la combinaison de touche ctrl+U, ce qui aura pour effet d’afficher le code source de cette page de mon blog.

A l’origine, lorsqu’une page web était construite, on insérait dans son code source à la fois le code de mise en page, et le code correspondant au contenu utile, de même que lorsque l’on écrit un document, on se préoccupe à la fois de ce que l’on y écrit, et de sa mise en page. Mais depuis et avec l’avènement du Web 2.0, il est apparu utile de décorréler ces deux approches.

  • D’une part parce que à chaque site Web correspond un design, et qu’il est inutile que le code brut de présentation soit stocké en dur à 100 endroits différents si le site Web fait 100 pages, alors qu’il suffirait de le stocker quelque part et de le coupler avec le code de contenu de la page lorsque celle-ci est demandée par un utilisateur.
  • D’autre part parce que si un jour on éprouve le besoin de changer le design du site, cela signifie qu’il va falloir modifier chacune des 100 pages manuellement l’une après l’autre, et je ne vous parle même pas des sites Web qui contiennent des dizaines de milliers de pages…

Tandis que si on sépare le code caractérisant le contenu d’une page Web de celui qui concerne sa présentation, on se débarasse de ces inconvénients. Le jour où l’on souhaite changer le design de son site Web, il suffit de modifier le fichier qui caractérise la présentation de l’ensemble des pages du site, et l’ensemble du site change, je ne sais pas si vous voyez la puissance du truc.

Et je pense que vous aurez deviné où je veux en venir. Le code décrivant le contenu d’une page Web, c’est du HTML, et le code caractérisant sa présentation, c’est du CSS.

Présentation du CSS

CSS signifie Cascading Style Sheets  (=feuilles de style en cascade). Vous avez un extrait de feuille CSS dans l’illustration de ce billet. Le principe est simple:

  • Pour chaque balise placée dans le code HTML d’une page, le navigateur va regarder si quelque chose est dit à propos de cette balise dans la feuille de css qui lui correspond. Si non, il va adopter le comportement par défaut. Si oui, il appliquera les modifications spécifiées dans la feuille de style.
  • Les balises peuvent être des balises HTML standard, par exemple body, ou des balises artificielles inventées par le créateur du site internet, ça pourrait être cadrecentral, ou n’importe quoi d’autre. Bien sûr il faut alors qu’elles aient été préalablement  insérées dans le code source suivant une syntaxe particulière.
  • Les paramètres qui peuvent être changés vont de la police utilisée, sa taille et sa couleur à la présentation générale de la page et aux images utilisées.

Au passage, si parfois lorsque vous avez des ennuis de connexion internet, vous chargez des pages présentées très bizarrement, c’est souvent que seul le code html a été chargé, mais pas la feuille de style CSS correspondante. A titre d’illustration, voici à quoi ressemble ce blog sans sa feuille de style:

blog_sans_css_400

Conclusion:

Voila, comme je prévois de faire bientôt un ou deux articles en direct lien avec la notion de feuille de style CSS, grâce à ce billet vous  saurez ce que c’est. Vous pouvez également consulter l’article de Wikipédia qui s’y rapporte ;).

Publicités

4 réflexions au sujet de « Introduction aux feuilles de style en cascade CSS »

  1. Ping : Changez la présentation des sites Web que vous visitez « Aldian’s Blog

  2. Ping : Explorez, débuggez, et améliorez votre compréhension des pages Web avec Firebug « Aldian’s Blog

  3. Ping : Si vous souhaitez réaliser votre propre feuille de style CSS « Aldian’s Blog

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s