Générateur de feuille de styles CSS

 

Si vous ne disposez pas d'un éditeur capable de créer des feuilles de styles, voici un formulaire qui devrait vous aider. Il permet de créer un style que vous pourrez copier dans une feuille de styles.

Vous pouvez créer cinq types de styles (voir plus bas pour plus de détails):

Choisissez le type de votre style :

Type de style :

 

Détails sur les cinq types de style :

L'attribut "style" de chaque balise permet de modifier son apparence sans écrire de feuille de style. L'inconvénient majeur étant de devoir recopier cet attribut à chaque balise. Par exemple <p style="color:#FFCC00;">Mon texte</p>

Le style personnalisé (attribut class) permet de spécifier les caractéristiques de votre élément de page (texte, div, tableau, ...). Par exemple le titre de cette page est réalisé avec un style qui indique la police, l'alignement, la taille et la couleur du texte. Ainsi toutes les pages ont un titre identique sans avoir à le redéfinir à chaque fois. On peut aussi appliquer ce style à plusieurs éléments de la page.

Le style personnalisé avec un attribut "id" est similaire au précédent sauf que l'attribut "id" fait référence à un élément unique de la page. Cela permet entre autre de le manipuler avec du javascript.

Modifier toujours une balise html. Par exemple si vous voulez que tous les tableaux de votre site aient une bordure de deux pixels et un fond bleu, vous pouvez modifier la balise "TABLE" en conséquence.

Modifier parfois une balise HTML avec un attribut "class". Ce type de style permet de modifier une balise html mais à l'aide d'un attribut "class". Cela permet par exemple de ne modifier que certains tableaux. Lorsque vous voulez qu'un tableau ai l'apparence citée ci-dessus vous lui appliquez le style avec un attribut "class".

Quel nom donner au style ?

Avec l'attribut "style" on ne crée pas de style, il n'y a donc pas de nom à donner.

Dans le cas des styles personnalisés avec attribut "class" vous pouvez l'appeler comme vous voulez, à condition de ne pas mettre d'accents, d'espaces et de signes de ponctuation. Vous pouvez utiliser le tiret haut (-) mais pas le tiret bas (_). Le générateur se charge de rajouter le point nécessaire devant le nom du style. Dans le cas d'un style personnalisé avec attribut "id", le générateur ajoute le caractère "#" qui doit débuter le nom du style.

Pour modifier les balises html, le nom du style doit être le nom de la balise.

Pour modifier une balise html avec l'attribut "class" il faut donner le nom de la balise suivi d'un point puis d'un nom personnalisé. Par exemple pour modifier la balise TABLE (tableau), on peut nommer le style : table.toto