• Support de formation 2018-2019
Web & webmarketing
burger menu

Cours n°3.

  1. Support de cours PUB/MMI/ECV
  2. Intégration web M1205 2015 2016
  3. Cours & TP du semestre 1
  4. Cours n°3

Cours n°3 : principes des CSS

Rappels

Il y a trois façons principales d'appliquer des styles CSS :

  1. Dans le corps du code (X)HTML ;
  2. Dans l'en-tête de la page ;
  3. Dans une feuille de style totalement séparée du code (X)HTML.

Les CSS dans le corps du code (à utiliser avec modération)

Vous pouvez définir des styles CSS directement dans la définition d'une balise HTML. Dans l'exemple ci-dessous, nous utilisons une balise <div> qui permet de définir une "boîte" à l'intérieur d'un contenu :

Exemple de code
 
  <div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;">    Cette balise div a du style !  </div>

Ce qui donne : 
Image non disponible

Elle ne présente un intérêt que lorsque vous êtes certain que le style défini ne sera utilisé à aucun autre endroit ni sur aucune autre de vos pages.

Les CSS dans l'en-tête de la page

Plutôt que par la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (on utilise normalement la section <head>).

 
 
  <head>    <style type="text/css">      div       {        background-color:#339;        color:#fff;        padding:15px;        border-bottom:5px solid red;        margin-bottom:15px;      }    </style>  </head>     <body>    <div>      Cette phrase est présentée en fonction du style défini dans l'en-tête    </div>    <div>      Cette phrase aussi, est pourtant le style n'a été défini qu'une fois !    </div>  </body>

Ce qui donne : 
Image non disponible

Grâce à cette nouvelle façon de procéder, vous n'avez besoin de définir votre style qu'une seule fois. Dans notre exemple, le style défini s'appliquera automatiquement à toutes les balises <div> de la page.

Avec cette méthode, vous pouvez appliquer le même style plusieurs fois dans la même page, mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation de vos pages, vous devrez utiliser la troisième méthode.

Les CSS dans une feuille de style totalement séparée du code (X)HTML

La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages (X)HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.

Un autre intérêt de cette méthode est de pouvoir définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.

Une page (X)HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles.

Voici un exemple de styles définis dans un document séparé :

Document 'mes-styles.css'
 
  body   {    background-color:#ccf;    letter-spacing:.1em;  }     p   {    font-style:italic;    font-family:times,serif;  }
Document 'ma-page.html'
 
  <head>    <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />  </head>     <body>    <p>Voici un exemple de paragraphe.</p>    <p>Et voici un deuxième paragraphe.</p>  </body>

Et voici le résultat : 
Image non disponible

Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini qu'une seule fois mais peut être utilisé plusieurs fois. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la mention <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" /> dans ces pages pour que notre feuille de style s'y applique.

Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence.

La méthode "<link href=..." permet également de mettre en place plusieurs feuilles de styles destinées aux différents medias (imprimante, navigateurs de PDA, etc.).

Vous pouvez en effet souhaiter mettre en place une présentation particulière (sans les menus, par exemple) destinée à l'impression de vos documents. Voici une liste des valeurs les plus couramment utilisées pour link :

<link href="general.css" rel="stylesheet" type="text/css" media="all"> Remplacez general.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style commune à tous les medias.
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen, projection"> Remplacez ecran.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux écrans.
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"> Remplacez mobile.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux PDA et téléphones mobiles.
<link href="impression.css" rel="stylesheet" type="text/css" media="print"> Remplacez impression.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux imprimantes.

Note : Le site blog-and-blues pourra vous apporter des détails sur ces sélecteurs de media.

Pour clore ce chapitre, précisons enfin que la déclaration "<link href=..." n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :

Cette définition de style est à placer dans la section <head> de votre page.
 
  <style type="text/css">    @import url(styles.css) all;  </style>

Vous devrez remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer "all" par le type de média auquel se destine votre feuille de style.

Avantages des feuilles de styles séparées

Il y a de multiples avantages à séparer les feuilles de styles du contenu.

Citons en particulier :
  1. La réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois ;
  2. La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation ;
  3. Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site ;
  4. Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID, etc.). Vous pourrez travailler votre mise en page et votre design plus tard.

1. Contexte : rendu par défaut des éléments HTML

Les documents web sont globalement régis par deux normes de langages : la norme (X)HTML et la norme CSS.

  • Le langage HTML définit la structure du document à l'aide d'éléments (les balises) porteurs de sens.
  • Le langage CSS apporte le rendu (visuel, auditif, imprimé, ...) sur les différents supports (écran, plage braille, imprimante,...).

Les deux entités sont donc complémentaires mais dissociées : la première apporte le sens (la sémantique); la seconde ajoute du rendu d'affichage.

Cependant, même lorsqu'aucun style CSS n'est défini, chaque élément hérite d'un affichage par défaut (rendu initial) qui peut être légèrement différent d'un navigateur à un autre.

Selon le W3C, les éléments HTML sont regroupés dans différentes entités (%flow, %block, %inline, %headings, %lists, ...) et deux types de rendus d'affichage globaux : les éléments de niveau bloc et les éléments en-ligne.

1.1. Éléments de niveau bloc et éléments en-ligne

Les notions de « niveau bloc » et « en-ligne » dans les spécifications sont définies ainsi :

  • Certains éléments HTML, qui peuvent apparaître dans l'élément BODY, sont dits être de niveau « bloc » [ndt. block-level] tandis que d'autres sont dits de niveau « en-ligne » [ndt. inline] (aussi connu comme sous le nom « niveau texte »). La distinction se fonde sur plusieurs notions :
  • Le modèle de contenu
    • De manière générale, les éléments de bloc peuvent contenir des éléments en-ligne et d'autres éléments de bloc. Et de manière générale, les éléments en-ligne ne peuvent contenir que des données et d'autres éléments en-ligne. L'idée inhérente à cette distinction structurelle, c'est que les éléments de bloc créent des structures « plus grandes » que les éléments en-ligne
  • Le formatage
    • Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-lign

1.2. Un rendu CSS initial proposé par le W3C

Les spécifications CSS proposent, elles aussi, des recommandations d'affichage initial pour chacun des éléments HTML, sous la forme d'une feuille de style d'exemple. Les développeurs de navigateurs sont invités à se conformer à cette feuille CSS « par défaut ».

Dans un monde idéal de compatibilité, tous les navigateurs et agents-utilisateurs appliqueraient à la lettre les feuilles de styles CSS initiales recommandées par le W3C... Est-ce le cas ? Pas tout à fait. Chaque navigateur est libre de proposer un rendu par défaut différent de celui proposé par les spécifications CSS, et on observe quelques discordances qui font le malheur des webdesigners. Celles-ci ne sont pas légion, mais il est important de bien les identifier.

2. Contexte : rendu CSS 

Les propriétés CSS d'un élément sont plus variées que les 2 seuls comportements inline et block des éléments HTML. De ces propriétés (display: block, inline, list-item, inline-block, table, table-cell,...) découlent ses spécificités d'affichage, et son positionnement dans le flux.

2.1. block

Les éléments de rendu CSS block se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise<p>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, ou min-height,...

Display block

<p>Paragraphe 1</p><p>Paragraphe 2</p>

Ces deux paragraphes vont s'afficher sur deux lignes, car la balise <p> est par défaut un élément de rendu "bloc" : chaque paragraphe va occuper une ligne.

2.2. inline

Les éléments de rendu inline se placent toujours l'un à côté de l'autre afin de rester dans le texte (par exemple la balise <strong>).
Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : leur taille va être déterminée par le texte ou l'élément qu'ils contiennent. Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales.

Display inline

<strong>Toto</strong> et <em>moi</em>

Ce texte va s'afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu CSS "en-ligne".

2.3. inline-block

Les éléments de rendu inline-block conservent les mêmes caractéristiques que les "inline", mais peuvent être dimensionnés, par exemple la balise <input>.

Display inline-block

2.4. list-item

Les éléments de rendu list-item ont un rendu de type "block" mais peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position , ...), par exemple la balise <li>.

Display list-item

2.5. table, table-row, table-cell

Les éléments de rendu table, table-row, table-cell possèdent le même comportement que les éléments de tableaux et cellules (<table>, <tr>, <td>). Ils permettent de centrer les contenus verticalement et d'avoir des hauteurs identiques entre éléments frères, par exemple la balise <td>.

Display table-row-cell

Il existe également inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, et table-caption.

2.6. autres...

Il existe d'autres valeurs possibles pour la propriété display, notamment :

none
La fameuse valeur qui permet de masquer un élément à l'affichage : aucune boîte n'est générée dans la structure de formatage, il n'y a pas d'influence sur la mise en forme du document.
run-in et compact
Ces valeurs créent une boîte de bloc ou en-ligne, selon le contexte. Les propriétés s'appliquent aux boîtes compactes ou en enfilade en fonction de leur statut final (types bloc ou en-ligne).
marker
Cette valeur précise la qualité de marqueur du contenu généré apparaissant avant ou après une boîte. Elle ne devrait être employée qu'avec les pseudo-éléments :before et :after liés à des éléments de type bloc. Dans certains cas, cette valeur est interprétée comme 'inline'.

3. Comment appliquer des styles CSS à des éléments HTML

Les styles vont s'appliquer à des éléments HTML d'une page ou d'un site par le biais de sélecteur qui permettent de cibler les éléments HTML sur lesquels le style doit être appliqué. 

3.1. *

1
2
3
4
* {
 margin: 0;
 padding: 0;
}

L'astérisque cible tous les éléments de la page. Beaucoup de développeurs utilisent cette astuce pour remettre à zéro les margess et les espacements. C'est parfaitement indiqué pour des tests rapides mais je vous recommande de ne jamais recourir à cette méthode dans votre code en production : cela sollicite troplourdement le navigateur et ça n'est pas indispensable.

Le symbole * peut aussi être utilisé avec des sélecteurs d'enfants.

1
2
3
#container * {
 border: 1px solid black;
}

Ceci cible tous les éléments enfants de la div #container. Là encore, essayez d'utiliser cette technique le moins possible, voire pas du tout.

3.2. #X

1
2
3
4
#container {
 width: 960px;
 margin: auto;
}

L'utilisation du symbole dièse comme sélecteur nous permet de cibler un élément par son id. Ce sélecteur d'id est probablement celui qui est le plus couramment utilisé mais il doit l'être avec quelques précautions.

Demandez-vous : est-ce que j'ai absolument besoin d'appliquer un id à cet élément pour le cibler ?

Les sélecteurs d'id sont en effet très rigides et ne permettent pas une réutilisation. Si possible, essayez d'utiliser d'abord un nom de balise, un des nouveaux éléments HTML5, ou même une pseudo-classe.

3.3. .X

1
2
3
.error {
color: red;
}

Ceci est un sélecteur de classe. La principale différence entre les ids et lesclasses est que ces dernières vous permettent de cibler plusieurs éléments. Utilisez des classes quand vous souhaitez que votre mise en forme s'applique à un groupe d'éléments. Alternativement, vous pouvez donc recourir aux ids, un peu comme on chercherait une aiguille dans une botte de foin, et mettre en forme l'élément spécifique ainsi ciblé, et lui seul.

3.4. X Y

1
2
3
li a {
text-decoration: none;
}

Le quatrième sélecteur le plus répandu est le sélecteur descendant. C'est lui que vous utilisez quand vous avez besoin d'être plus spécifique avec vos sélecteurs. Par exemple, comment faire pour cibler non pas toutes les balises d'ancres mais seulement celles qui sont comprises dans une liste non ordonnée ? C'est typiquement le cas où vous ferez appel à un sélecteur descendant.

Astuce pro - Si votre sélecteur ressemble à quelque chose comme X Y Z A B.error, c'est que vous vous y êtes mal pris. Demandez-vous toujours s'il est vraiment nécessaire de recourir à une syntaxe aussi lourde.

3.5. X

1
2
a { color: red; }
ul { margin-left: 0; }

Imaginons que vous vouliez cibler tous les éléments d'une page, non pas selon leurid ou leur class mais selon leur type ? Faites simple et utilisez un sélecteur de type. Par exemple, si vous devez cibler toutes les listes non ordonnées, utilisez simplement ul {}.

3.6. X:visited et X:link

1
2
a:link { color: red; }
a:visted { color: purple; }

La pseudo-classe :link est utilisée pour cibler toutes les balises d'ancres qui ne sont pas encore cliquées.

Alternativement, la pseudo-classe :visited permet, comme vous l'aurez deviné, d'appliquer une mise en forme spécifique aux seules balises d'ancres de la page quiont été cliquées ou visitées.

3.7. X + Y

1
2
3
ul + p {
 color: red;
}

On appelle ceci un sélecteur adjacent. Il permet de ne sélectionner que l'élément qui est immédiatement précédé par le premier élément ciblé. Ici, par exemple, seul le premier paragraphe après chaque ul comprendra du texte de couleur rouge.

3.8. X > Y

1
2
3
div#container > ul {
border: 1px solid black;
}

La différence entre le X Y standard et X > Y est que ce dernier ne sélectionnera que des enfants directs. Par exemple, soit le balisage suivant :

01
02
03
04
05
06
07
08
09
10
11
12
<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

Le sélecteur #container > ul ne ciblera que les uls qui sont enfants directs de la div avec l'id container. A l'inverse, il ne ciblera pas, par exemple, le ul qui est enfant du premier li.

Pour cette raison, l'utilisation de ce combinateur d'enfant apporte de vrais bénéfices en termes de performance. En fait, il est même particulièrement recommandé de l'utiliser quand on a recours à des moteurs de sélecteurs CSS basé sur du JavaScript.

4. Construire une feuille de style CSS

Lors de la construction des consignes CSS il faudra toujours garder à l'esprit que le code CSS est lu et interprété par le navigateur de manière linéaire d'après l'ordre d'affichage.

Conséquences :
  • Il est possible de "surcharger" des styles CSS en positionnant des règles CSS
  • Cela impacte l'ordre d'écriture des CSS : il faut lors de la construction des styles CSS commencer en haut par délivrer les consignes CSS les plus générales, puis de préciser des règles CSS plus spécifiques en bas de la feuille de style CSS

4.1. Annuler les styles par défaut des navigateurs

Chaque navigateur applique ses propres styles CSS même si aucun n'a été spécifié pour une page web. Cet affichage est relativement similaire entre navigateurs mais présente cependant de légères différences. 

Il est dnc judicieux d'utiliser un fichier de type "reset css" qui va annuler tous les styles s'appliquant par défaut. Il existe de nombreux fichiers de reset CSS parmi eux on peut citer : http://meyerweb.com/eric/tools/css/reset/

Le principe est d'appliquer ces consignes CSS au tout début du document CSS, une fois ceux-ci en place tous les navigateurs ont un comportement identiques (mais tous les styles par défaut disparaissent aussi (comme les puces des listes à puces)...

4.2. Principales propriétés CSS

Tout comme pour le code HTML il existe différents standards de code CSS : CSS 1, 2, 3,... Tout ses standards définissent des propriétés CSS que l'intégrateur HTML peut utiliser. La recommandation est de privilégier des propriétés CSS des standards 1 et 2 et d'utiliser avec plus de parcimonie le standard CSS3.

4.3. Subtilités du CSS : flux et positionnement

Une des notions les plus complexes à intégrer en CSS concerne le flux et le positionnement des éléments.
Une excellente explication est à lire attentivement sur ces articles : 

5. Ressources

Ce support de cours a été rédigé en recourant aux sources suivantes :