Bonjour à vous futur webmaster ! Nous allons vous montrer comment mettre des formes et des couleurs à votre site. Il est vrai qu’un site sur fond blanc, ca n’attire pas forcément l’oeil, mais un site accompagné d’ombre, d’effets, de belles couleurs, ça devient tout de suite plus intéressant !

Le CSS3, comment ca marche ?

Une fois le contenu du site écrit, nous avons besoin du CSS3 pour le mettre en forme. Il met en valeur le site à l’aide de couleurs et d’une mise en page. C’est une évolution du CSS. Il existe donc de nombreuses nouvelles balises. Dans un premier temps, nous allons vous expliquer les nouvelles balises du CSS3.

Chaque élément que nous allons vous expliquer n’est qu’une brève approche pour que vous puissiez comprendre comment utiliser les balises du CSS3 pour la création de votre futur site. Essayez les codes, et créés en de nouveaux !!!

I. Création d'une page

1. L’appel

Lorsque l’on se lance dans le design d’une page, que l’on vient tout juste de coder en html, on ne sait pas toujours comment appeler les fonctions dans son fichier .css, pour que celles-ci soient opérationelles. Nous allons vous montrer comment procéder.

La structure de votre css est toujours la même, quelque soit sa déclaration. Elle est composée d’un sélecteur (balise, identifiant ou classe), d’une ou plusieurs propriétés (border, padding, margin...), accompagnées d’une ou plusieurs valeurs (red, 8px...). Elle se construit comme ceci:

Lorsque vous allez créer votre site, vous appelerez certaines balises dans votre .css grâce aux selecteurs. Nous allons les voir plus en détail.

Si vous avez une balise toute simple du style ‹body›‹/body›, il vous suffit d’appeler votre selecteur du même nom que la balise choisit :

Si vous appelez votre balise par un id="toto", il faudra que votre selecteur soit précédé d’un # :

Et enfin si vous appelez votre balise par une class="lala", à ce moment là votre selecteur doit être précédé d’un . :

C’est bien tout ça, mais quel est la différence entre la propriété "classe" et la propriété "id" ?
Elles n’ont pas les mêmes fonctionalités. En effet, si vous n’utilisez qu’une seule fois la propriété dans votre code, vous pouvez juste nommer votre balise par un "id". Par contre, si vous pensez utiliser plusieurs fois une même balise, à ce moment là, il sera plus judicieux de la nommer par une "classe".

2. Internet

Lorsque vous allez mettre en forme votre site, il faut savoir que selon le moteur de recherche, le code ne sera pas le même ! En effet, chaque moteur de recherche a une feuille de style différente où le code source change, pour que vous puissiez la lire. Voici les différentes balises que vous pourrez mettre devant votre propriété :

Mozilla : -moz-
Opera : -o-
Safari : -webkit-
Chrome : -webkit-
Internet Explorer : -ms-

Exemple :

Ici, nous aurons un fond gris constitué de bords arrondis à 10px. Notre fond sera affiché de la même façon sur les 5 explorateurs. Nous pensons bien que vous n'avez pas forcément compris tout le morceau de code juste au dessus, ne vous inquiétez pas, une fois tous les outils en main, ca sera trop facile pour vous ;)

II. La structure

1.Mettre en page un body.

Le body est le corps du site. C’est là où vous pouvez insérer votre texte et vos images. vous allez pouvoir fixer une marge, à gauche comme à droite, pour votre texte ainsi qu’un pied de page et un haut de page. Et pour que celui-ci soit plus jolie, vous pourrez même changer la couleur de fond, et pourquoi pas, insérer une image.

Exemple :

Explication :

"margin-top": Il permet de mettre un haut de page, ici à 30px.
"margin-bottom": Il permet de créer un pied de page, ici à 20px
"background-color": Il permet de définir la couleur de votre fond de page, nous avons choisit ici la couleur bleue.

Vous pouvez aussi mettre en place une marge à gauche et à droite de votre page, tout simplement en remplaçant le top par left (gauche) ou right (droite).

2.Créer une page.

Il est si facile d’écrire tout un texte et de se rendre compte qu’on ne peut pas le mettre en page comme on le souhaiterait. Plutôt que de mettre le tout direct sur un fond de couleur, ou sur une photo, il serait judicieux de créer une page, pour que l’on puisse intégrer notre texte déssus, et que celle-ci soit détachée de notre body. Je vous montre !

Pour créer une page, rien de plus facile, il vous suffit pour cela de créer un sélecteur du nom que vous le souhaitez (dans l’exemple suivant j’ai pris un nom simple, "fond-blanc", pratique à retrouver.).

Exemple :

Explication :

Vous pouvez remarquer l’apparition de la nouvelle balise «padding». Celle-ci permet de créer une marge, ici de 20px, à gauche et à droite de votre texte.