A. Les feuilles de style

Lorsque l'on réalise un ensemble de pages web, par exemple si on construit un site Internet, il est bien plus judicieux de séparer le contenu de la forme. La façon la plus ``économique'' de le faire est fournie par les feuilles de style en cascade (ou CSS pour Cascading Style Sheet). Ces feuilles CSS sont des fichiers munis de l'extension .css qui vont contenir toutes les indications de style (fond d'écran, fontes, couleurs, etc) tandis que le fond sera cantonné aux fichiers .html. En général, un fichier de style unique est utilisé pour toutes les pages d'un style: quand on veut changer celui-ci, il suffit de changer quelques lignes dans le fichier .css, sans toucher à tous les fichiers .html.

a) Principe

Pour indiquer à un navigateur que le style d'une page html sera donné dans une feuille css externe, il faut ajouter un lien vers cette dernière dans l'en-tête de la page html:
<head> ... <link rel=stylesheet href=url du fichier de style type=text/css> ... </head> Il n'est pas nécessaire que la feuille de style soit dans le même répertoire que les pages html puisque son adresse est indiquée. On peut même en indiquer plusieurs, sous réserve qu'elles portent des noms différents (ceci peut être utile si l'on veut distinguer des styles différents pour l'affichage à l'écran, pour les mobiles, pour l'impression,...).

b) Syntaxe

La syntaxe CSS est assez simple:
nom_balise { propriété1: valeur; propriété2: valeur; .... propriétén: valeur; } Chaque bloc de style commence par le nom d'une balise HTML (body, h2, ul,...) suivie des propriétés de style qu'on veut donner au contenu de cette balise. Ces propriétés sont contenues entre deux accolades et se terminent par un point virgule (y compris s'il s'agit d'une propriété unique).

Remarque : même si ce n'est pas obligatoire, il est très recommandé de présenter les feuilles de style selon le modèle donné ci-dessus, en présentant une propriété par ligne: cela fait beaucoup pour la clareté de votre feuille de style...

c) Les principales propriétés

Ceci n'est qu'une liste partielle, qui permet tout de même d'obtenir un maximum de possiblités de styles différents. Attention, les noms de certaines propriétés sont proches du HTML mais pas identiqes: par exemple background-image (css) est différent de background (HTML). Les valeurs soulignées sont celles utilisées par défaut.

background-image: url du fichier image permet de spécifier une image de fond.
background-color: couleur permet de définir une couleur de fond.
border-style: dashed, dotted, double,groove, inset, outset, ridge, solid, none spécifie le style des bordures d'un élément. Attention: par défaut, cette propriété a la valeur none, c'est à dire qu'il n'y a pas de bordure.
border-width: largeur en pixel définit la bordure d'un élément.
border-color: couleur définit la couleur de la bordure.
float: right, left, none détermine si un élément (en particulier une image) flottera à gauche ou à droite du texte environnant.
font-size: xx-small, x-small, small, medium, large, x-large, xx-large ou taille en pixels définit la taille de la police utilisée.
font-style: normal, italic permet de demander l'affichage du texte en italique.
font-weight: normal, bold permet de demander l'affichage du texte en gras.
liste-style-position: inside, outside dans un élément de liste qui s'étend sur plusieurs lignes, permet de garder l'indentation de la première ligne (valeur outside par défaut) pour les lignes suivantes ou limite l'indentation à la première ligne.
list-style-type: disc, circle, square, decimal, lower-alpha, lower-roman, none, upper-alpha, upper-roman définit les marqueurs ou puces des éléments des listes non ordonnées (circle, disc, square) ou ordonnées (decimal=chiffres, roman=chiffres romains ou alpha=lettres).
margin-left: largeur en pixel ou en % de la marge à gauche.
margin-right: largeur en pixel ou en % de la marge à droite.
margin-top: largeur en pixel ou en % de la marge en haut.
margin-bottom: largeur en pixel ou en % de la marge en bas.
padding(-left, -right, -bottom, -top) : cette propriété est analogue à lapropriété margin mais indique l'écart entre un élément et son contenu. Les unités sont les mêmes que pour la propriété margin.
text-align: center, right, left, justify définit l'alignement horizontal du texte dans un élément.
text-decoration: line-through, none, overline, underline définit certains effets de caractères et permet d'obtenir du texte barré (line-through), souligné (underline) ou surligné (overline).
width: largeur en pixel, en pourcent, auto largeur d'un élément.
height: hauteur en pixel, en pourcent, auto hauteur d'un élément.

^A1 Pour étudier l'effet de la propriété "float", ouvrez le fichier cassoulet.html que vous aurez copié dans votre arborescence. Complétez ce fichier en insérant l'image cassoulet.jpg au début du paragraphe, juste après la liste des ingrédients.
^A2Liez ce fichier à une feuille de style cassoulet.css que vous créerez et dans laquelle vous définirez le style de l'image, en essayant en particulier les trois valeurs de "float".
^A3Placez à présent l'image après le texte de ce premier paragraphe et testez à nouveau l'effet des différentes valeurs de float dans la feuille de style associée.
^A4Complétez la feuille de style de façon à obtenir un aspect qui ressemble à celui celui-ci.
^A5La spécification de la largeur d'un élément associée à des valeurs des marges particulières permet de centrer un élément: modifiez la feuille de style du document précédent pour centrer le tableau.

c) Les styles contectuels

Il est également possible de définir le style d'un marqueur en fonction du contexte dans lequel ce marqueur apparaît.
Par exemple, pour définir le style associé à un élément d'une liste non ordonnée (une puce en forme de cercle), on emploiera
ul li { list-style:circle; } si cette liste est elle-même un élément d'une liste non ordonnée, on souhaitera que la puce soit un carré et on ajoutera dans la feuille de style
ul ul li { list-style:square; } La suite ul ul li indique que le style est celui d'un élément de liste (li) d'une liste non ordonnée (ul) elle même élément d'une liste non ordonnée (ul).

^B1Modifier la feuille de style liée au document précédent pour que les liens hypertextes apparaissent en vert foncé (darkgreen) si ils sont situés dans un élément de liste (li).

d) Les classes de style

Il est très souvent pratique de définir plusieurs style pour un même marqueur (X)HTML, par exemple de définir plusieurs style d'image(marqueur <img>) ou de paragraphe(marqueur <p>).
On différencie alors les marqueurs du document HTML par l'attribut class=nom où nom est choisi pour identifier une des classes associée à ce marqueur.
Dans la feuille de style, on écrira alors
nom_marqueur.nom_classe { .... style .... }
On pourra par exemple dans son document HTML définir pour les paragraphes une classe résumé, une classe introduction, etc dont les styles seront indiqués dans la feuille de style par la succession:
p.résumé { .... style .... } p.introduction { .... style .... }
^A1Modifiez la feuille de style cassoulet.css et le document cassoulet.html pour définir un nouveau type de paragraphe: le paragraphe de type note devra être écrit sur fond jaune avec une fonte x-small et des marges à droite et à gauche de 60 pixels. Appliquez ce style pour le dernier paragraphe de cassoulet.html.