Le CSS, comment le mettre en place ? Comment ça marche ? (mon site, pas à pas)
Votes : environ (100%) 1 vote

Comme je vous ai dit dans le dernier cours de l’HTML, le CSS est un élément indispensable pour organiser sa page web, le CSS, ce n’est pas seulement du style…

Le CSS va vous permettra de modifier le style des centaines de pages en changeant un seul code !

Car, normalement, si on utilise plus de CSS et qu’on veut modifier la couleur du titre des pages (<h1> par exemple), il faut aller ajouter l’attribut (color= » ») dans tous les pages, ce qui n’est pas bon pour la santé :)

N’oubliez pas que le CSS est beaucoup plus facile que l’HTML, et que vous n’êtes pas obligé à apprendre tout ce que vous avez dans ce cours d’aujourd’hui, il ne vous faut que les bases !

En faite, moi-même, j’oublie quelques fois des trucs, et je reviens à ma base de donnée pour repérer le bon code… Nous sommes des êtres humains :)

Bien ! Nous allons commencer dans en début de ce cours des différents façons d’intégrer le CSS dans vos pages, il y en a 3 !

Et dans quel emplacement ça s’écrit le CSS ?

Comme je vous l’ai dit tout-à-l’heure, il existe déjà 3 méthodes pour écrire du CSS. Les voicis :

  • Mettre le CSS dans un fichier (ou des fichiers) « .CSS » (Très recommandé)
  • Mettre le CSS dans la balise <head> (Non recommandé)
  • Le mettre au sein de l’HTML, en utilisant l’attribut style= » » (Vraiment pas recommandé)

Donc comme vous l’avez vu, la méthode que chacun de nous doit utiliser, c’est la première, l’explication est juste en bas :)

Pourquoi utiliser un fichier .CSS ?

Si vous utilisez un seul fichier pour gérer votre code CSS, c’est que vous êtes un professionnel !

Et oui !! Pourquoi allons-nous écrire du CSS dans chacune des pages HTML tant qu’on a la possibilité d’écrire un seul fichier et le relier à tous les pages ?

Un fichier va vous permettre avant tous… de gagner du temps ! et de modifier le thème de votre site web entièrement en utilisant uniquement un seul fichier .css !

Voyons comment ça marche tout de suite :)

Créez deux fichiers en utilisant votre éditeur Notepad++ dont je vous ai parlé dans le premier article de cette série.

Nommez le premier : Index.htm et le deuxième : Style.css

Voici à quoi ceci ressemble :

Collez ce code dans votre premier fichier (Index.htm) :

[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » dir= »ltr » lang= »fr-FR »>

<head>
<meta name= »google-site-verification » content= »jM3wSjodDwL_MpPjnnNOgvrxlEvM-0DLByXjB0r1Rx8″ />
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<link type= »text/css » rel= »stylesheet » href= »Style.css » />
<title>Pas à pas</title>
<head>
<body>
<p>J’ai parti à la maison pour manger du Couscous !</p>
</body>
</html>
[/html]

Et ce code dans le fichier de style, Style.css :

[css]

p
{
color:blue;
}

[/css]

Je vais parler en détail dans ce qui suit sur les class, les Ids et comment peut-on définir un élément en HTML dans le fichier CSS.

En effet, ce fameux fichier CSS permet l’accélération du chargement de vos pages web !

Car comme vous le savez, un navigateur Internet crée pour chaque page web visitée un dossier de cache, contenant les fichiers CSS, Flash et parfois Images… Nous allons voir tout cela sur Easytutoriel.com :)

Mettre le CSS dans la balise <head>, comment ?

En faite, si vous pouvez même mettre le code CSS à l’intérieur de la balise <head>, dans la balise <style>.

Cela permet d’effectuer les changements en temps réel, mais ce n’est pas recommandé, cela alourdi et rend lent le chargement de vos pages web.

Voici à quoi ressemble du CSS dans l’en-tête <head> d’une page HTML :

[html]
<pre><!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » dir= »ltr » lang= »fr-FR »>

<head>
<meta name= »google-site-verification » content= »jM3wSjodDwL_MpPjnnNOgvrxlEvM-0DLByXjB0r1Rx8″ />
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<style type= »text/css »>
p{color:blue}
</style>
<title>Pas à pas</title>
<head>
<body>
<p>J’ai parti à la maison pour manger du Couscous !</p>
</body>
</html>
<span class= »Apple-style-span » style= »font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: 13px; line-height: 19px; white-space: normal; »>[/html]

Testez ! Vous allez avoir le même résultat que le code en haut ;)

Mettre le CSS dans les balises directement…

Comme je vous l’ai annoncé en début, ce n’est pas recommandé, mais cela peut vous aider à voir les changements effectués directement et en temps réel sans passer par un fichier CSS.

Pour attribuer le CSS à une balise directement, vous pouvez utiliser l’attribut style= »VOTRE CODE CSS ICI ».

Voici à quoi cela ressemble cher ami(e) :

[html]
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » dir= »ltr » lang= »fr-FR »>

<head>
<meta name= »google-site-verification » content= »jM3wSjodDwL_MpPjnnNOgvrxlEvM-0DLByXjB0r1Rx8″ />
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<title>Pas à pas</title>
<head>
<body>
<p style= »color:blue »>J’ai parti à la maison pour manger du Couscous !</p>
</body>
</html>
[/html]

Dans ce cas, la balise ayant l’attribut style= »color:blue » seule qui aura la couleur bleu dans son texte, même si on met d’autres balises <p>, cela n’effectuera aucun changement tant que seule la balise ayant l’attribut style… qui utilise le code CSS !

Passons au sein du CSS !

Bien ! Maintenant que vous savez que la méthode la plus pratique est celle qui insiste à utiliser un fichier pour gérer tous les style (ou le style) de vos pages en utilisant un seul fichier, pas la peine à répéter !

C’est la méthode que nous allons utiliser durant toute la suite de cette série, même si cette méthode est un peu plus compliquée que les autres méthodes, mais tenez bien que c’est la méthode qu’utilisent les professionnels.

Maintenant, parlons des petits détails, et comment marche le CSS !

La structure d’un code CSS :

Je vais parler maintenant que des bases du CSS, dans le cours suivant, je vais parler du tout et du rien :p !

Commençons par les sélecteurs qui donne à chaque élément son nom dans le code CSS…

Il existe jusqu’à l’instant deux types de sélecteurs, ID et CLASS.

L’ID dans l’HTML s’utilise comme attribut, dans une balise quelconque :

[html] <balise id= »nom-de-id »> </balise>[/html]

Et dans le code CSS, on ne le lit pas ID, mais souvent en utilisant un dièse avant le nom de l’ID, comme ce qui suit :

[css] #nom-de-id {

/** VOTRE CODE CSS CORRESPONDANT A L’ELEMENT nom-de-id ICI **/

}[/css]

Le CLASS se définit de la même façon q’un ID, la différence c’est seulement dans le fichier CSS…

Dans un fichier HTML, on définit le CLASS en utilisant l’attribut class, comme dans cet exemple :

[html] <balise class= »nom-du-class »>  </balise> [/html]

Au contraire à l’ID, on utilise un point pour dire qu’il s’agit d’un CLASS, et non pas un dièse, voir ci-dessous :

[css] .nom-du-class {

/** VOTRE CODE CSS CORRESPONDANT A L’ELEMENT nom-du-class ICI **/

} [/css]

Certains vont me dire : « Mais quelle est la différence entre l’ID et le CLASS ? ».

Franchement, les deux ont le même rôle, mais l’ID est plus fort qu’un CLASS, comment ?

Quand vous voulez qu’un utilisateur passe à une partie dans le texte, on utilise l’ID pour identifier cet emplacement, donc, l’ID doit être unique dans une page, et ne doit plus être répété pour plusieurs éléments dans une page !

Cliquez ICI pour mettre un commentaire (par exemple, j’ai utilisé un lien de type <a href= »#NOM-DE-ID »> text </a>)

Pour le CLASS, vous pouvez l’utiliser librement ! Mettre un CLASS pour plusieurs éléments, ça ne pose pas de problèmes, si vous savez pourquoi vous le faites :)

Des exemples de sites utilisant le CSS…

L’exemple est devant vous ! Il suffit de lire un peu le code source !

Voici une partie du code source de cette page et un morceau d’un fichier CSS, pour vous inspirer et pour vous préparer psychologiquement au monde du CSS, car on est qu’en début de l’aventure, accrochez-vous !

Exemple d’un début d’une page XHTML déclarent les fichiers CSS :

[html]

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » dir= »ltr » lang= »fr-FR »>

<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />

<title>Easytutoriel.com</title>

<link rel= »stylesheet » href= »http://www.easytutoriel.com/wp-content/themes/easytutorielv4/style.css » type= »text/css » media= »screen » />
</head>
<body>
</body>
</html>
[/html]

Et un morceau d’un fichier CSS :

[css]
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0}ul{list-style:none}a img{border:none}.clear{clear:both}body{background:url(images/bg.gif) #e8e8e8;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000;margin:0;padding:0}#page{width:100%;margin:0 auto}#menu{width:100%;height:44px}#mainmenu{float:right;padding:10px 0 0}#mainmenu ul{list-style-type:none;z-index:1000;margin:0;padding:0}#mainmenu ul li{position:relative;display:inline;float:left;z-index:1000;color:#fff;font-family: »Trebuchet MS »,Arial,Helvetica,sans-serif;text-transform:uppercase;font-size:13px;font-weight:700;padding:0 0 0 16px}#mainmenu ul li.first{background:none;padding:0}#mainmenu ul li a{display:block;color:#fff;z-index:1000;height:20px;padding:5px 10px 0}* html #mainmenu ul li a{display:inline-block;float:left}* html #mainmenu ul li ul li a{float:none}#mainmenu ul li a:hover,#mainmenu .current_page_item a,#mainmenu .select a{color:#fff;background:#9d0d12;text-decoration:none}
[/css]

Ce n’est pas pour vous faire peur, juste pour voir à quoi ressemble un code CSS…

Conclusion :

Bravo ! Vous savez maintenant comme ça marche le CSS ! Dans la suite, nous allons traiter ensemble les autres détails du CSS, sans oublier de parler de comment faire pour changer le font d’un texte, l’arrière plan d’une page, les bordures…

Bref, tout !

Comme je vous ai dit dans le premier article de cette série de tutoriels, le CSS c’est le coeur, et c’est celui qui rend une page vivante, attractive et attirante !

Le CSS permet de changer carrément un style d’une page sans passer par l’HTML :)

Soufiane – Easytutoriel.com