css pas a pas1

Le CSS, comment le mettre en place ? Comment ça marche ? (mon site, pas à pas)

Publié par | Catégories : Création de sites - Trucs et astuces

Dernière mise à jour : 30 septembre 2016

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 :

index css

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


L'auteur :

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Déjà 18 commentaires ! { Ajouter le vôtre ? }

  • alain dit :

    bonjour
    j'essaie de suivre ton tuto ( très bien expliqué) et j'essaie de le mettre en application dans un site créé avec "Google site" mais je n'y arrive pas . Je ne sais pas ou il faut mettre le fichier.css. Si quelqu'un peut m'aider merci d'avance

    • Soufiane Sabiri dit :

      Bonjour Alain,

      Je vous invite à lire cette page : https://support.google.com/sites/answer/2500646?hl=fr

      Google Site est "complètement différent" et va limiter vos personnalisations, il faut donc suivre la démarche faite par eux pour pouvoir insérer vos codes CSS.

      Bien amicalement,
      Soufiane

  • oscarmike01 dit :

    tres cher soufiane je vous suis tres reconnaissant pour votre cours hieren's
    je suis un debutant en informatique et votre aide me sera tres utile
    je vous contcterais prochainement et merci mille fois

  • Rodney Gochnauer dit :

    Many thanks for creating the effort to discuss this, I feel strongly about this and enjoy learning a great deal more on this subject. If feasible, as you gain knowledge, would you mind updating your weblog with a great deal more details? It’s very beneficial for me.

  • chaudamort dit :

    en fait soufiane je voudrait créer un formulaire qui demandera a l'utilisateur d'inserer un objet (scan du passeport par example).
    merci

  • chaudamort dit :

    bonsoir soufiane,
    j'aimerai savoir qu'elle est la balise (html ou php) que je peut utiliser dans un formulaire pour demander à un utilisateur d'entrer une photo par example ou un document.
    Merci

    • Soufiane Sabiri dit :

      Bonjour Chaudamort,

      C'est vague :) Au lieu de me poser cette question, dites moi ce que vous voulez faire exactement ! Est-ce-que vous voulez créer un formulaire de contact à une zone pour envoyer un fichier ? c'est ça ?

  • Amarr dit :

    ok tien moi au jus ^^

  • Amarr dit :

    merci encore Soufiane, l’utilité d'un serveur est nécessaire ile me semble non ? pour qu'il puisse y stocker les données de ceux qui s’enregistre ?

  • Amarr dit :

    Merci Soufiane ta trop la classe, par contre j'ai un petit service à te demander ( je sait j'abuse :wink: ) mais mon association ma demander si je pouvais leur créer un truc du genre sa :

    un script "simple" dans une page web, jexpose le problème :

    - le surfeur ouvre la page web et la la page lui demande un nom et prénom ;
    - ensuite lui demande de choisir entre 2 dates ( le 7 février et le 24 février ) ;
    - ensuite il reçoit une confirmation que c'est bien noté ;
    - et enfin sur une autre page web, je pourrais avoir la liste des personnes qui se sont enregistrer

    est ce possible ? :whistle:

    j'ai commencer à lire un peu les cours sur javascript et php mais je n'arrive pas encore à maitriser ce truc la, mais libre à toi de m'aider, je n'en tend voudrait pas si tu n'a pas envie ;), tu ma déjà trop aider et je sait que sa fait beaucoup mais je tente le coup on sait jamais :)

    • Soufiane Sabiri dit :

      Bonjour Amarr,

      Merci pour la demande, c'est facile de réaliser ceci de nos jours !

      Si on réfléchi un peu, on peut trouver des idées innovantes, et qui ne coûtent presque rien ! Voici un astuce pour réaliser cela :
      Obtenez un hébergement, un nom de domaine, installez WordPress, installez le plugin "Contact7", créez un formulaire avec les métas nécéssaires (menu déroulant, zone texte et tout cela), créez une page, insérez le code du formulaire, mettez la page comme page d'accueil ! Vous pouvez ensuite modifier le bouton "envoyer" en "s'inscrire à tatata"...

      Voilà, c'est un astuce qui peut servir !
      Passez une excellente journée Amarr,
      Soufiane

  • Amarr dit :

    Bonjour Soufiane, je suis actuellement en train de créer un site mais j'ai une manip que je n'arrive pas à faire, donc je m'explique : j'ai fait une balise audio avec un son, jusque la tout fonctionne, mais la balise apparait en haut à gauche et j'aurai aimé qu'elle apparaisse en haut au centre, comment puis-je faire ?

    • Soufiane Sabiri dit :

      Bonsoir Amarr,

      Pour centrer un élement quelconque dans une page web, vous pouvez utiliser tout simplement la balise

      , ou bien utiliser la propriété CSS "align:center;" pour une balise

      ...

      Merci pour votre question :)
      Bien amicalement,
      Soufiane

  • Asmâa dit :

    Merci beaucoup... et Bravo !
    Vraiment très bien expliqué... rien à dire...
    J'ai vu beaucoup de sites de tutoriels... mais celui-ci...
    bref: Vivent les marrocains... du monde entier

    • Soufiane Sabiri dit :

      Bonjour Asmâa,
      Soyez le bienvenue, et merci pour votre commentaire ! ça m'encourage !
      Si vous avez des questions, s'il vous plaît, n'hésitez pas !
      Amicalement,
      Soufiane

  • anonyme dit :

    Merci énormément...je viens de débuter une petite autoformation en CSS et votre article m'est d'une grande aide.

    • Soufiane Sabiri dit :

      Bonjour Hanane,
      Dans l'article qui suit, je vais parler de l'intérieur du CSS :)
      Cela me rebooste, le fait de lire des commentaires des gens ayant trouvé de l'aide dans un tel article que j'ai écrit !
      Soyez le bienvenue, si vous avez trouvé quelques difficultés, n'hésitez pas à poster des commentaires :)
      Amicalement,
      Soufiane

  • Publier un commentaire :

    xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)