Attention ! Une fois n'est pas coutume, cette page ne commence pas par le titre
mais par cet avertissement : chaque ligne ou paragraphe contenu dans une balise
sera suivi par l'annotation code source afin de vous permettre de suivre
sans difficulté l'écriture complète de la page et la façon dont les règles sont appelées.
Pour ce qui est de la première (body), il n'y a rien à dire : l'appel est automatique!

Une feuille de style simple et complète

Code source : <h1> contenu </h1>

Soyons modestes ... et disons "relativement complète" : l'essentiel pour écrire une page de texte.

Code source : <p class="retrait"> contenu </p>

Comme il faut un début à tout, surtout dans l'apprentissage, mieux vaut ne pas vouloir en faire trop et trop vite. Cet exposé va donc se limiter à vous rappeler (si vous avez bien suivi celui des familles de propriétés, leurs sélecteurs et valeurs) la syntaxe de quelques règles de style pour vous permettre l'écriture de votre première page "sous influence" des Cascading Style Sheets, les bien nommées Feuilles de Style en Cascade ...

Code source : <p class="tabulation"> contenu (4 lignes) </p>

Les sélecteurs utilisés :

Code source : <p class="titre"> contenu </p>

Nous n'utiliserons dans cet exemple que 4 sélecteurs du langage Html :

Code source : <p class="tabulation"> contenu </p>

< BODY > toujours nécessaire dans une page !
< H2 > qui est une balise de titre
< P > qui est sans doute la balise la plus courante.
< I > qui permet d'afficher les caractères en italique

Code source : <p class="retrait"> contenu (4 lignes) où chaque balise sera écrite entre
                       <b class="rouge"> et </b> </p>

La première vous permettra de faire appel à une couleur ou une image de fonds. Dans le cas présent, nous faisons appel à un fond classé dans le dossier valimage .
La seconde, vous l'aurez compris, se contente de donner une couleur bleue au titre de la page, tout en le centrant.
La troisième, enfin, aura pour but d'attribuer les valeurs d'affichage de la balise usuelle P qui concerne la plus grande partie du texte que comporte la page.

Code source : <p class="tabulation"> contenu (5 lignes) <span class="rouge"> valimage </span> contenu
                       <span class="bleu"> bleue </span> contenu <b> P </b> contenu </p>

Les différents identifiants :

Code source : <p class="titre"> contenu </p>

.source règle les propriétés/valeurs des explications
.titre précise les propriétés/valeurs des sous-titres
.retrait règle marge et éventuelle justification de ce paragraphe
.rouge permet d'insérer des textes/parties de texte en rouge
.bleu permet d'insérer des textes/parties de texte en bleu
.tabulation crée une indentation en début de chaque paragraphe

Code source : <p class="retrait"> contenu (6 lignes) ou chaque balise sera écrite entre
                       <b class="rouge"> et </b> et les 2 mots colorés en <span class="rouge">rouge</span> et
                       <span class="bleu">bleu</span> </p>

La feuille de style complète pour tirer le meilleur parti possible de cette page utilise donc en tout et pour tout 10 règles. Les ressources utilisables sont néanmoins bien plus importantes ! En effet, vous aurez remarqué que 6 d'entre elles ne sont pas liées à des sélecteurs : il s'agit des identifiants précédés d'un point. Ceux-ci pourront donc être employés avec différentes balises HTML, augmentant d'autant les possibilités d'effets de présentation.

Code source : <p class="tabulation"> contenu (4 lignes) incluant : <b> point </b> </p>

Si vous y ajoutez les balises déjà mises en forme (H1, H2, H3, H4, H5, H6, B, I, U) notamment, vous imaginez les différentes combinaisons possibles !

Code source : <p class="tabulation"> contenu (2 lignes) incluant : <span class="bleu"> balises </span> </p>

Une de ces règles ne sert ici qu'à attirer votre attention sur la manière dont le code source est écrit.

Code source : <p> contenu <span class="source"> les mots "code source" </span> contenu </p>

Mais je bavarde, je bavarde et j'en oublie de vous présenter la feuille de style ! La voici :

Code source : <p class="tabulation"> contenu </p>

body {background-image:url(../valimage/astufond.jpg)}

h1 {font-size:20px; text-align:center; margin-top:31px}

p {color:black; font-family:Arial,Helvetica,Sans-serif; font-size:14px}

i {color:blue}

.source {margin-left:10px; margin-right:10px; background-color:silver;
    color:black; font-family:Arial,Helvetica,Sans-serif; font-size:14px;
    border:1px solid red}

.titre {margin-left:13px; color:black; font-family:Arial,Helvetica,Sans-serif;
    font-size:16px; text-decoration:underline}

.retrait {margin-left:120px; text-align:justify}

.rouge {color:red}

.bleu {color:blue}

.tabulation {text-indent:20px}

Simple, sobre mais efficace ! La totalité de cette page est réalisée uniquement avec cette feuille de style, sauf pour ce qui est du bloc jaune ci-dessus. Il s'agit d'une "boite" réalisée grâce à un sélecteur que vous utiliserez sans doute souvent dans vos pages : < DIV >, le sélecteur des calques. Vous en découvrirez les multiples possibilités dans d'autres exposés et il deviendra sans doute l'un de vos outils préférés !

Code source : <p class="tabulation"> contenu (4 lignes) incluant : <span class="rouge"> <DIV> </span> </p>

Vous voulez savoir comment il est réglé ?
Jusqu'à présent, je vous ai mâché la besogne : tout le code source est reproduit en clair sur cette page.
Pour cette règle-ci, apprenez à vous servir du "clic droit" : c'est une bonne habitude pour qui veut apprendre les secrets (un bien grand mot ...) des concepteurs de sites ! Vous remarquerez ainsi combien de pages sont fort mal écrites ... même par des pseudo-pros ! Vous risquez aussi de voir, au verso de cette page, que j'ai fait une petite entorse à la rigueur qui devrait prévaloir à cette rubrique ... Vous ne m'en voudrez pas (à condition que vous la remarquiez ...) car son but est de ne pas trop vous "bourrer le crâne" pour une première expérience. Cela risquerait de vous rebuter ...

Code source : <p class="tabulation"> contenu (7 lignes) </p>

Vous avez vu ? ... et tout compris ? Alors ....
A vos marques ! Prêts ? Partez !!! (Hé ! Ho ! c'est une blague : je voulais dire réglez !)
... vos styles, évidemment !

Code source : <p class="retrait"> contenu (3 lignes) incluant : <span class="rouge"> réglez ! </span> </p>

retour