Cours internet / Eric Pichon

syntaxe

Utilisation d'une feuille de style externe (CSS)

Les feuilles de style permettent de définir de façon plus précise et plus souple l'apparence des pages de votre site.

En créant une feuille de style externe (ou plus) contenant les spécifications de mise en forme propre à tout le site :

vous garantirez l'homogénéité de celui-ci ("charte graphique");
le jour ou vous souhaiterez rafraichir l'apparence de votre site (la police et la couleur de vos titres, l'apparence des liens hypertextes, voire l'image d'arrière plan de vos pages, etc.), il suffira de changer les spécifications de style dans ce petit fichier !
une même page pourra s'afficher avec plusieurs styles différents selon le "media" (écran, imprimante, navigateur vocal,...)

Fichier .css

La feuille de style externe est en fait un simple fichier texte contenant les spécifications de mise en forme.

Cette "feuille de style" permettra notamment :

de définir une apparence particulière pour les différentes balises d'une page ;
de créer de nouvelles apparences, indépendantes des balises traditionnelles du html, appelées "classes" : on distingue les classes des balises par un point placé avant leur nom ;
de créer une apparence propre à un seul élément de la page, déterminé par son identifiant : on distingue les identifiants par un dièse placé devant leur nom.

Application sur les pages du site

Pour que la feuille de style soit prise en compte sur une page, cette dernière doit l' "appeler" à l'aide de la balise link en en-tête :

par exemple, si la feuille de style s'appelle style.css et se trouve à la racine du site :

Pour info., on peut proposer des feuilles de style alternatives link rel="alternate stylesheet" ou différentes selon le "media" media=print. cf "accessibilité"

Vous pouvez créer vos styles à l'aide du "Générateur" de Trucsweb
ou avec un logiciel comme Top Style Lite

Creative Commons License. Attribution : ce site peut être reproduit et distribué à condition que l'auteur initial, eric pichon, soit cité.- Non commercial : aucune adaptation, reproduction ou utilisation de ce site ne peut être faite à des fins commerciales, sans accord de l'offrant ('licensor') - Partage à l'identique : des adaptations de ce site ne peuvent être diffusées que sous une autorisation identique. [cf texte intégral en français]

// style. 1, feuille de style_____

Utilisation d'une feuille de style externe (CSS)

Fichier .css

Application sur les pages du site

// style. 1,
feuille de style_____