Entrez le nom du fichier sans l'extension .css :

Fermer

Générateur de styles CSS

Le fichier .css vient d'être créé


Fermer

Type de style :

Type
Casse du texte. text-transform Casse du texte : majuscule, minuscule ou mettre en majuscule
Couleur du texte. color [Couleur] Définit la couleur du texte. Entrez une numéro à 6 chiffres précédé de #
Décoration du texte. text-decoration Définit une décoration (souligné, barré, ...). Si vous sélectionnez none, il ne faut rien mettre d'autre
Epaisseur du texte. font-weight Définit l'épaisseur de la police. Plus ou moins gras.
Hauteur de ligne. line-height Définit la hauteur de ligne. Si le texte a pour taille 12 et la hauteur de ligne 20, alors l'interligne est de 8 pixels. Donner le chiffre et l'unité. Ex : 18px
Police. font-family Définit un nom de police ou une famille. Les polices seront choisies dans l'ordre de la famille.
Style. font-style Définit le style d'écriture
Taille de la police. font-size Définit la taille de la police
Variante de style. font-variant Variante petites majuscules
Arrière-plan
Couleur. background-color [Couleur] Définit la couleur du fond. La couleur doit être donné sous forme d'un numéro précédé de #
Fixation. background-attachment Spécifie si l'image reste fixe avec les déplacements de l'écran
Image d'arrière plan. background-image Définit l'image d'arrière-plan. Syntaxe : url('mon_image.jpg')
Position. background-position Position de l'image par rapport au coin supérieur gauche. Vous pouvez sélectionner une valeur parmi les trois premières et une valeur parmi les trois dernières
Répétition. background-repeat Définit la façon de répéter l'arrière-plan
Bloc
Affichage. display mode d'affichage de l'élément : invisible, en-ligne, paragraphe (block)
Alignement du texte. text-align Aligner le texte à gauche, au centre, à droite ou justifié
Alignement vertical. vertical-align Alignement vertical du texte
Espace blanc. white-space Gère les espaces blancs. pre permet de mettre des espaces et nowrap ne va jamais à la ligne
Espacement entre les lettres. letter-spacing Espacement entre les lettres. Indiquez une valeur plus l'unité (ex : 1px)
Espacement entre les mots. word-spacing Indiquez la valeur plus l'unité. Ex : 1px
Retrait du texte. text-indent Indiquez une valeur ainsi que l'unité. Ex : 10px
Boîte
Flottante. float
Hauteur. height Définit la hauteur d'un élément. Donner la valeur plus l'unité. Ex : 30px
Longueur. width Définit la longueur d'un élément (texte, image, calque, ...). Donner la valeur plus l'unité. Ex : 400px
Marge de droite. margin-right Indiquer la valeur de la marge de droite avec son unité
Marge de gauche. margin-left Indiquer la valeur de la marge de gauche avec l'unité
Marge du bas. margin-bottom Indiquer la valeur de la marge inférieure avec l'unité
Marge supérieure. margin-top Indiquer la valeur de la marge supérieure avec son unité. Ex : 2px
Marges (si toutes égales). margin Indiquer la valeur de la marge avec l'unité si elle est identique partout
Remplissage (si identique partout). padding Ecartement avec d'autres éléments s'il est identique partout (gauche, droite, haut et bas). Indiquer une valeur avec l'unité
Remplissage bas. padding-bottom Ecartement entre un autre élément et le bord inférieur
Remplissage gauche. padding-left Ecartement entre un autre élément et le bord gauche
Remplissage haut. padding-top Ecartement entre un autre élément et le bord supérieur
Remplissage à droite. padding-right Ecartement entre un autre élément et le bord de droite
Retour ligne sur. clear place le bloc en dessous de tout élément flottant à droite, à gauche ou les deux
Bordure
Couleur. border-color [Couleur] Couleur des bordures si elles sont toutes identiques
Couleur de droite. border-right-color [Couleur] Couleur de la bordure de droite
Couleur de gauche. border-color-left [Couleur] Couleur de la bordure de gauche
Couleur du bas. border-bottom-color [Couleur] Couleur de la bordure du bas
Couleur haut. border-top-color [Couleur] Couleur de la bordure du haut
Epaisseur bas. border-bottom-width Epaisseur du bord inférieur
Epaisseur bordure. border-width Epaisseur de bordure si elles sont identiques partout
Epaisseur droite. border-right-width Epaisseur du bord droit
Epaisseur gauche. border-left-width Epaisseur du bord de gauche
Epaisseur haut. border-top-width Epaisseur du bord supérieur. Indiquer la valeur avec l'unité. Ex : 1px
Style bas. border-bottom-style Style de la bordure du bas
Style de bordure. border-style Style de bordure (à utiliser si toutes les bordures sont identiques)
Style droite. border-right-style Style de la bordure de droite : dotted = pointillé, dashed = tiret, solid = trait normal
Style gauche. border-left-style Style de la bordure de gauche
Style haut. border-top-style Style de la bordure de haut. Solid est un trait plein classique
Liste
Image. list-style-image Permet de remplacer les puces par une image. Syntaxe : url(mon_image.jpq)
Position. list-style-position Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
Type de puce. list-style-type Type de puces et de numérotation
Positionnement
Bas. bottom Position du calque par rapport au bas de la page. Donner une valeur avec son unité. Exemple : 23px
Droite. right Position du calque par rapport au bord droite de la feuille. Donner une valeur avec son unité. Exemple : 35px
Débordement. overflow Gère l'affichage du contenu du calque lorsque le contenu est plus grand que le calque
Gauche. left Position du calque par rapport au bord gauche de la page. Donner une valeur avec son unité. Exemple : 0px
Haut. top Position du calque par rapport au haut de la page. Donner la valeur et l'unité. Exemple : 35px (sans espaces)
Type. position Définit par rapport à quoi le calque se place : le coin supérieur gauche de la page, la balise précédente, pas de position (dépend de l'emplacement dans le code HTML)
Visibilité. visibility Visibilité de l'élément
Z index. z-index Définit la position des calques superposés. Plus le chiffre est élevé plus le calque est prioritaire.
Extensions
Forme du curseur. cursor Permet de modifier la forme du curseur
Saut de page après. page-break-after Permet de spécifier un saut de page en cas d'impression
Saut de page avant. page-break-before Permet de spécifier un saut de page en cas d'impression