Comme en JavaScript, on peut insérer du CSS dans la page HTML ou faire appel à un fichier externe à extension .css.
Insertion dans une page HTMLTout doit être compris entre ces deux ordres à insérer entre <HEAD> et </HEAD> :
Insertion d'un fichier externe dans une page HTML
Le fichier doit avoir l'extension CSS et ne doit contenir que du code CSS (pas de balises HTML dedans). Voici le code qui fait appel à ce fichier à placer entre <HEAD> et </HEAD> :
Une classe permet de faire appel un format bien defini sur plusieurs balises.
Chaque ordre est suivi des ":" et de sa valeur. Pour séparer plusieurs ordres on utilise le ";".
Attention à ne pas oublier le point devant le nom de la classe (toto-titi).
Pour appeler ces classes il faut insérer un attribut supplémentaire à l'ordre voulu. exemple :
| Paramètres | Valeurs Possibles | Fonction |
|---|---|---|
| color | #XXXXXX | Change la couleur du texte |
| background-color | #XXXXXX | Change la couleur de fond |
| font-family | arial,verdana,comic sans ms... | Change la police de caractère. Plusieurs polices séparées par une virgule permettent au navigateur de choisir la police suivante, si la police précédente n'existe pas sur le PC du visiteur |
| font-size | XXpt XXpx XXcm XXmm |
Change la taille de caractère avec comme unité le point, la pixel, le centimètre, le millimètre... |
| font-weight | bold none |
Met en gras ou non |
| text-decoration | none underline overline line-through blink |
Aucune décoration Souligné Surligné Barré Clignotant (Netscape seulement) |
| text-transform | capitalize uppercase lowercase none |
Première Lettre De Chaque Mot En Majuscule TOUT EN MAJUSCULE tout en minuscule Aucun changement |
| font-style | italic normal |
Met en italic ou non |
| background-image | URL(data/image1.gif) | Met une image en fond |
| left | XXpx | Décalage par rapport à la gauche de XX pixels |
| top | XXpx | Décalage par rapport au haut de XX pixels |
| width | XXpx XX% |
largeur en pixels ou en pourcentage |
| height | XXpx XX% |
hauteur en pixels ou en pourcentage |
| margin-left | XXpx XX% |
marge de gauche en pixels ou en pourcentage |
| margin-right | XXpx XX% |
marge de droite en pixels ou en pourcentage |
| margin-top | XXpx XX% |
marge du haut en pixels ou en pourcentage |
| margin-bottom | XXpx XX% |
marge du bas en pixels ou en pourcentage |
| z-index | X | Chiffre représentant la profondeur (voir cours 3D). Peut être positif ou négatif. |
En CSS, il est possible de changer les couleurs des barres de défilement de votre navigateur. Malheureusement, ceci n'est modifiable qu'à partir de la version 5.5 et superieurs d'Internet Explorer.
Voici le code à taper pour obtenir l' effet désiré. Il ne vous reste plus qu'à adapter les couleurs au design de votre site :
