Introduction à CSS

1. Apparition de CSS

Lorsque l'on a compris que les navigateurs étaient utilisés non seulement à des fins scientifiques, mais aussi pour des divertissements, ils ont rapidement manqué de multimédia : vidéos, animations, couleurs, sons, transparence, etc.

Au début, on voulait ajouter plus de balises pour cela, mais on s'est vite rendu compte que ces nouvelles balises seraient très nombreuses et compliqueraient beaucoup le travail avec les documents HTML. Ainsi est née l’idée de séparer la « mise en forme du document » (style) de son contenu. C'est ainsi qu'ont vu le jour CSS.

Cascading Style Sheets (CSS) ou feuilles de style en cascade, sont l'un des composants clés du développement web, responsables de l'aspect visuel des pages web.

CSS est un ensemble de propriétés, chacune ayant un nom et une valeur. Le développeur web indique ces propriétés, et le navigateur est chargé de leur affichage. Ces propriétés peuvent être appliquées à presque n'importe quel élément. Exemple de styles CSS :

Ces paramètres CSS (on les appelle aussi propriétés CSS) sont moins d'une centaine. Mais ils peuvent interagir de manière astucieuse pour offrir des effets très surprenants. Sur CodeGym, vous apprendrez à les utiliser pour créer de véritables merveilles sur les pages 🦄.

2. Styles des éléments

Pour chaque élément HTML, vous pouvez spécifier un style CSS spécifique à l'aide de l'attribut style.

Exemple :

      
<p style="color: blue; font-size: 16px;">Ceci est un exemple de style intégré.</p>
      
    

Ce style indique au navigateur que le texte à l'intérieur du paragraphe doit être affiché en bleu, avec une taille de police de 16 pixels.

En réalité, il y a deux « styles » ici :

• color = blue
• font-size = 16px

Ils sont simplement indiqués en une seule ligne et séparés par un point-virgule.

Vous pouvez également, par exemple, créer un rectangle noir et écrire du texte dedans en blanc. Le code ressemblerait alors à ceci :

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Texte blanc sur fond noir 
</div>
      
    

3. Les couleurs

Nous examinerons les styles CSS en détail une fois que nous aurons étudié HTML. Mais pour rendre cela plus intéressant, plongeons rapidement dans les couleurs aujourd’hui. Grâce à CSS, il est possible de définir n'importe quelle couleur que l'ordinateur peut afficher, et même plus.

Les couleurs en CSS constituent une partie importante de la stylisation des pages web. Elles permettent de créer des interfaces visuellement attrayantes et intuitives. Il existe plusieurs façons de définir les couleurs en CSS, chacune avec ses caractéristiques et usages spécifiques.

1. Noms des couleurs (Color Names)

CSS prend en charge plus de 140 noms de couleurs standard. C'est une méthode simple et intuitive pour définir une couleur.

      
<div style="color: lightblue;"> Texte en bleu clair</div>
      
    

Quelques noms de couleurs courants :

2. Valeurs hexadécimales (Hexadecimal Values)

Une autre façon de définir n'importe quelle couleur est l'encodage hexadécimal. Ce format permet de définir 16 millions de nuances, ce qui serait impossible avec des noms de couleurs.

Les valeurs hexadécimales sont spécifiées en utilisant le caractère #, suivi de six chiffres ou lettres représentant l'intensité des couleurs rouge, verte et bleue (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Rouge sur vert </div>
      
    

Vous rencontrerez souvent cette manière de définir les couleurs dans les exemples. Nous reviendrons sur ce sujet lorsque nous étudierons CSS plus en détail.