Présentation CSS

Le CSS est l'un des outils les plus importants pour concevoir et embellir l'apparence d'un site Web. Nous vous apprendrons les bases et comment utiliser CSS

Le CSS peut modifier le style de beauté HTML

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, sur papier ou sur d'autres supports
Le CSS permet d'économiser beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois
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 les liens "Feuille de style 1", "Feuille de style 2", "Feuille de style 3", "Feuille de style 4" 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 les variations d'affichage pour différents appareils et tailles d'écran.

body {
  background-color: lightblue;
}

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

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

Le CSS a résolu un gros problème

Le HTML n'a JAMAIS été destiné à contenir des balises pour formater une page Web !

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

<h1>Ceci est un titre</h1>

<p>Ceci est un paragraphe.</p>

Lorsque des balises telles que <font> et des attributs de couleur ont été ajoutés à la spécification HTML 3.2, cela a déclenché un cauchemar pour les développeurs Web. Le développement de grands sites Web, où les polices et les informations de couleur étaient ajoutées à chaque page, devenait 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 de style de la page 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 modifier l'apparence de tout un site Web en modifiant un seul fichier !

Syntaxe CSS

Une règle CSS se compose d'un sélecteur et d'un bloc de déclaration.
Introduction CSS

Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.

Plusieurs déclarations CSS sont séparées par des points-virgules et les blocs de déclaration sont entourés d'accolades.

p {
  color: red;
  text-align: center;
}

Exemple expliqué

p est un sélecteur en CSS (il pointe vers l'élément HTML que vous souhaitez styliser : <p>).
couleur est une propriété et rouge est la valeur de la propriété
text-align est une propriété et center est la valeur de la propriété