Accueil | S'inscrire | Connexion

Site de SCIENCES PHYSIQUES

Mettre en place le CSS

 Où mettre du CSS ?

CSS signifie : "Cascading Style Sheets", ce qui peut se traduire en français par "Feuilles de style en cascade".

On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (à l'extension .css au lieu de .html). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc...

On peut écrire du code CSS à 3 endroits différents, selon ce qu'on préfère :

  • Méthode A : dans un fichier .css (le moyen le plus recommandé)
  • Méthode B : dans l'en-tête du fichier XHTML
  • Méthode C : dans les balises

Ici on ne traitera que de la méthode A car c'est la plus puissante. Pour le autres méthode voir le site du zero le tutoriel de Mateo21

Méthode A: le fichier CSS

Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.

Voici un exemple de fichier CSS sous Notepad++ :

⇒ Créer un fichier CSS vide pour le moment

Maintenant, retournez dans votre fichier XHTML. Il faut y ajouter une ligne entre les balises <head> </head> qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Exemple d'utilisation de CSS externe</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
       <p>Cette page comporte une feuille de style externe. 
          C'est la meilleure méthode à utiliser quand on fait du CSS.
       </p>
   </body>
</html>

 La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux pour le moment :

⇒ title : c'est le nom que vous donnez à votre feuille de style (mettez ce que vous voulez)
⇒ href : c'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif. Dans cet exemple le CSS se trouve dans le même dossier.

En résumé

Jusqu'ici on travaillait sur un seul fichier, le .html. A partir de maintenant on va travailler sur 2 fichiers : un .css et toujours notre bon vieux .html.

Résumons donc les fichiers que nous devons avoir sous les yeux pour que ça soit clair pour tout le monde :

⇒ Dans le dossier de votre site, il doit y avoir au moins 2 fichiers : un .html et un .css.

⇒ Le fichier .html contient le code XHTML (qu'on a appris jusqu'ici) avec en particulier la ligne pour faire la liaison avec le fichier .css :

⇒ Le fichier .css contient du code CSS (que nous allons apprendre à partir de maintenant) :

Si vous voulez voir le résultat, il faut ouvrir le fichier .html comme avant (double-cliquez sur l'icône du fichier index.html dans l'explorateur). N'essayez pas d'ouvrir le .css : seul, ce fichier ne sert à rien.
C'est le .html qui, lors de son ouverture, va charger le .css et appliquer les informations de style.

Appliquer un style à des balises

Dans un CSS, on trouve 3 éléments différents :

⇒ Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les titres <h1>, je dois écrire h1
⇒ Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte etc etc... Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par coeur (sauf s'il me prend une envie sadique de vous faire souffrir ^^ )
⇒ Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on veut etc etc...

Supposons par exemple que je veuille modifier tous mes paragraphes pour qu'ils soient écrits en bleu, avec une taille de 18 pixels.
Je sais que tous les textes de mes paragraphes sont entre des balises <p> </p>, je vais donc écrire le code CSS suivant :

p
{
   color: blue;
   font-size: 18px;
}

Cela signifie en français : "Je veux que tous mes paragraphes soient écrits en bleu avec une taille de 18 pixels."

⇒ Créer un fichier CSS qui mettre les paragraphe en rouge en taille 20px
⇒ Créer un fichier XHTML qui contient un paragraphe (donc les balise <p></p>) dont la mise en page est controlée par le fichier CSS
⇒ Tester quelques balises de structuration de texte: h1, h3, br  et strong (aller voir ici dans balises de structuration de texte) en mettant en forme un petit texte.
⇒ La balise <strong></strong> est différente des autres ( h1, h3, br), quelle est cette différence ?
⇒ Mettez en forme ce petit texte

 Bonjour et bienvenue sur mon site !
Ceci est mon premier test, alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment ça marche à l'aide des tutoriels du Site du Zér0.
Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !

 Les class et id

Les class

Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente ?

On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui fonctionnent sur toutes les balises :

⇒ L'attribut class
⇒ L'attribut id

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...

<h1 class=""> </h1>
<p class=""></p>
<img class="" />

Les class vous permettent de définir un style personnalisé.
Supposons que vous vouliez définir un style appelé "important" qui écrive le texte en rouge / 18 pixels. Vous rajouterez l'attribut class="important" à chacune des balises que vous voulez modifier.

Code XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
  xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Page d'exemple pour tester le CSS</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
   </head>
   <body>
       <h1>Découverte du CSS</h1>
       <p>
           Bonjour !<br />
           Je suis une page XHTML <em>apparemment</em> banale, 
           mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> 
           pour les tutoriels du <a href="http://www.siteduzero.com">Site du Zér0</a>
       </p>
       <h2>Ce n'est que du blabla</h2>
       <p>
           Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : 
           <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
           J'aime la choucroute en conserve.<br />
           Vive les frites !
       </p>
       <p class="important">
           Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, 
           c'est pour tester notre fichier .css rhalala ;o)
       </p>
   </body>
</html>

 Comment faire à partir de là pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class "important" soient écrits en rouge / 18 pixels" ?
C'est très simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), vous devez écrire un point suivi du nom de la class, comme par exemple :
.important

Ce qui nous donnerait le CSS suivant :

Code CSS

.important
{
   color: red;
   font-size: 18px;
}

⇒ Prendre un petit texte et mettre des parties du texte en class "important"
⇒ Créer une class ecrire_petit et l'appliquer sur une partir du texte.

Les id

Lui, il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois.
Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises.

En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page, comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />

Dans le CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dièse (#) :

Code CSS

#logo
{
   /* Mettez les propriétés CSS ici */
}

Personnellement j'utilise des id pour délimiter des zones sur la page XHTML

Les balises universelles (qui servent à rien )

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id mais c'est plus rare) à certains mots qui ne sont pas entourés par des balises.
En effet, le problème des class c'est qu'il s'agit d'un attribut, vous ne pouvez donc en mettre que sur une balise.

Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le paragraphe suivant :

Code XHTML

<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>

Ca serait facile à faire s'il y avait une balise autour de "Neil Armstrong", malheureusement il n'y en a pas. Heureusement, on a inventé la balise-qui-sert-à-rien :D
En fait, on a inventé 2 balises qui ne servent à rien, avec une petite (mais importante !) différence entre les deux :

⇒ <span> </span> : c'est une balise de type inline. Vous vous souvenez ce qu'est une balise inline ? C'est une balise qui se met à l'intérieur d'un paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer Neil Armstrong.

⇒ <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. C'est une balise très très utilisée pour faire un design.

code XHTML

<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>

Code CSS

.nom
{
   color: blue;
}

 Exemple: création d'un cadre à gauche

Les marges

Tous les blocks possèdent des marges. Ce qui est important, c'est de savoir qu'il existe 2 types de marges :

Les marges intérieures (margin)
Les marges extérieures (padding)

 

Pour plus de détails aller ici sur le site du zéro

Passons à la pratique

On va creér un cadre dans la page essai1.php qui servira à mettre des liens pour la navigation

  • Il sera coller à gauche de la page avec un espace de 0 px (pixels)
  • Le cadre aurra pour largeur: 156 px (pixels)
  • Le cadre se matérialisé sur la page par un trait de 1px de largeur

Comme il s'agit de construire un cadre on va utiliser un id

Code CSS:

#cadre_gauche
{  float: left; /* Le menu flottera à gauche */
   width: 156px; /* largeur du cadre */
   padding:0; /*marge intérieure*/
   margin:0; /*les autres marges extérieure valent 0px*/
   margin-left:0px;/*le cadre est espacé de 0 px du bord gauche de l'écran*/
   margin-top:0px;/*le cadre est espacé de 0 px du bord supérieu de l'écran ou d'un autre cadre*/
   border:solid 1px red; /*trait plein de 1px qui entoure le cadre*/
}

Code XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Exemple d'utilisation de CSS externe</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
          <div id="cadre_gauche">
             <p>C'est le cadre de gauche </p>
          </div>
   </body>
</html>

 

Mais pourquoi le cadre en rouge n'est pas coller en haut de la page et sur le bord gauche ?

Il faut tenir compte de la balise <body></body> (regardez le code XHTML), en effet la balise body englobe toutes les autres et par défaut la balise body à une marge de quelques pixels

 

Regardez je vous montrer la balise body en vert et en rouge le cadre de gauche, la marge du cadre de gauche est bien de 0 px

Alors comment faire pour que la balise body touche les bord de l'écran ?

Il a plusieurs solutions, la plus simple est d'ajouter dans le CSS:

body
{ margin:auto;
}

La marge de la balise body est devenu nul, donc le cadre vert touche les bords de l'écran

Donc finalement le code CSS devient:

#cadre_gauche
{  float: left; /* Le menu flottera à gauche */
   width: 156px; /* largeur du cadre */
   padding:0; /*marge intérieure*/
   margin:0; /*les autres marges extérieure valent 0px*/
   margin-left:0px;/*le cadre est espacé de 0 px du bord gauche de l'écran*/
   margin-top:0px;/*le cadre est espacé de 0 px du bord supérieu de l'écran ou d'un autre cadre*/
   border:solid 1px red; /*trait plein de 1px qui entoure le cadre*/
}

body
{margin:auto;
}

  

 

Voice le résultat

Bon c'est pas très beau un cadre coller au bord de l'écran, alors je propose de mettre 10 px en le bord gauche et le cadre de gauche (en rouge)

Vous devrier obtenir quelque chose comme ça:

⇒ Supprimer le cadre vert (mais pas la balise body car ell est oblogatoire)
⇒ Le cadre de gauche pourra servir à mettre des liens, entrainer vous à mettre des liens vers une uatre page que vous avez crée ou vers vos sites internet préférés
⇒ Modifer le fichier CSS pour que le cadre de gauche ait une hauteur de 500px

Pour vous aider aller ici: le site du zéro 

C'est le début d'un menu avec des liens vers d'autres pages

 ⇒ Créer une page avec un cadre bleu(2 points) touchant le bord supérieur de l'écran(2 points), sa hauteur sera de 174 px (2 points), sa largeur MINIMALE de 626px (2 points)
⇒ Ajouter de un cadre rouge à gauche large de 156 px (2 points), espacé de 10 px avec le bord gauche de l'écran (2 points)

Je vous montre ce que je veux pour 12 points

 

⇒ Créer un cadre au centre de largeur minimal 750 px (2points)en position absolue (le coin droite-haut à 177px du haut de l'éran et à 180 px de la gauche de l'écran)(2points) (site du zero)
⇒ Créer un cadre au centre matérialisé par une ligne verte de largeur 3px (2points)

Voila ce que je veux pour 18 points

Pour avoir 20 /20

⇒ Mettre une  couleur de fond dans chaque cadre (site du zero)
⇒ Mettre en forme un petit texte
⇒ Parcourrez le site du zero pour vous aider

Créé le lundi 14 septembre 2009
Modifié le dimanche 25 octobre 2009 par Jérôme BORDAIS (professeur)