CSS (Cascading Style Sheets), c’est un autre langage qui vient compléter le HTML.

– Mais à quoi ça sert le CSS ?

C’est lui qui vous permet de :

  • choisir la couleur de votre texte,
  • sélectionner la police utilisée sur votre site,
  • définir la taille du texte, les bordures, le fond…
  • faire la mise en page de votre site :  Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l’en-tête de mon site soit calé en haut et qu’il soit toujours visible, etc.

Comparons 2 pages identiques, la première sans CSS et la seconde avec CSS :

–

– Où écrit-on du code CSS ?

Au choix :

  • dans un fichier .css (méthode la plus recommandée)
  • dans l’en-tête <head> du fichier HTML
  • directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).

Nous ne verrons que la méthode permettant d’écrire du code CSS dans un fichier .css

–

– C’est parti pour le premier fichier CSS !
  • Dans Sublime Text, créez un nouveau fichier que vous sauvegarderez sous le nom style.css dans le même répertoire que votre fichier page1.html
  • Ajoutez le code suivant dans votre page :

    –
  • Maintenant, il faut indiquer à votre fichier html qu’il doit aller voir ce fichier css pour la mise en page.
    Cela s’effectue simplement, en ajoutant cette ligne dans la balise <head> </head> du fichier page1.html :
  • Sauvegardez le tout et ouvrez le fichier page1.html dans un navigateur :
    Les 2 paragraphes doivent s’afficher en bleu 🙂

–

– Les différentes possibilités du CSS :

Schématiquement, une page CSS ressemble à ça :

–

Dans le code du fichier style.css que vous avez tapé :

  • p : correspond à la balise <p> </p> qui indique un paragraphe
  • color: blue; : spécifie la couleur de cette balise
Exercice 1 :
  • Modifiez le fichier style.css pour que les paragraphes s’affichent en noir et pour ce soit le titre de la page qui s’affiche en bleu.

—

Exercice 2 :
  • Dans un des paragraphes du fichier page1.html, vous allez mettre un mot entre les balises <em> et </em>
  • Par exemple : Ceci est une <em>information importante</em> de mon texte.
  • modifiez le fichier style.css pour que les mots ‘information importante‘ s’affiche en rouge (le reste du paragraphe reste en noir)

–

– Oui mais… Comment faire pour avoir des paragraphes avec des styles différents ?
  • A partir du moment où on utilise la balise p dans le fichier css, tous les paragraphes qui sont dans la balise <p> </p> auront la même mise en page.
    –
  • Pour éviter ceci, on peut créer des class
    –
  • Reprenez votre fichier page1.html, et modifiez-le comme ceci, en ajoutant une class que nous appellerons introduction :

    –
  • Maintenant, dans le fichier style.css, il suffit d’indiquer la mise en page de la class qui s’appelle introduction :

    –
  • Si vous ouvrez le fichier page1.html dans un navigateur, seul le 1er paragraphe sera affiché en bleu.
    –
  • Si vous souhaitez une autre mise en page pour le second paragraphe, il suffit de lui affecter un autre nom de class
    (par exemple : class= »developpement »)

–

– Les principales propriétés utilisables dans un fichier CSS :
  • Pour le moment, nous n’avons utilisé que la propriété color
    –
  • Voici ici d’autres propriétés utilisables.
    Le principe est toujours le même, on commence par la propriété, suivie de :, puis la valeur et on termine la ligne avec ;
    Par exemple :

–

Exercice 3 :
  • Jonglez avec les propriétés CSS pour mettre en page votre fichier page1.html.
  • Faites valider votre travail pour passer à l’étape suivante !

Pour les couleurs, voici la liste de celles qui sont utilisables en tapant directement leur nom dans la valeur :