FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 2.1. Introduction au CSS

Origine du CSS

Historiquement, le HTML possèdait (et possède encore) des balises de mise en forme du texte (gras, italique ...). Avec l'évolution des graphiques sur Internet, un problème est rapidement apparu : lorsque l'on voulait changer la chartre graphique d'un site, il fallait reprendre chaque page une à une pour y modifier la mise en forme.

Pour éviter ce travail fastidieux, les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, se sont démocratisées pour devenir un standard supporté par tous les navigateurs contemporains.

Un fichier HTML, plusieurs styles

Considérons le code HTML suivant :

<h1>Une page, plusieurs styles</h1>

<h2>Titre de niveau 2</h2>

<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac 
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, 
vestibulum at eros.</p>

En appliquant ces deux styles, il est possible d'obtenir des rendus distincts :

/* Style 1 */
* {font-family: "Gill Sans", sans-serif;}
h1 {text-decoration: underline}
h2 {color:blue}
/* Style 2 */
* {font-family: "Courier New", Courier, monospace}
h2 {margin-left:2rem; color:grey}
p {margin-left:4rem; font-style:italic;}

Rendu du style 1

Rendu du style 2

Intégration du CSS

Il existe trois façons d'utiliser les feuilles de style :

Voir aussi


Dernière mise à jour : 06/11/2019