CSS - Cascading Style Sheet : les feuilles de style comment ça marche ?

Les feuilles de style permettent de personnaliser la présentation de nos pages HTML et de gagner du temps dans la rédaction de ces pages.

Titre normal

Titre modifié

Le code css pour généré le deuxième titre est le suivant :

H3 { color='blue'; }

Afin d'intégrer des marqueurs identiqueurs avec une présentation différente on utilise l'attribut class dans le marqueur afin de spécialiser sa présentation. C'est cette option qui m'a permis d'intégrer deux marqueurs h3 différents dans cette page (un normal et un avec le texte en bleu). Le code css réellement utilisé pour l'exemple ci-dessus est le suivant:

H3.mod { color='blue'; }

<H3 class="mod"> Titre modifié</h3>

Trois méthodes existent pour intégrer une feuille de style dans une page; la première consiste à intégrer directement le code de la feuille de style directement dans la page par le marqueur <style>

<style type="text/css">
H3.mod {
color='blue';
}
</style>

C'est la méthode utilisée ici pour les exemples d'illustration. La seconde méthode consiste à code les feuilles de style dans un fichier séparer portant l'extension '.css'. Cette méthode présente l'avantage de partager la feuille de style; c'est la méthode utilisé pour la charte graphiue de ce site.

<link rel="stylesheet" href="feuille.css">

La dernière méthode est la moins utilisée. Enfin ceci est un avis personnel. Elle sert à modifier ponctuellement les propriétés d'une balise html. Ce qui sera écrit dans ce morceau de code CSS n'affectera que la balise courante, mais pas les autres balises du même type.

<h3 style='color=blue;'></h3>