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 charte 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 :

• en ligne ou inline : le CSS se place dans les balises (Cours 2.2)
• interne ou internal: le CSS se place dans l'en-tête du fichier HTML (Cours 2.3)
• externe ou external: le CSS se place dans un fichier distinct (Cours 2.4)

Quiz

Un style CSS peut être ...

---

Un style CSS externe ...

---

Quel est l'intérêt des feuilles de style en cascade ?

---

Voir aussi

• Cours développement web
• Cours 1.1. Histoire d'Internet
• Cours 1.2. Introduction au HTML
• Cours 1.3. Les caractères spéciaux en HTML
• Cours 1.4. Les commentaires en HTML
• Cours 1.5. Structure globale d'une page HTML
• Cours 1.6. Les liens hypertextes en HTML
• Cours 1.7. L'attribut id en HTML
• Cours 1.8. Les ancres en HTML
• Cours 1.9. Les images dans les pages HTML
• Cours 1.10. Les tableaux en HTML
• Cours 1.11. Les balises HTML les plus utilisées
• Cours 1.12. Quelques recommandations
• Cours 1.13. Ressources
• Cours 2.2. CSS en ligne
• Cours 2.3. CSS dans l'en-tête de la page
• Cours 2.4. CSS dans un fichier externe
• Cours 2.5. Les sélecteurs en CSS
• Cours 2.6. Les couleurs en CSS
• Cours 2.7. Les marges en CSS
• Cours 2.8. Les unités en CSS
• Cours 2.9. Les propriétés CSS les plus utilisées
• Cours 3.1. Histoire du JavaScript
• Cours 3.2. Hello World en JavaScript
• Cours 3.3. Console.log
• Cours 3.4. Les commentaires en JavaScript
• Cours 3.5. Les variables en JavaScript
• Cours 3.6. Les événements en JavaScript
• Cours 3.7. Document Object Model (DOM)
• Cours 3.8. Modifier le HTML
• Cours 3.9. Les frameworks JavaScript
• Cours 4.1. Introduction au PHP
• Cours 4.2. Les balises PHP
• Cours 4.3. Les variables en PHP
• Cours 4.4. isset vs empty vs is_null
• Cours 4.5. Les opérateurs en PHP
• Cours 4.6. Les guillemets en PHP
• Cours 4.7. Les tests en PHP, l'instruction if...else
• Cours 4.8. Les tableaux en PHP
• Cours 4.9. Les boucles en PHP
• Cours 4.10. Les sessions en PHP
• Cours 5.1. Les formumlaires HTML
• Cours 5.2. Les formulaires : POST ou GET
• Cours 5.3. Le champ <input>
• Cours 5.4. Les différents champs des formulaires HTML
• Cours 6.1. Introduction à MySQL
• Cours 6.2. phpMyAdmin
• Cours 6.3. Requêtes SQL les plus utilisées
• Cours 6.4. Connexion MySQL en PHP
• Cours 6.5. Les requêtes MySQL en PHP
• Cours 6.6. Lire des données MySQL en PHP
• Cours 6.7. Récupérer le dernier identifiant MySQL

---