Les feuilles de style (4/8)

Les propriétés CSS les plus courantes

Voilà, votre page commence à prendre tournure. Avec un peu de couleurs, quelques changements de police, on arrive facilement à quelque chose. Merci qui ? CSS … Vous avez bien compris que c'était fait pour la présentation, contrairement au HTML, qui est plutôt pauvre de ce côté-là.

Vous allez vous en rendre compte, ce sont souvent les mêmes propriétés que vous allez affecter à vos éléments CSS. En voici quelques-unes parmi les plus utiles.

 

Pour la police : font

En général, les polices par défaut des navigateurs ne sont pas vraiment sexy. La première chose à faire pour personaliser un site, c'est de changer la police. Normalement, on est censé utilisé font-family pour la police, font-size pour la taille, font-weight pour la graisse de la police, etc. Mais bonne nouvelle, il existe un raccourci, grâce à font … tout court. Un exemple pour la police de vos liens :

a {
	font: verdana, sans-serif 12px bold;
}

En une déclaration, vous venez de dire : pour les liens, utiliser la police verdana (ou une police sans serif) de 12 pixels et en gras. Pratique non ?

 

Pour les couleurs

Une page en noir et blanc, c'est triste. Pas la peine de barbouiller toute votre page pour la rendre vivante, il suffit d'un peu de couleur ici ou là, sur vos titres ou vos liens et ça prend vie. Vous pouvez choisir la couleur de texte d'un élément grâce à la déclaration : color: #006400; ce qui signifie que le texte sera vert foncé. Le chiffre bizarre, c'est le code hexadécimal de la couleur vert foncé. Vous cherchez une couleur particulière ? Allez par exemple voir la page CSS color names de w3schools.com.

Vous pouvez également choisir la couleur de fond d'un élément. Si par exemple, vous voulez que vos liens deviennent noir sur fond gris (sait-on jamais …) quand on passe la souris dessus, vous pouvez mettre dans votre feuille de style :

a:hover {
	color: black;
	background-color: #D3D3D3;
}

 

Pour les bordures : border

Vous voulez faire un joli texte encadré comme celui-ci ? Tout cela se fait avec la propriété border. Comme avec font, c'est un raccourci qui permet de mettre plusieurs informations de bordure dans la même déclaration :

border: 1px 0px 1px 1px solid red;

Cela se lit : la bordure est rouge et en trait plein ; elle mesure 1px en haut, 0px à droite, 1px en bas, 1px à gauche (on tourne toujours dans le sens horaire). En CSS, on peut tout encadrer, même la balise <body> en entier. Évitez à tout prix de souligner autre chose que des liens.

Par exemple, pour éviter que l'image-lien soit encadré, rajoutons dans notre CSS :

a img {
	border:0px;
}

Regardez ce que ça donne dans notre page d'exemple : une image-lien sans cadre bleu dégueulasse autour.

 

Pour les marges : margin et padding

Quoi ? Il y a deux marges différentes ? En quelque sorte, oui. La propriété margin désigne la marge extérieure : c'est l'espace minimum entre un élément et un autre élément voisin. La propriété padding, c'est la marge intérieure : l'espace entre l'élément et ce qu'il contient.

Voici le schéma (pris sur htmldog.com) :

 

Margin
Border
Padding

 

Contenu

 

On comprend mieux comme ça. Vous voyez que le padding est à l'intérieur de la bordure, tandis que la marge est à l'extérieur.

Et comme d'habitude, pour la déclaration on tourne dans le sens des aiguilles d'une montre, en commençant par le haut :

margin: 10px 20px 10px 30px;
padding:5px;

Cette déclaration se lit : la marge de cet élément est de 10px en haut, 20px à droite, 10px en bas et 30px à gauche. La marge intérieure est de 5px partout.

 

Rien qu'avec ces quelques propriétés, on peut rapidement faire de jolies choses et surtout : donner à son site une apparence personnalisée et plus vivante.

 

Nous allons maintenant apprendre à identifier seulement certains éléments dans votre document.

 

Revenir au sommaire de cette leçon
Revenir à l'index des leçons Web

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French