Limites du HTML

Dans le cours de HTML nous avons vu que ce langage sert à présenter le contenu de telle façon à ce qu'il soit adapté pour le Web sans pour autant pouvoir le gratifier d'un bon design. Bien qu'il existe des balises, associées à certains de leurs attributs, qui peuvent appliquer des retouches modestes et mettre ainsi fin au rendu par défaut appliqué par HTML.

L'arrivée de HTML5 annonce un passage vers un Web sémantique et offre plus de fonctionnalités qui enrichissent davantage le contenu intégré. Cependant, comme son prédécesseur, il n'est pas concerné par le design.

Cela nous mène à croire que HTML a des limites puisqu'il ne peut pas appliquer un visuel attrayant au contenu qu'il est capable d'intégrer. Or, W3C a toujours été clair sur ce point: "HTML est un langage de description et de présentation de contenu Web", c'est tout. Il faut donc une alternative si on veut avoir une page Web réussie et qui plait aux internautes. C'est là où intervient le CSS.

Avant le CSS

Le langage HTML est né avec l'apparition du Web vers 1989. A l'époque, CSS n'existait pas et donc les créateurs de pages Web étaient contraints de tout faire avec seulement du HTML, à savoir la création du contenu et la présentation du design. Après un moment, un problème commence à surgir, le code des pages Web devient de plus en plus complexe, car il fallait mettre beaucoup de balises pour l'intégration d'une part et de mise en forme d'une autre part. Le CSS est alors apparu.

CSS c'est quoi?

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.
Donc, si vous voulez changer la couleur de votre arrière plan, la police de vos textes ou l'alignement et les marges de vos objets et bien réussir d'autres prouesses, CSS est là pour vous servir.

Comme pour HTML, CSS a commencé petit et grandit au fil des versions. La première version a vu le jour vers 1996. Il s'agissait de CSS1, suivie de CSS2 qui était le plus populaires jusqu'à l’apparition de HTML5 qui a intégré de nouvelles fonctionnalités qui ont emmené à développer la version 3 de CSS (dite CSS3) qui est le standard le plus utilisé actuellement. On utilise même le terme HTML5/CSS3 pour désigner les deux technologies qui vont alors ensemble.

CSS est un langage coté client, c'est à dire que sa syntaxe est comprise par le navigateur qui l’exécute avec le HTML. Ceci peut conduire à des problème de compatibilité, puisque par fois, les navigateurs ne comprennent pas toujours certains codes CSS de la même manière. Heureusement, ce sont des cas rares qui disparaissent petit à petit.

Objectif du cours et prérequis

L'objectif de ce cours est de vous aider à maîtriser le langage CSS et en faire bon usage. Vous n'êtes pas obligé d'apprendre sa syntaxe par cœur, car avec la pratique je suis sûr que vous la retiendrez sans que vous vous en rendiez compte.

Nous allons voir la syntaxe de CSS3 (qui renferme bien entendu certaines anciennes fonctionnalités de CSS2). Vous aurez besoin d'un éditeur (le même dont vous vous êtes servi pour écrire du HTML) et un navigateur de votre choix pour les tests. Cependant je vous recommande de tester vos codes sur plusieurs navigateurs pour voir le résultat sur les différents moteurs de rendu célèbres. A titre d'exemple Google Ghrome ou Safari (pour le moteur Webkit), Mozilla Firefox (pour le moteur Gecko) et le bon vieux Internet Explorer (pour le moteur Trident). Je vous demanderai par la suite (dans la partie Media Queries) d'utiliser aussi un navigateur mobile (ou un émulateur pour développeurs) pour tester le responsive design.

Pour tirer profit de ce cours, il faut être initié en HTML (4 et 5). Si vous n'avez pas un minimum requis dans ce langage, je vous recommande vivement de commencer par là. Voici les liens:

• Cours de HTML (HyperText Markup Language)
• Apprendre HTML5 - Pour mieux présenter vos pages Web

CSS c'est quoi en vidéo