WebDev LiborDocs

CSS style

A propos des feuilles CSS. C'est quoi le CSS ?
Lier une feuille de style à un document html, xhtml, ou PHP.
Lier différentes feuilles CSS avec l'attribut media="".
Valider ses feuilles de style.
Présentation de Cssed, éditeur de feuille de style css.
Easy html, codez votre première page html, pour le web ou une présentation. Vous pourrez ensuite lui lier divers feuilles de style pour le mettre en forme.

A propos des feuilles CSS

CSS = Cascading Style Sheet

le CSS est un langague qui comporte ses propore balises, ce son des règles qui on été créée pour complèmenter le html. Une feuille CSS est un document texte qu'on lie à un autre document dans le but de séparer le contenu de la page de sa présentation. On peut ainsi présenter le même documents sous différentes formes. Les feuiles CSS peuvent s'applique a une multitudes d'autre documents tel que les page html, xhtml, PHP ou encore aux fichiers xml utilisé par les flux RSS.

Une feuille de style se reconnaît à son extension .css, préscisant que son contenu est du genre CSS.

Lier une feuille de style à un document html, xhtml, ou PHP

Pour lier une feuille de style CSS à un document html, xhtml, ou php, 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 donc mettre un lien comme ci-dessous, entre la balise <head></head>. rel="" c'est pour le type de lien (link), href="" pour le chemin vers la feuille CSS, et type="" pour préciser que l'infos se ptésente sous forme de fichier texte du genre CSS.

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

Lier différentes feuilles CSS avec l'attribut media=""

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

media="all"

Pour tous les medias.

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

media="aural"

Pour les système à synthèse vocale, utilisée par les personnes mal-voyantes ou aveugles.

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

media="braille"

Pour les navigateur web en mode braille, utilisée par les personnes mal-voyantes ou aveugles.

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

media="embossed"

Pour les imprimantes braille, utilisée par les personnes mal-voyantes ou aveugles.

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

media="handheld"

Pour les ordinateurs de poche avec un tout petit écran.

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

media="print"

Pour l'imprimante.

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

media="screen"

Pour l'affichage à l'écran.

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

media="tty"

Pour les media à sortie non graphique tel que Lynx.

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

CSS validator

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.

haut de la page