INITIATION AUX FEUILLES DE STYLES CSS

L'objet de ce document est de vous montrer l'intérêt des feuilles de styles et vous initier en quelques minutes. Pour ce, on va directement et simplement modifier la présentation de cette page.

On va mettre en forme ce texte sans toucher à son contenu pour obtenir à peu près ceci: resultat css escompté

CECI EST UN TITRE DE NIVEAU 2 HTML

Les titres, sous-titres sont classés en 6 niveau différents, de 1 à 6. Ils sont marqués par les balises HTML h1 à h6. Le premier titre était  un h1!
Un titre de niveau 3 s'écrira simplement "<h3>titre de niveau 3<h3>". Et chaque niveau de titre pourra avoir une présentation propre avec une feuille de style css.
Les paragraphes sont encadrés par la balise de paragraphe nommée "p". Un ensemble d'éléments cohérents pourront être regroupés dans un conteneur générique <div>. Cette page a un conteneur pour le menu et un autre pour le reste de la page. On pourrait ajouter un conteneur de haut de page et de bas de page,...

CSS : LES FEUILLES DE STYLE

A chaque balise html peut être affecté un style de présentation, par exemple la taille du caractère, sa couleur. Ici, les titres de niveau 1 et 2 sont écrits en bleu, le titre de niveau 1, h1, est souligné.
En modifiant la partie css, on va modifier l'aspect de la page sans en changer le fond, c'est la séparation du contenu et de la forme.
Cette séparation est à respecter
pour garantir une maintenance et une évolutivité simple de son site web.
A noter: la mise en évidence de texte peut se faire avec les balises html strong et em, qui pourront avoir elles-aussi leur style propre. Cette partie de texte est d'ailleurs écrite comme ceci:

<p><strong>A noter:<strong> <em>la mise en évidence de texte peut se faire avec les balises html strong et em, qui pourront avoir elles-aussi leur style propre.</em> Cette partie de texte est d'ailleurs écrite comme ceci:</p>

Les déclarations de style de cette page sont regroupées, comme il est recommandé de le faire, dans un fichier à part  "tuto_css.css"

COMPRENDRE LES FEUILLES DE STYLE (CSS)

Un exercice simple

Cet exercice nécessite Firefox et son extension webdevelopper

Webdevelopper permet de modifier les déclarations css d'une page web et d'en visualiser directement les effets dans son navigateur. C'est juste une modification qui affecte seulement la représentation de la page dans le navigateur.
Les changements ne sont pris en compte qu'après un délai qui est configurable dans les options de webdevelopper.

Mode opératoire

Pour lancer l'édition des css de webdevelopper sous Firefox, Menu CSS / Éditer les CSS, puis de modifier le contenu css.
Un mini-tutoriel  sur webdevelopper

Rappels
Manipulations
  1. Effacez toutes les déclarations css, voici les styles bruts par défaut ...cliquez sur la double-flèche verte pour revenir dans l'état de départ
  2. Ensuite pour chaque ligne commençant par // (mise en commentaire du reste de la ligne),  annulez la mise en commentaire en effaçant les 2 caractères / de début de ligne! Regardez l'effet produit avant de passer à la ligne suivante.
  3. Laissez libre cours à votre imagination, vous ne casserez rien en modifiant ces déclarations
  4. A la fin, sauvegardez le nouveau css et visualisez l'effet du changement sur un second fichier

Identification d'éléments particuliers

Comme vous avez pu le voir le menu  est identifié par un identifiant ici nommé "menu" (<div id="menu">) (il aurait pu s'appeler menu1, toto,...). Cela permet d'appliquer une présentation particulière à un élément donné et identifié.  Un identifiant doit être unique dans une page.

Si plusieurs éléments doivent avoir la même présentation, on peut leur affecter une classe, par exemple <p class="encadre"> permettra de représenter ces paragraphes avec un style défini au niveau css par une déclaration comme 

.encadre /* éléments de la classe encadre, noter le . devant le mot */
{
text-indent: 0;
border: 1px dashed blue;
background: yellow;
//background: transparent;
width: 80%;
padding: 5px 1em;
margin: 20px auto; /*marge hauteet basse, puis droite et gauche*/
}

La présentation d'un document avec des retours de chariot est à éviter, l'espacement des éléments se fait avec des marges, du bourrage, ou des espacements avant et après des paragraphes, des titres,... C'est prévu au niveau css!