Commençons sans plus tarder par un code CSS de base que vous pourrez vous-mêmes tester dans votre fichier CSS.
Voici le code CSS sur lequel nous allons nous pencher :
p { color: blue; }
Je vous propose maintenant de tester ce code CSS. Pour ce faire, il vous suffit de cliquer sur votre page HTML pour le lancer dans le navigateur. Comme nous avons fait lors de la partie précédente.
Vous verrez apparaître le texte contenu dans les paragraphes de vos pages HTML en bleu.
Dans ce code CSS on retrouve trois éléments :
L'identificateur d'une balise : ici c'est la balise P que l'on cible. Notez que l'on peut identifiez une balise par son nom (touche toutes les balises de ce type), par sa classe (touches toutes les balises d'une certaines classe) ou par son ID 'touche uniquement la balise correspondant à l'ID que l'on sélectionne).
La propriété CSS de la balise : ici c'est la propriété color dont le but est, comme vous l'aurez remarqué, de changer la couleur du texte. Notez que l'on peut utiliser plusieurs propriétés pour une seule balise.
La valeur de la propriété : ici on a la valeur "blue" (bleu) attribuée à la propriété color. Si je décide d'ajouter une propriété font-size (taille du texte) à la suite, je dois également lui indiquer une valeur.
Comme vous le voyez, on met d'abord l'identificateur de la balise, met des accolades. Dans ces accolades on met le couple propriété/valeur (un peu comme le couple attribut/valeur de HTML), sauf que la propriété se termine par un deux-points ":", puis vient la valeur qui elle se termine par un point-virgule ";". Vous pouvez mettre autant de couples propriété/valeur que vous ne le désirez.
Et si je veux que ce soit le texte gras qui soit affiché en bleu plutôt qu'un paragraphe ?
Pour cela il suffit de changer le P en STRONG.
Et si vous voulez que deux balises ou plus aient exactement les mêmes propriétés il suffit de les séparer par des virgules, comme ceci :
p, strong, h1 { color: blue; font-size: 13px; }
Et voilà, vous connaissez les bases du CSS.
Ne vous inquiétez pas, on en apprendra bien plus dans ce tutoriel !