webmaster

<

webmaster

Apprendre Le Html 5 Et Le Css 3

Mise en forme avec le CSS

Maintenant que nous connaissons les bases du HTML, il est temps pour nous d’aborder la mise en forme avec le CSS avant de revenir sur les concepts avancés en HTML.
CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML. Vous vous souvenez de son rôle ? Gérer la mise en forme de votre site.
Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait quatre versions importantes de CSS :

  • CSS 1 ;
  • CSS 2.0 ;
  • CSS 2.1 ;
  • CSS 3

Dans ce cours, nous allons utiliser la version la plus récente du CSS qui est le CSS3.
Le code CSS étant lié au code HTML, on peut l’écrire dans trois endroits différents :

  • Dans un fichier .css (méthode la plus recommandée) ;
  • Dans l'en-tête du fichier HTML ;
  • Directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée)
  • Ou mettre mon code CSS
    • Les CSS dans un fichier .CSS (recommandé>

Comme je viens de vous le dire, on écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique dans toute la suite de ce cours.
Code HTML :

img1

Vous noterez le contenu de la ligne 5,

: c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme.
Enregistrez ce fichier sous le nom que vous voulez (par exemple page.html). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.
Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Notepad++) et copiez-y ce bout de code CSS. (Rassurez-vous, je vous expliquerai un peu plus bas ce qu'il veut dire) :
img2

Enregistrer le fichier .css sous le nom ‘‘style.css’’.
img3
Fichier html et css dans l’éditeur Notepad++

Lorsque vous ouvrez le fichier HTML, on a le résultat suivant :

img4

    • Le css dans l’entête du fichier HTML

Ici, il suffit de mettre tout le code CSS dans la balise

 

<style> à l’entête (la balise <head>) du fichier html.
Voici comment on fait pour obtenir le même résultat que précédemment avec un seul fichier

img1

    • Directement dans les balises (nom recommandé)

Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut. Mais cette fois, seul la balise contenant l’attribut style sera coloré.

img2On obtient le résultat suivant dans le navigateur :
img3
N.B : Il est recommandé fortement de prendre l'habitude de travailler avec la première méthode parce que c'est celle utilisée par la majorité des webmasters… Pourquoi ?
Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un. Ainsi avoir un fichier .css externe facile la mise en forme de plusieurs pages web au même. Elle facilite aussi sa maintenance.

  • Appliquer un style css

2.1. Appliquer à une balise
Sois le code suivant :
img4Dans un code CSS comme celui-ci, on trouve trois é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 paragraphes <p>, je dois écrire p.
  • 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.
  • Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à ceci :

img5

. Appliquons le style à plusieurs balises
Cette façon de coder permet d’éviter la duplication du code et de gagner en temps.
Supposons le code CSS suivant :
img6Il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule, comme ceci
img7
2.3. Appliquer un style à certaine balise : classe et id
Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu).
Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai présenté un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).
Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :

  • L’attribut class ;
  • L’attribut id.

Ces deux attributs sont presque identiques à la différence près que :

  • L’attribut class : fait référence à un groupe d’attribut possédant la même valeur.
  • L’attribut id : ne peut contenir la même valeur sur deux balises différentes.

Illustration :
La syntaxe est bonne : la classe toto contient le groupe de balise « h1, p, img »
img8
La syntaxe n’est pas bonne car la balise h1 et p possède la même valeur pour l’attribut id
img9 
Si vous utilisez des class, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de la class par un dièse (.) :
img10

 

Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :

img11

 

2.4. Les sélecteurs en CSS
En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà utilisé quelques-uns un peu plus tôt.
Commençons par ceux déjà utilisés.
img12

 

… signifie « Je veux toucher tous les paragraphes ». Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu, par exemple)
img13

 

… qui signifie « Tous les titres et tous les textes importants ». Nous avons sélectionné deux balises d'un coup.
Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom grâce aux attributs class et id :

 

img14

Il existe des centaines de sélecteurs en CSS nous allons essayer ici de donner l’essentiel.

  • Les sélecteurs avancés
  • * : sélecteur universel

img15
Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel

  • A B : une balise contenue dans une autre

img16Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises.
Exemple de code HTML correspondant :
img17

  • A + B : une balise qui en suit une autre

img18Sélectionne la première balise <p> située après un titre <h3>.

Exemple
img19

  • A[attribut] : une balise qui possède un attribut

img20
Sélectionne tous les liens <a> qui possèdent un attribut title.
Exemple
img21

  • A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

img22
Idem, mais l'attribut doit en plus avoir exactement pour valeur « clic ».
Exemple :
img23

  • A[attribut *="Valeur"] : une balise, un attribut et une valeur

img24

Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
img25
Il existe d’autre sélecteur. Si vous voulez une liste complète, rendez-vous sur le site du W3C : http://www.w3.org

par David Matjaba
Back Next