Pour voir les premières parties de notre dossier, c’est par ici :
Ce sont des notions passionnantes que vous allez découvrir dans ces quelques lignes, puisqu’elles vous permettront d’imprégner vos pages web de votre personnalité, de vos goûts. Vous pourrez même ensuite modifier le style de certains thèmes prêts à l’emploi comme Twentyeleven.
Codes css pour le body : couleurs, images…
Prenons une image pour inspiration :
Font-family correspond au choix de la police : il suffit ensuite de remplacer Arial par la police que vous affectionnez.
Font-size : c’est la taille de l’écriture vous pouvez agrandir (1.3 par exemple) ou rétrécir à l’infini.
Text-align : aligne le texte à droite (right), à gauche (left), ou au milieu (center). Il est préférable d’aligner un texte à gaucher bien sûr : si ici nous avons choisi center, c’est en fait pour pouvoir centre la page.
color : détermine la couleur du texte.
background : seul, ce code permet de personnaliser la couleur du fond. Il prend une autre fonction s’il est accompagné d’un autre terme, mais quoi qu’il en soit il désigne le fond de l’élément.
Mettre une image en fond du body
On peut créer de superbes univers en insérant une image inspirée et adaptée au reste du thème. Le seul inconvénient est que cela ralentit fortement l’affichage de votre site. Mais il y a des astuces pour alléger les fichiers. Commençons par faire simple en apprenant le code : background-image : url(images/nomdufichier.png);
Pour que cela fonctionne, il vous faut donc enregistrer le fichier image choisi dans le dossier images du répertoire de votre site, via le ftp. Cette image devra soit être grande pour couvrir tout le body, soit être plus petite et répétée.
Une image légère pour votre body grâce au css
En utilisant une image qui pourra être répétée sur tout la surface du body tout en offrant une belle apparence (rayures, points, ronds…), le fichier peut ne peser que quelques pixels : on utilise dans ce cas la fonction repeat (background-repeat:repeat;).
Le plus léger étant évidemement de ne pas mettre d’image mais une simple couleur à laquelle on peut rajouter un effet dégradé par exemple :
background-image: -moz-linear-gradient(top, #000, #181818);
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#181818));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#181818);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#181818)”;
Les codes css indiqués pour le body sont applicables à tout autre contenant de votre page web.
Le header et le css
Certaines fonctionnalités sont plus intéressantes pour le header que pour le body. Notamment la longueur et la hauteur d’un contenant. Dans la feuille de style on note : #header{ puis les attributs de votre choix, en refermant bien avec } à la fin.
En indiquant : height: 60px; on créé une largeur similaire à celle de l’entête de top10hébergeurs.com. Pour imposer une longueur on écrit : width : 1000px; mais on peut aussi raisonner en %. Par exemple sur cette page, le header fait toute la longueur et s’il y a besoin de préciser le width on indiquera 100%.
Ensuite, vous pouvez choisir la police du titre indépendamment de celle de la description de votre site :
#header h1 pour le titre et #header p pour la description. Ces termes peuvent changer d’un thème à l’autre : ils sont en lien avec le nom donné aux éléments dans le header.php et index.php.
Bientôt nous vous expliquerons les composants css utiles à la mise page d’un menu : ce ne sera pas une partie de plaisir pour tout le monde!
