CSS : Introduction et culture générale

Pour rappel, vous devez avoir une connaissance basique du langage HTML pour suivre ce cours correctement.
Si ce n’est pas le cas, vous pouvez suivre d’abord ce cours : Structure de base d’une page HTML.

Le CSS

Le CSS est un standard du web. Avec le HTML, ils forment la base essentielle et incontournable de la réalisation d’un site web.

Pour résumer facilement les fonctions de ces deux langages : le HTML est le fond, le CSS est la forme. HTML décrit le contenu exact de la page sans se soucier de sa mise en forme, tandis que CSS met en forme le contenu, quel qu’il soit. Ils sont ainsi complémentaires.

L’évolution du CSS

Le CSS, comme tous les autres langages, évolue constamment. Il existe donc en plusieurs versions, à l’image d’une application ou d’un logiciel. À l’heure où j’écris ces lignes (27 juin 2021 à 19:48), la version recommandée actuellement est la 2.1, tandis que la version 3 est en cours de standardisation.

Mais sachez qu’un bon développeur utilise toujours la dernière version des langages qu’il utilise (ou presque la dernière du moins). C’est pourquoi dans ce cours, nous travaillerons avec la version 3 du langage : CSS3.

Logo de CSS3 (non-officiel)

Pratiquer le CSS !

Pratiquer, oui ! Car c’est avec la pratique que l’on apprend le mieux. À chaque fin de chapitre, je vous proposerai un court exercice très simple à réaliser, juste pour mettre en œuvre ce qui vient d’être vu.

Pas besoin de beaucoup de préparation pour cela :

• Créez un répertoire, où vous le souhaitez, dans lequel vous mettrez un fichier « index.html » et un fichier « style.css ».
• Remplissez votre index.html avec ce que vous voulez. Essayez de varier les balises dans la mesure du possible.
• Glissez-déposez votre index.html dans votre navigateur pour l’ouvrir. Vous n’aurez plus qu’à actualiser la page pour voir l’évolution de votre belle mise en forme !
• Il ne vous reste plus qu’à ouvrir votre style.css avec l’éditeur de texte de votre choix pour commencer à y intégrer des propriétés CSS.

Pour conclure, vous avez donc besoin d’un ordinateur (Windows, MacOS, Linux… peu importe l’OS) avec un navigateur. Je vous recommande Firefox Developer Edition pour développer vos sites web. Dans le cas contraire, Firefox Stable fera aussi très bien l’affaire. Vous aurez enfin besoin d’un éditeur de texte. En théorie, n’importe lequel pourrait faire l’affaire (même le bloc-note Windows oui), mais il vaut mieux en choisir un performant et conçu pour le codage, tel que Visual Studio Code, Sublim Text ou encore le très bon Atom !

Note : pour tester correctement votre CSS, il est fort probable que vous soyez amené à désactiver le cache de votre navigateur.