Contenu | Recherche | Plan du site | Accessibilité | Contact

Documentation

Coding - CSS style

Introduction aux feuilles CSS

Le CSS (Cascading Style Sheet)est un langague qui comporte ses propore balises, ce son des règles qui on été créées pour complèmenter le xHTML. Une feuille CSS est un document texte lieé à un autre fichier dans le but de séparer le contenu de la page de sa présentation. Cette technique permet de présenter le même documents sous différentes formes, et de contrôler le graphisme d'un site web depuis un seul fichier. Les feuilles CSS peuvent s'applique a une multitudes d'autre documents tels que les pages HTML, xHTML, PHP ou encore aux fichiers XML utilisés par les flux RSS. Une feuille de style se reconnaît généralement à son extension .css.

Lier une feuille de style à un document

Pour lier une feuille de style CSS à un document HTML ou xHTML, il faut créer un lien vers la feuille en question dans l'entête du document. Pour lier une feuille de style il faut mettre un lien pointant vers le fichier CSS, dans la balise <head> du haut de page, en utilisant la balise <link>. L'attribut rel="" définit la relation, type="" précise que l'information se présente sous forme de fichier texte genre CSS, et pour finir href="" définit le chemin vers la feuille de style en question. Exemple: 

<link rel="stylesheet" type="text/css" href="style.css" />

Différentier les styles par media

Sur le même document on peut lier différentes feuilles de styles en fonction du type de media tels que le style pour l'affichage à l'écran standard, ou le style pour l'imprimante. Dans le cas d'une seule feuille l'exemple ci-dessus convient très bien. Les divers medias: 

media="all"      - Pour tous les medias.
media="aural"    - Pour les système à synthèse vocale, utilisée par les
                   personnes mal-voyantes ou aveugles.
media="braille"  - Pour les navigateurs web en mode braille utilisés par
                   les personnes mal-voyantes ou aveugles.
media="embossed" - Pour les imprimantes braille, utilisées par les personnes
                   mal-voyantes ou aveugles.
media="handheld" - Pour les ordinateurs de poche avec un tout petit écran.
media="print"    - Pour l'imprimante.
media="screen"   - Pour l'affichage à l'écran.
media="tty"      - Pour les medias à sortie non graphique.

Exemple

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Insérer du CSS directement dans une page

Pour insérer diretement du style à une page il est possible d'utiliser la balise <style> avec directement les régles de style à appliquer. C'est très utile si l'on veut juste un peu CSS pour la présentation et que la page HTML/xHTML ne soit pas dépendante d'un autre fichier pour la mise en page. Exemple: 

<head>
    
    <style type="text/css"><!--
    body {
    font-family: sans-serif, vernada, arial;
    font-size: 95%;
    --></style>
    
</head>

Changer le style du curseur

Il est possible de changer l'apparence du curseur de la souris. C'est utile pour des liens d'aides par exemple. Pour utiliser cette fonction, on peut directement insérer du style au lien en question, ou créer une class dans une feuille CSS externe. Exemple de lien directement codé dans la page avec l'attribut style="cursor: NomCurseur;": 

<a href="#cursor" style="cursor: progress;">Exemple</a>

CSS validator - Valider son code CSS

Vous pouvez valider votre feuille de style avec le service en ligne du W3C. C'est très utile pour déceler les éventuelles erreures. Le service propose aussi de copier/coller un bout de code. Vous aurez ensuite la possibilité d'afficher votre bon travail avec un joli petit logo, prouvant que vous êtes un webmaster attentif au standars du web et aux visiteurs de votre site internet.