CSS, pour Cascading Style Sheets, est la façon dont vous dites à votre navigateur comment afficher et styliser la page. Cela comprend la mise en page, la couleur du texte, la taille de la police et bien d'autres choses encore. Sans CSS, le navigateur ne ferait que rendre des documents HTML avec les styles par défaut, mais avec CSS, on peut créer de la magie.
Ce cours est conçu pour vous aider non seulement à vous familiariser avec les éléments de style, mais aussi à en profiter.
Conditions préalables
- 1Connaissance intermédiaire du HTML, que vous pouvez apprendre dans ce super cours.
- 2Une volonté de se plonger dans le stylisme même si vous n'avez pas l'œil pour le design !
Sans plus attendre, commençons !
Sélection d'un Éditeur de Texte
Comme pour notre cours HTML, vous aurez besoin d'un éditeur de texte pour écrire et éditer vos fichiers CSS. Bien que n'importe quel éditeur fonctionne, nous vous recommandons d'utiliser l'éditeur de texte Atom ou encore l'éditeur Brackets. Il fonctionnera sur le système d'exploitation sur lequel vous êtes actuellement en cours d'exécution, et la coloration syntaxique rend l'écriture CSS vraiment aisée.
Un aperçu de l'éditeur de texte Atom.
Configuration de base
Créez un tout nouveau fichier dans votre éditeur, et mettez ceci :
<!DOCTYPE html>
<html>
<head>
<title>Introduction à CSS</title>
</head>
<body>
<h1>Je suis l'en-tête.</h1>
<h2>Je suis la sous-en-tête.</h2>
<p>Je suis un paragraphe.</p>
</body>
</html>
Sauvegardez le fichier sous index.html et si vous avez fait cette étape correctement, ouvrez-la avec votre navigateur et vous devriez voir ceci :
Document HTML non stylisé.
Si vous voyez cela, vous avez tous les outils nécessaires pour compléter le reste de ce cours. Dans la prochaine leçon, nous commencerons à apprendre les différentes façons d'importer du CSS.
Vous êtes prêt à commencer à styliser.
Appliquer des styles CSS à votre page
Apprenez les différentes façons dont vous pouvez appliquer des styles CSS à votre HTML, y compris avec des styles externes, internes et en ligne.