Introduction aux CSS

Table des matières

CSS est le langage que nous utilisons pour styliser une page Web.

Qu’est-ce que CSS ?

CSS signifie Feuilles de Style en Cascade
CSS décrit comment les éléments HTML doivent être affichés à l'écran, papier ou sur d'autres supports
CSS économise beaucoup de travail. Il peut contrôler la disposition de plusieurs pages Web en même temps
Les feuilles de style externes sont stockées dans des fichiers CSS

Démo CSS - Une page HTML - Plusieurs styles !

Ici, nous allons montrer une page HTML affichée avec quatre feuilles de style différentes. Cliquez sur "Feuille de style 1", "Feuille de style 2", "Feuille de style 3", "Feuille de style 4". liens ci-dessous pour voir les différents styles :

Pourquoi utiliser CSS ?

CSS est utilisé pour définir les styles de vos pages Web, y compris la conception, la mise en page et des variations d'affichage pour différents appareils et tailles d'écran.

Exemple CSS

body
{
  background-color: lightblue;
}

h1
{
  color: white;
  text-align: center;
}

p
{
   
font-family: verdana;
  font-size: 20px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS a résolu un gros problème

HTML n’a JAMAIS été destiné à contenir des balises permettant de formater une page Web !

HTML était créé pour décrire le contenu d'une page Web, comme :

<h1>Ceci est un titre</h1>

Ceci est un paragraphe.</p>

Lorsque des balises comme et des attributs de couleur ont été ajoutés au HTML 3.2 spécification, cela a déclenché un cauchemar pour les développeurs Web. Développement de grands sites Web, où des polices et des informations sur les couleurs ont été ajoutées à chaque page, est devenu un processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

CSS a supprimé le formatage du style de la page HTML !

Si vous ne savez pas ce qu'est le HTML, nous vous suggérons de lire notre tutoriel HTML.

CSS économise beaucoup de travail !

Les définitions de style sont normalement enregistrées dans des fichiers .css externes.

Avec un fichier de feuille de style externe, vous pouvez changer l'apparence d'un site Web entier en modifiant un seul fichier !