Apprenez le CSS de A à Z ! (mon site, pas à pas)
Votes : environ (100%) 1 vote

Dans l’article précédent de cette série, je vous ai parlé du CSS, vous avez découvert comment le placer dans un fichier HTML, comment l’écrire et comment il marche !

Dans cet article, on va pratiquer le CSS. Nous allons mettre du vrai code CSS et le faire marcher.

Vous allez découvrir comment faire pour rendre une page plus attractive, tout en plaçant du BON CSS dans votre fichier CSS dont je vous ai parlé dans l’article précédent.

Commençons alors :)

PS: Je vous attend en bas de cet article :)

Récapitulons !

Je commence par faire un rappel bref, sur les divers manières qu’on peut utiliser pour placer du CSS dans une page HTML ou XHTML.

On a dit qu’il existe 3 manières de placer du CSS dans une page HTML, la première la plus recommandée est celle d’utiliser un fichier, pour éviter le problème du chargement lent de vos pages, et pour même faire rapidement les changements dans le thème utilisé par votre site web.

Voici en puces les 3 manières :

  • Placer le CSS dans un fichier externe, c’est la méthode la plus recommandée et la plus utilisé !
  • Placer le CSS dans la balise <head>, cela ralenti un peu le chargement des pages, ce n’est pas recommandé
  • Placer le CSS à l’interieur de la balise, à travers l’attribut style= » », pas recommandé

Bien !

Que vous savez comment le placer en bref, passons aussi brièvement sur la hiérarchie d’un fichier ou d’un code CSS.

Le CSS n’est pas comme l’HTML, il ne se base plus sur des balises « <balise> » mais ça s’écrit sous la forme ci-dessous :

[css]# (pour un sélécteur ID) ou . (pour un sélécteur CLASS) ou rien + Le-nom + { VOTRE-CODE-CSS-ICI }[/css]

Voici un exemple :

[css]#element {width: 200px; /** Pour définir la largeur **/background: yellow; /** La couleur d’arrière plan **/}[/css]

Mais c’est facile :)

On peut trouver même des éléments définis uniquement par la balise, comme dans l’exemple en dessous :

[css]p {color:blue; /** Pour attribuer la couleur bleu à tout les paragraphes de la page **/}[/css]

Et si par exemple, pour plusieurs balises, on a définit le même selecteur, alors, il faut attribuer le nom de la balise avant le sélécteur, voici un exemple :

[css]div.header {height: 100px: /** Pour mettre un hauteur précis pour l’élément défini par la balise &lt;div&gt; et le sélécteur CLASS header **/}[/css]

Bien ! C’est ça le CSS !

Il est vraiment amusant de jouer avec le style d’une page web, mais il faut juste lire la suite pour découvrir de nouvelles choses :)

à l’intérieur du CSS

Les couleurs, comment peut-on les définir ?

La chose la plus importante dans une page WEB, ce sont les couleurs, c’est avec les couleurs qu’on peut créer des pages attractifs !

Dans le CSS, i lexiste plusieurs méthodes pour définir une couleur, les voici :

  • La méthode du HEX : Je vais l’expliquer tout de suite…
  • Les coordonnées RGB : (exemple: rgb(255, 0, 0) pour la couleur rouge), même principe que le HEX, seulement il n’y a que des chiffres (max: 255) avec le mot rgb avant les coordonnées.
  • Les noms des couleurs : Il suffit de mettre le nom de la couleur en anglais pour l’utiliser (exemple : red pour rouge).

Personnellement, j’utilise souvent le code HEX, c’est plus léger et facile à comprendre. Comment ça marche ?

Le code HEX d’une couleur se compose d’un dièse # et de 6 numéros liés. Les 2 premiers nombres définissent la densité de la couleur Rouge, les 2 nombrs dans le centre définissent la quatité du vert et les 2 derniers pour le bleu. La valeur minimale que peut prendre un code de 2 numéro est 00, tendis que FF signifie le maximum, et c’est pour cela que #FFFFFF signifie la couleur blanche !

Vous pouvez trouver le code HEX dans nombreux programmes de graphisme (PhotoShop, PhotoFiltre,…), des sites web (ex: Html Color Codes) ou en l’écrivant en utilisant l’image en haut  :whistle:

Voici une liste des codes les plus faciles à retenir.

  • #FFFFFF : Blanc
  • #000000 : Noir
  • #666666 : Gris foncé
  • #0000FF : Bleu
  • #FF0000 : Rouge
  • #00FF00 : Vert

Bien !

Passons maintenant à la chose la plus importante dans le CSS, comment décorer un texte.

Comment décorer du texte en utilisant le CSS :

Changer la taille du texte :

Vous pouvez changer la taille du texte en utilisant la propriété « text-size:Xpx; », voici un exemple :

[css]h1 {font-size: 18px; /** Ceci permet de changer la taille de tous les titres les plus importants, les balises &lt;h1&gt; **/}[/css]

Remarque: Il n’existe plusieurs unités de mesure dans le css, pas seulement le PX (pixel), il existe le : PT, %,…

Changer la couleur du texte :

Vous pouvez modifier la couleur d’un élément contenant du texte en utilisant la propriété « color:#code-hex; » (avec #code-hex le code dont je vous ai parler en haut).

Voici un exemple pratiqué souvent par les webmasters :

[css]p:first-letter {color:#666; /** Pour mettre la première lettre de chaque paragraphe en couleur grise **/}[/css]

Changer la police (font) du texte :

Comme dans le Word, vous pouvez même modifier la police (font) d’un texte, à condition qu’il soit disponible dans la plupart des ordinateurs !

Car si la police que vous avez utilisé ne se trouve que dans votre ordinateur (C:\Windows\fonts), les autres ne peuvent plus la voir.

Mais, comme vous le savez, il y a toujours des solutions inédites ! Les gens qui ont créé ce fameux CSS ont pensé à nous :)

Pour changer ou définir la police d’un texte quelconque, vous pouvez utiliser la propriété « font-family:police1, police2, police3; ».

Et oui, voici comment ça marche.

Vous mettez en premier le font que vous voulez qu’il apparaît dans tous les navigateurs web, et dans la deuxième place vous mettez un police proche du premier, si le premier n’est pas disponible, le navigateur va passer au deuxième font, et ainsi de suite…

Voici un exemple :

[css]h1.titre1 {font-family:verdana, arial, sans-serif; /** Verdana en premier plan, si ça n’existe pas, on passe à l’Arial **/color:#666;}[/css]

Remarque: En général, il y a deux types de fonts, le premier c’est des fonts serifs, et le deuxième type c’est des fonts sans serifs.

Changer l’alignement du texte :

Vous pouvez, à l’aide de la propriété « text-align » ou « vertical-align » aligner votre texte horizontalement et verticalement.

Voici un exemple pour un texte centré :

[css]p.centre {text-align:center; /** Vous pouvez mettre à la place de "center"… "right" pour l’alignement à droit, "left" pour l’alignement à gauche **/}[/css]

Et voici un exemple CSS d’une image alignée en haut du niveau horizontale du texte (vous pouvez même l’utiliser pour une partie du texte) :

[css]img.puissance {vertical-align:text-top; /** J’ai utilisé le "text-top", pour l’aligner en haut du texte, pour l’aligner en haut de l’objet contenant cette image, vous pouvez utiliser uniquement "top" **/}[/css]

Remarque: C’est déjà comme ça qu’on peut créer la balise <sup> :p

La balise qui fait tout… <div> !

Savez-vous qu’aujourd’hui, les grands sites n’utilisent plus les tableaux ! Car ça fait allourdir beaucoup le côté HTML d’un site web.

C’est dépassé !

Aujourd’hui, on utilise souvent la balise <div> dont je n’ai pas parlé dans le début de la série, car c’est purement créée pour le CSS !

On l’appelle même la balise « bloc », permettant de créer des blocs, cependant, on peut l’utiliser pour afficher des images, pour modifier l’arrière plan d’une partie dans le site, pour organiser votre page WEB (En-tête, corps, Pied). Je vais parler de tout cela dans la suite de cette série dédiée aux débutants.

Bien !

Voici donc la différence entre un code XHTML utilisant un tableau, et un autre utilisant des DIVs :

Mode : Tableaux

[html]&lt;table&gt;&lt;tr&gt;&lt;td&gt;Nom complet :&lt;/td&gt;&lt;td&gt;Profession :&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Soufiane SABIRI&lt;/td&gt;&lt;td&gt;Fondateur de Easytutoriel.com&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;X Y&lt;/td&gt;&lt;td&gt;Ta Ta Ta&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;[/html]

Mode : DIVs

[html]&lt;div&gt;Nom complet :&lt;/div&gt;&lt;div&gt;Profession :&lt;/div&gt;&lt;div&gt;Soufiane Sabiri&lt;/div&gt;&lt;div&gt;Fondateur de Easytutoriel.com&lt;/div&gt;&lt;div&gt;X Y&lt;/div&gt;&lt;div&gt;Ta Ta Ta&lt;/div&gt;[/html]

Le premier comporte 210 caractères, tendis que le deuxième code n’occupe que 168.

Donc, même si j’ai fait un peu du Hors-sujet, éspérant que ce paragraphe vous a permis de savoir plus sur la puissance de la fameuse balise <div>.

Les arrières-plan :

Pour définir la couleur ou l’image de l’arrière plan, vous pouvez utiliser la propriété « background:/** Codes pour définir l’arrière plan **/; ».

Pour mettre dans l’arrière plan d’un élément (tableau, div, lien <a>,…) une couleur, il suffit de coller le code HEX de la couleur après les deux points situés après la propriété « background », voici un exemple :

[css]div#entete {background:#DF0101; /** Ici, j’ai mit un arrière-plan sablé pour l’entête défini par le ID entete de la balise &lt;div&gt; **/}[/css]

Pour mettre une image ou un miniature dans l’arrière plan, là se pose de petits problèmes… Mais n’oubliez pas que vous êtes sur le site web des tutoriels faciles :p

Voyons comment ça marche !

En fait, on peut partitionner la propriété « background » en plusieurs propriétés, comme pour d’autres propriétés CSS.

Pour faire un lien vers une image dans l’arrière plan, on utilise « url(http://exemple.com/lien-vers/image.jpg) », pour la repition, on utilise « repeat-x » pour répéter uniquement en axe X, le même principe pour l’axe Y.

Voici un exemple :

[css]div#header {background:url(images/bg-header.gif) repeat-x #A10003;}[/css]

Le code ci-dessuis, est équivalent à celui là :

[css]div#header {background-color:#A10003;background-image: url(images/bg-header.gif);background-repeat: repeat-x;}[/css]

Bien !

Une remarque: Vous pouvez à l’aide du CSS3 définir plus d’un arrière plan, mais, ce n’est pas encore compatible avec plusieurs navigateurs (IE6, IE7, IE8,…)

Les bordures :

Les bordures peuvent êtres utilisés pour plusieurs éléments dans une page web, que ce soit pour des images, tableaux ou DIVs (blocs).
Pour définir un bordure, il suffit d’utiliser la propriété « border:; » dans votre code CSS.

D’ailleurs, un bordure se définit par trois choses, l’épaisseur, le type et la couleur.

Pour définir l’épaisseur on utilise les pixels (exemple: 2px), poour la couleur, le code HEX suffit :) et pour le style il y en a des tas de styles, les voicis :

  • Solid : Pour faire un bordure simple, linéaire
  • Dashed : Pour faire une bordure coupé (pas continue)
  • Grouve : Pour une bordure 3D, formidable
  • Dotted : Pour créer une bordure sous type de pointillés
  • Double : Une double bordure
  • Ridge : Pour une bordure 3D, dépend de la couleur
  • Inset : Pour une bordure 3D, selon la couleur (color) choisis
  • Outset :Pour une bordure 3D

Voici un exemple :

[css]img {border: 1px solid grey; /** Dans cet exemple, j’ai mit un bordure pour toutes les images, épaisseur d’un pixel, linéaire et une couleur grise **/}[/css]

Remarque: La propriété border peut aussi se couper en plusieurs propriétés (comme la propriété « Background »), on trouve : border-size (épaisseur), border-color (couleur), border-type (le type de la bordure).

Margin, Padding ou comment créer du vide…

Il existe deux autres propriétés très importantes permettant d’organiser les éléments dans votre page WEB :)

En fait, il s’agit de deux propriétés créées dans le but de marginaliser un élément, on va utiliser souvent le mot margin ou signifier marginaliser…

Le padding est un margin internet, le margin est un margin externe.

La différence c’est que, lorsque vous mettez un padding à un élément utilisant un arrière plan, la marginalisation va se créer dans l’intérieur de cet élément, donc c’est comme si vous créez une extension à l’arrière plan de l’élément. Que du BLA BLA :(

Voici un exemple pour mieux comprendre :) :

[css]div.bloc {padding:2px;margin:2px;background:#FF0000;}[/css]

Pour l’exemple en dessus, veuillez mettre du texte pour voir la différence, voici le code HTML pour tester :

[html]&lt;div&gt;/** Pour un test immédiat, vous pouvez utiliser l’attribut style="" **/QUE DU TEXTE POUR LE TEXTE DANS LE TEXTE&lt;/div&gt;[/html]

Si vous n’avez pas encore compris, je vous inquiétez pas ! Je suis là pour vous faire comprendre les choses !

Voici une image qui explique le tout :

G

Bien ! Je savais que vous pouvez le faire :)

Comment changer la position d’un élément :

Pour ne pas se perdre, on utilise parfois uniquement le positionnement pour placer les choses dans leurs places, sans s’y perdre.

Vous pouvez déterminer le positionnement d’une balise <div> par exemple en utilisant la propriété « position:; ». Voici dans des puces les divers types de positions avec leur éxpliquations :

  • absolute :
  • relative :
  • G

Pour la position « absolute », si vous la mettez pour un élément, vous devez définir le X et le Y que vous voulez définir à votre élément.

D’autres propriétés :

Float ou Flotter :

Cette propriété permet de flotter un élément, que ce soit un <div>, une image <img> ou un lien <a>.

On peut attribuer à cette propriété trois valeurs : right, left ou none.

Voici un exemple (pour placer une image à droit d’un texte) :

[css]

img.imagearticle {

float:right; /** Pour faire flotter l’image à droit **/

}

[/css]

Le code XHTML :

[html]

<p>

<img src="http://lien.ntld/versimage.jpg" alt="Image de l’article" class="imagearticle" />

Du texte, un article de easytutoriel, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte.

</p>

[/html]

Et n’oubliez pas, si vous voulez faire flotter deux images dans le même sens, vous devez les mettre dans un div avec des dimensions (width & height) bien définis, pour que l’une ne se place pas à côté de l’autre.

Styles pour les puces :

Comme vous le savez, les puces se créent en utilisant plusieurs balises… Les voicis : <ul>, <li>, <ol>

Voici un exemple XHTML d’une puce :

[html]

<ul id="puces">

<li><a href="#"> PUCE 2 </a></li>

<li><a href="#"> PUCE 2 </a></li>

</ul>

[/html]

On peut attribuer à ces puces toutes les autres propriétés (de texte, d’arrière plan,…). Cependant, il y a une propriété qui a pour but de changer le cercle qui se trouve à gauche de chaque puce.

Cette propriété s’appelle : list-style-type ou list-style-image.

Pour mettre un carré devant chaque puce, utilisez cette propriété « list-style-type:square; » ou  « list-style-type:upper-roman; » pour afficher de grands numéros romains ou bien  « list-style-type:lower-alpha; » pour afficher des petits numéros.

Voici un exemple de code CSS :

[css]

ul.puces
{
list-style-image: url(‘fleche.gif’); /** Ici l’image fleche se  trouve dans la racine du fichier CSS **/
}

[/css]

Vous pouvez même (pour mettre un arrière plan pour votre liste) utiliser la propriété « background:url…; » pour la balise <li>, comme dans l’exemple ci-dessous :

[css]

ul
{
list-style-type: none; /** Pour enlever le style par défaut, les cercles **/
padding: 0px; /** Ne créer aucun espace interne **/
margin: 0px; /** Enlever l’espace en dehors **/
}
li
{
background-image: url(fleche.gif);
background-repeat: no-repeat; /** Pour ne pas répéter l’arrière plan **/
background-position: 0px 4px; /** Pour placer l’arrière plan à gauche, d’une marginalisation de 4 pixels **/
padding-left: 14px; /** Marginalisation internet, dont je vous ai parlé… **/
}

[/css]

Comment faire pour mettre un style à un tableau ?

Maintenant, que vous savez manipuler plusieurs propriétés en CSS, ça sera facile de mettre en place un style pour un tableau !

Pour ceux qui n’ont pas lu le tutoriel qui parle de l’HTML, un tableau se constitue de lignes, colonnes et de cases en général…

On définit une ligne par la balise <tr>, une colonne par la balise <td> et un tableau par <table> :woot: (L’ordre est très important, <table> <tr><td></td></tr></table>)

Pour les tableaux, on va jouer souvent sur les bordures, il y en a plein de propriétés qu’on utilise pour le tableau. Les voicis :

  • border-collapse : Mettez la valeur « collapse » pour fusionner les deux bordures d’un tableaux, et « separate » pour les séparer.
  • border-style : Pour changer le style de la bordure.
  • border-width : Pour modifier l’épaisseur de la bordure.
  • border-color : Pour mettre de la couleur au bordures de la table.
Il existe même ces propriétés pour les colonnes <td> ou <th> du tableau, sauf les « border-spacing » et « border-collapse » qu’on utilise à leur places la fameuse « padding ».

Voici un exemple d’un style affecté sur un tableau pour savoir ce qu’on peut faire avec QUE du CSS :) :

Code XHTML :

[html]

<table class="easytutoriel">

<tr>

<td> EASY</td><td>TUT</td><td>ORIEL</td>

<td> .C</td><td>O</td><td>M</td>

</tr>

</table>

[/html]

Code CSS :

[css]

table.easytutoriel {
border-width: 1px;
border-spacing: 1px;
border-style: outset;
border-color: black;
border-collapse: collapse;
background-color: white;
}
table.easytutoriel th {
border-width: 1px;
padding: 3px;
border-style: solid;
border-color: gray;
background-color: white;
}
table.easytutoriel td {
border-width: 1px;
padding: 3px;
border-style: solid;
border-color: gray;
background-color: white;
}

[/css]

Le CSS pour les <input> (ou formulaires) :

Les Inputs, ce sont les zones de texte, les boutons ou les formulaires en général.

Pour modifier le style d’une zone de texte, vous pouvez changer les valeurs de la bordure, padding (margin interne), font-size (la taille du police), font-family (changer la police), color (la couleur), et background (pour l’arrière plan). Rien de spécial ! Car vous savez maintenant manipuler le CSS !

La même chose pour les boutons, vous pouvez créer des boutons dans le Photoshop, et les mettre sans beaucoup penser…

Nous allons parler de cela dans la suite de la série, d’ici là, je serai toujours là pour répondre à vos questions !

Conclusion :

Le CSS, c’est vaste, mais si vous avez lu dès le début jusqu’à la fin ce tutoriel, soyez sûr que vous pouvez suivre nos prochains tutoriels, car on va traiter tout les deux (moi et vous) une page basique, et nous allons voir de même comment faire une très bonne présentation de votre page d’accueil, avec un en-tête de votre goût, des menus et des blocs…

Bref, vous allez découvrir comment créer un design professionnel, sans utiliser que le Notepad et un logiciel de graphisme ! Comme moi :p

Et n’oubliez pas, qu’on a traité uniquement les bases du CSS dans ce petit tutoriel ! Il existe un monde plus merveilleux, qui s’appelle le CSS3 (dans une autre série).

Et voilà  :woot: !

Si vous avez remarqué des fautes dans ce tutoriel (cet article), n’hésitez pas à le poster juste en bas, même chose si vous avez des questions ou des encouragements,

C’est le WEB 2.0 !

Soufiane – Easytutoriel.com