Présentation des CSS (cours)

Introduction

Qu’est-ce que les CSS ?

Le langage CSS est destiné à gérer le contenu et la structure d’une page web. Il est techniquement possible de faire de la mise en forme en HTML, mais les possibilités restent très limitées. Le langage CSS est donc là pour étendre considérablement les possibilités graphiques.

Le sigle CSS signifie Cascading Style Sheet autrement dit en français, feuille de styles en cascade. Cela indique bien que les CSS permettent de styler, de mettre en forme une page web. Le mot cascade, quant à lui, fait référence à une notion importante que l’on appelle l’héritage et sur laquelle nous reviendrons plus en détail dans la suite de ce cours.

CSS va donc nous permettre de gérer la mise en forme du contenu d’une page. Nous allons pouvoir mettre en forme le texte (couleur, taille, graisse, casse, etc.) mais CSS va également nous permettre de dimensionner et positionner tous les éléments dans la page web et même de gérer des animations.

Quels avantages pour le développement ?

Il est aujourd’hui impensable de ne pas utiliser des CSS pour la mise en forme d’une page web tellement les avantages sont nombreux :

• Rapidité de mise en forme : la mise en forme étant traitée par lot (par exemple tous les titres <h1> du document), le travail est donc considérablement plus rapide que lorsque l’on effectue de la mise en forme directe en HTML.
• Facilité de mise à jour : sur le même principe de traitement par lot, il n’est pas nécessaire de reprendre tous les éléments dont on souhaite mettre à jour la mise en forme mais uniquement le CSS correspondant.
• Possibilités graphiques : les possibilités de mise en forme en HTML sont extrêmement pauvres par rapport à celles offertes par le langage CSS.
• Lisibilité du code : le code HTML sera plus léger et donc beaucoup plus lisible sans le verbiage de la mise en forme directe.

Les principes du langage CSS

Séparation de la forme et du contenu

Le premier principe est au cœur de la philosophie des styles. Il s’agit de distinguer clairement le code correspondant au contenu (structure de la page, texte de la page, sémantique) du code correspondant à la mise en forme (couleurs, positionnement). Ces deux aspects étant gérés respectivement par les langages HTML et CSS.

Le projet CSS Zen Garden est un bon moyen pour illustrer ce principe. L’idée de ce site est de proposer aux internautes d’effectuer la mise en page d’une page web fournie en utilisant uniquement CSS. Il est donc interdit de modifier le code HTML. Ainsi, les trois pages web pour lesquelles vous avez un aperçu ci-dessous ont toutes les trois exactement le même code HTML et se distinguent donc uniquement par leur code CSS (ainsi que des images ajoutées via CSS).

Le fait de séparer la forme du contenu permet d’avoir un code beaucoup plus lisible. Par la suite, il sera ainsi possible de modifier l’un sans toucher à l’autre.

Adaptation en fonction du support de consultation

Depuis longtemps, grâce à CSS, il est possible de distinguer pour une page web sa mise en forme à l’écran de sa mise en forme lors de l’impression. Cette distinction permet notamment d’éviter d’imprimer les éléments d’interfaces inutiles comme les menus de navigation, d’adapter les marges, la taille des caractères, les couleurs, etc. Aujourd’hui CSS ne permet d’aller beaucoup plus loin.

Depuis la version 3 du langage CSS, les media queries sont apparues et permettent désormais de distinguer les différentes définitions d’écran (2560×1440, 1920×1080), mais aussi les différents types d’écrans (smartphone, télévision, projecteur), l’orientation de l’écran (portrait ou paysage), etc. Une page web peut ainsi s’afficher différemment en fonction du support de consultation selon les critères définis par le webdesigner.

Compte tenu de l’évolution des usages et de la part substantielle de pages consultées sur smartphone (43% en Europe au moment où ces lignes sont écrites, source statista.com), cette adaptation de l’interface est aujourd’hui indispensable. Il est évident que l’on ne peut pas consulter une page créée pour un écran large avec le même confort sur un écran de smartphone et vice-versa. Il est donc important de prévoir l’adaptation de son interface aux différents supports de consultation.

Les media queries sont donc des outils, parmi d’autres, qui permettent la mise en place de ce que l’on appelle le responsive web design ou les interfaces web adaptatives. Voici un exemple avec l’animation ci-dessous, où vous pouvez voir que la page s’adapte en fonction de la largeur de la fenêtre du navigateur.

Héritage des styles

Ce principe déjà évoqué lors de la définition du sigle CSS avec le terme cascading part du principe que les propriétés de mise en forme d’un élément HTML (div, p, h1, etc.) seront héritées de ces ancêtres sauf si on les paramètre spécifiquement.

Il est un peu tôt pour rentrer dans le détail des explications de l’héritage, nous allons donc laisser de côté ce concept pour y revenir après avoir vu la syntaxe du langage CSS et le fonctionnement des sélecteurs

La syntaxe de CSS

La syntaxe globale du langage CSS est relativement simple. Une déclaration CSS se présente toujours de la même manière :

Nous pouvons distinguer deux éléments dans cette syntaxe. Le premier correspond à ce que l’on appelle le sélecteur (en bleu ci-dessous). Le sélecteur est un élément clé puisqu’il indique sur quels éléments HTML vont s’appliquer les propriétés CSS qui vont suivre. Il sera systématiquement suivi d’accolades qui encadreront les propriétés en question. C’est probablement un des aspects les plus compliqués lorsque l’on débute avec CSS, puisqu’il va y avoir, comme nous allons le voir un peu plus tard, quelques règles à connaître…

Le deuxième élément notable de cet exemple se trouve donc entre les accolades. Il s’agit de l’ensemble de paramètres de mise en forme que l’on souhaite appliquer (à l’élément identifié par le sélecteur). Chaque propriété de mise en forme sera suivie de deux points et de la valeur que l’on souhaite lui appliquer. La ligne se terminera par un point virgule. Sachez que la plupart du temps, vous ne pourrez pas deviner les propriétés, ni même les valeurs. Il faudra donc régulièrement vérifier sur un site de référence (ou dans vos notes) le nom des propriétés et les valeurs que vous pouvez leur associer.

Prenons maintenant un exemple concret. Le sélecteur de l’exemple ci-dessous est h1. Cela signifie donc que les propriétés listées entre accolades vont s’appliquer à l’ensemble des éléments <h1> trouvés dans le code HTML de la page web. La propriété color va permettre de définir la couleur du texte qui sera donc rouge et la propriété font-style le style du texte. Les titres de niveau un de la page s’afficheront donc tous en rouge et en italique.

Pour limiter au maximum les erreurs de code, veillez à être très rigoureux lors de la rédaction de votre code. Tâchez de le présenter comme dans l’exemple en indentant (c’est-à-dire en décalant) les propriétés par rapport au sélecteur et en mettant les différentes propriétés sur des lignes séparées. Les erreurs les plus courantes sont dues à un manque de rigueur dans la rédaction qui fait que l’on oublie une des accolades ou un point virgule.

Il est recommandé lorsque l’on débute de penser à commenter son code pour pouvoir le comprendre lorsque l’on revient dessus par la suite. Pour cela il suffit de mettre vos commentaires entre /* et */.

Comment associer des styles à une page web ?

Avant de définir des propriétés CSS à appliquer à des sélecteurs, il est important de savoir comment associer le code CSS au code HTML. Où va donc se trouver ce fameux code CSS?

Les styles par défaut du navigateur

Si vous avez déjà créé une page web, sachez que vous avez déjà utilisé des CSS sans le savoir. En effet, les navigateurs embarquent une feuille de style par défaut. C’est la raison pour laquelle, il y avait déjà quelques petits éléments de mise en forme qui s’appliquaient. Vous avez déjà dû constater que les titres étaient en gras et avaient également une taille de texte et des espacements différents par rapport aux paragraphes de base.

Création d’une feuille de style interne

La méthode la plus simple pour ajouter des styles CSS dans une page consiste à déclarer ce que l’on appelle une feuille de style interne. Cette méthode consiste à intégrer le code CSS directement dans l’en-tête d’une page HTML en utilisant la commande <style>. La feuille interne présentée dans l’exemple ci-dessous permet ainsi de définir la police Arial comme police par défaut pour la page et de faire en sorte que les paragraphes (les éléments <p>) s’affichent en bleu. Si l’on souhaite changer la couleur des deux paragraphes, il suffit ensuite de modifier la couleur saisie à la ligne 9.

<!DOCTYPE html>
<html>
  <head> 
    <style type="text/css"> 
       body {
         font-family : arial ;
       }
       p {
         color : blue ;
       } 
    </style>
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet, consectetur adipiscing elit. </p>
    <p>Mauris quis sapien fermentum felis malesuada pharetra. </p>
  </body>
</html>

Cette méthode est très simple, mais a un inconvénient de taille. Que se passe-t-il si votre site web est constitué de plusieurs pages web ? Il est nécessaire de copier/coller la feuille de style interne dans chacune des pages web… Le problème va donc se poser rapidement, si l’on doit faire une modification de couleur par exemple, il faudra effectuer la même modification dans l’ensemble des pages. Si vous avez trois pages, ce serait encore gérable au-delà, cela sera beaucoup plus compliqué. Quand votre site web fait plus d’une seule page, il va donc falloir utiliser une autre méthode qui consiste à créer une feuille de style externe.

Création d’une feuille de style externe

Le principe d’une feuille de style externe est d’enregistrer tous les paramètres CSS dans un fichier à part, puis de lier ce fichier à l’ensemble des pages du site web. La modification du fichier CSS s’appliquera ainsi sur l’ensemble des pages qui y font référence.

Les fichiers CSS se créent et se modifient avec les mêmes logiciels que les fichiers HTML. La seule chose qui les distingue, à part leur contenu, est leur extension de fichier. Les fichiers CSS ont comme extension .css. Notez que si vous pouvez mettre du CSS dans une page HTML, l’inverse n’est pas possible. Vous n’aurez jamais de code HTML dans un fichier .css.

Une fois le fichier .css créé, il va falloir le lier aux pages HTML qui doivent l’utiliser. Pour cela, il suffit d’ajouter une ligne dans l’en-tête de chacune des pages avec la commande <link>. Le contenu de cette commande sera systématiquement le même, mais vous allez devoir personnaliser l’option href en fonction du nom de votre fichier .css et de son emplacement dans votre dossier racine.

<!DOCTYPE html>
<html>
  <head> 
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet, consectetur adipiscing elit. </p>
    <p>Mauris quis sapien fermentum felis malesuada pharetra. </p>
  </body>
</html>

Utilisation de style « en ligne »

Il est possible d’utiliser du code CSS au cœur des balises HTML, on parle alors de style inline ou en ligne. Cette pratique ne doit concerner que des cas exceptionnels pour lesquels vous ne pouvez pas utiliser de feuille de style. Car cela revient à faire de la mise en forme directe vous perdez alors une grande partie de l’intérêt des CSS.

Pour insérer des styles inline, il suffit d’utiliser l’attribut style qui peut se placer sur n’importe quelle balise HTML. Comme vous pouvez le voir dans l’exemple suivant, l’attribut style contient les propriétés CSS. Ce type de déclaration n’a évidemment pas besoin de sélecteur puisque celui-ci est défini par la balise dans laquelle vous placez l’attribut style.

<p style="color: blue; margin-left: 25px"> 
      Un paragraphe qui contient du texte et un mot en <span style="color: red;">rouge</span>.
   </p> 

3 méthodes, laquelle utiliser ?

Nous venons de voir trois méthodes différentes pour intégrer des styles dans une page web. Chacune répond à des besoins spécifiques et ont leurs inconvénients.

Vous l’aurez compris, vous devez favoriser au maximum l’utilisation d’une feuille de style externe qui permet d’exploiter pleinement tout le potentiel de CSS.

Comportements des styles déclarés

Priorités des déclarations

Que se passe-t-il lorsque vous déclarez deux propriétés de mise en forme contradictoires pour le même élément ? Dans l’exemple qui suit, nous avons déclaré deux propriétés contradictoires pour les titres de niveau 1 <h1>. Nous demandons à le mettre en rouge puis en vert. Dans ce cas-là, il faut savoir que la seconde déclaration sera prioritaire sur la première à condition d’être de même précision, mais nous reviendrons plus tard sur ce point. Dans notre exemple, les titres s’afficheront donc en vert.

h1 {
  color : red ;
}
p {
  font-size : 0.9rem; 
}
h1 {
  color : green ;
}

Sur ce même principe, les feuilles de styles seront prioritaires par rapport aux styles par défaut du navigateur. Et la priorité des feuilles entre elles (puisqu’il est possible d’associer plusieurs feuilles internes/externes à la même page HTML) dépendra de leur ordre d’intégration dans l’en-tête de la page HTML. Les styles en-ligne, déclarés forcément en dernier, seront donc prioritaires sur tous les autres.

Principe de combinaison

Toutes les propriétés déclarées dans différentes feuilles de style (ou à différents endroits d’une même feuille de style) pour le même sélecteur vont se combiner. Pour prendre un exemple, imaginons une page web contenant une feuille de style externe avec une déclaration CSS pour l’élément <strong>. Cette déclaration va s’ajouter à la déclaration par défaut du navigateur.

strong {    
    font-weight: bolder ; /* Gras */
}

strong {    
    color: red ;
}

Le résultat combiné de ces deux feuilles de style équivaudra au résultat final suivant :

strong {    
    font-weight: bolder ;
    color: red ;
}

Principe de surcharge

Nous venons de voir que les propriétés déclarées à différents endroits pour le même élément se combinent. Mais que se passe-t-il lorsqu’il y a des valeurs différentes pour les mêmes propriétés CSS ?

strong {    
    font-weight: bolder ; 
}

strong {
    font-weight: normal ;
    color: red ;
}

Dans ce cas-là, le principe de surcharge CSS va s’appliquer. C’est-à-dire que la valeur de la déclaration prioritaire (la dernière arrivée) va remplacer la précédente. Le résultat final équivaudra donc au code suivant dans lequel la valeur de font-weight à été surchargée.

strong {
    font-weight: normal ;
    color: red ;
}

Les sélecteurs

Comme nous l’avons vu précédemment, le sélecteur permet d’indiquer dans une déclaration CSS les éléments sur lesquels vont s’appliquer les propriétés qui suivent. Voyons maintenant un peu plus en détail les types de sélecteurs disponibles en CSS.

Le sélecteur d’élément

Le sélecteur d’élément est le plus générique, il concerne les éléments HTML sans distinction. C’est le type de sélecteur que nous avons pris comme exemple jusqu’à maintenant. Il suffit donc d’utiliser comme sélecteur n’importe quel élément HTML : p, h1, strong, etc. C’est le type de sélecteur que l’on utilise pour la mise en forme de base d’une page, pour les paramètres par défaut.

Le code CSS suivant utilise deux sélecteurs de type élément : h1 et p. Comme vous pouvez le voir plus bas dans l’aperçu, tous les éléments <h1> sont en bleu et tous les éléments <p> sont en rouge.

h1 {
    color: blue ;
}
p {
    color: red ;
}

<h1>Logique syllogistique</h1>
<p>Tous les hommes sont mortels</p>
<p>Or <strong>Socrate</strong> est un homme</p>
<p>Donc <strong>Socrate</strong> est mortel.</p>

Ce type de sélecteur est donc assez simple, mais comme nous venons de le voir, il ne permet pas de distinguer un seul paragraphe parmi d’autres…

Les classes

Les sélecteurs de type classes vont offrir une liberté totale de mise en forme en permettant de cibler tout ce que l’on souhaite. Pour utiliser les classes en CSS, il est nécessaire de les associer à un ou plusieurs éléments dans le code HTML via l’attribut class, sachant que l’on peut mettre des classes sur n’importe quel élément HTML.

<h1 class="titre-article">Principes des classes</h1>
<p class="introduction">Les sélecteurs de type classes vont offrir un liberté totale de mise en forme</p>

Dans l’exemple ci-dessous, nous souhaitons mettre en rouge les noms d’animaux qui se trouvent tous à l’intérieur d’un élément <em>. Si nous utilisons le sélecteur d’élément, nous allons mettre en rouge tous les <em> même ceux qui ne contiennent pas un nom d’animal. Pour traiter la question, nous créons donc une classe à laquelle nous donnons le nom de notre choix. La règle pour les noms des classes étant identique à celle des noms de fichiers : pas de caractères spéciaux ou accentués, d’espaces ou de majuscules. Ici la classe s’appelle animal, nous pouvons ensuite l’associer aux deux éléments <em> qui contiennent des noms d’animaux en utilisant l’attribut class.

.animal {
    color: red;
}

<p>Logique <em>syllogistique</em></p>
<p>Tous les <em class="animal">mulots</em> sont poilus</p>
<p>Or tous les poilus sont <em>iconoclastes</em></p>
<p>Donc <em>quelques</em> iconoclastes sont des 
<em class="animal">mulots</em>.</p>

Vous avez peut-être remarqué que dans le code CSS, le nom de la classe est précédé par un . (point). Celui-ci est obligatoire. Il indique que vous faites référence à une classe. Si vous oubliez ce point et que vous mettez seulement animal, cela voudrait dire que vous cherchez à mettre en forme un élément HTML <animal>, qui n’existe évidemment pas…

<h1 class="titre">Lorem Ipsum</h1>
<p class="texte">Suspendisse ipsum ex, dapibus vel finibus pretium, accumsan non sem.</p>
<p class="texte">Nullam faucibus ultrices congue. </p>
<h1 class="titre">Vivamus orci neque</h1>
<p class="texte">Praesent ultrices ac magna et dignissim.</p>
<p class="texte">Donec sed hendrerit nisi. In sagittis semper felis.</p>

Les identifiants

Un identifiant permet de distinguer un élément HTML pour le rendre unique dans la page. Le principe d’un identifiant est de nommer précisément un élément pour y faire référence. Le principe étant qu’il n’est pas possible d’avoir deux éléments avec le même nom (le même identifiant) dans la même page. Pour le nom, toujours pareil : pas de caractères spéciaux ou accentués, d’espaces ou de majuscules.

Si les identifiants sont aujourd’hui principalement utilisés pour effectuer des manipulations en javascript (un langage de programmation souvent associé à HTML et CSS) ou pour créer des ancres nommées, il est également possible de les utiliser pour faire de la mise en forme en CSS. Ce n’est pas vraiment recommandé, car cela n’apporte rien par rapport aux classes, mais vous pourrez trouver de nombreuses utilisations des identifiants si vous cherchez des exemples de code, il est donc important de connaître le fonctionnement.

L’identification d’un élément HTML s’effectue avec l’attribut id, que l’on va donc ajouter sur n’importe quel élément. Ensuite, la déclaration CSS sera faite en faisant précéder l’identifiant par le caractère #.

#exemple {
    color: red ;
}

<div id="exemple">Lorem ipsum</div>

Les pseudo-classes

Les pseudo-classes permettent de définir les propriétés d’éléments non atteignables directement par des sélecteurs « classiques ». Ils correspondent à des états d’élément et s’ajoutent généralement à un sélecteur classique en étant précédé de :.

Les pseudo-classes sont très souvent utilisées pour faire des effets sur les liens hypertextes en fonction des actions de l’utilisateur. Voici donc un exemple permettant de définir la couleur des liens en fonction de leur état.

/* Couleur des liens hypertextes par défaut */
a {
   color: red ;
}
/* Couleur des liens hypertextes au survol de la souris */
a:hover {
   color: green ;
}
/* Couleur des liens hypertextes pendant la durée du clique de l'utilisateur */
a:active {
   color: pink ;
}
/* Couleur des liens hypertextes visités, donc après un clique de l'utilisateur */
a:visited {
   color: aqua ;
}

Voici le résultat du code :

Ordre de priorité des sélecteurs

Nous avons déjà vu qu’en cas de contradiction entre deux déclarations CSS pour le même élément, la dernière déclaration était celle qui s’appliquerait. Une règle complémentaire va s’appliquer pour les sélecteurs.

Si deux sélecteurs s’appliquent au même élément, ce sera alors le plus précis qui sera prioritaire. S’ils ont un niveau de précision identique, la règle précédente s’applique et par conséquent la dernière déclaration s’applique.

La précision des sélecteurs est donc la suivante :

1. Le sélecteur de type élément, le plus générique ;
2. La classe ;
3. L’identifiant car pour les éléments uniques.

Voici donc un exemple de trois déclarations de précisions différentes qui s’appliquent au même élément.

p {
    background-color: red;
}
#bar {
    background-color: gold;
}
.foo {
    background-color: green;
}

<p class="foo" id="bar">Lorem ipsum</p>

Le sélecteur le plus précis étant l’identifiant, l’élément aura donc un arrière-plan couleur or.

Retour sur le concept d’héritage

Nous l’avons déjà dit, la notion d’héritage part du principe que les propriétés de mise en forme d’un élément HTML (div, p, h1, etc.) seront héritées de ces ancêtres sauf si on les paramètre spécifiquement. Ok, mais alors qu’est-ce qu’un ancêtre ?

Lorsque deux éléments HTML sont imbriqués, l’élément conteneur est le parent de l’élément contenu qui sera lui-même appelé l’enfant. Nous avons un principe de filiation. Les ancêtres d’un élément sont donc l’ensemble des éléments qui le contiennent par imbrication. Il est probablement temps de prendre un exemple concret… Soit le code HTML suivant :

<body>
    <div>
        <p>Lorem <strong>Ipsum</strong></p>
        <ul>
            <li>Morbi euismod condimentum ;</li>
            <li>Fusce at lacus vitae lorem.</li>
        </ul>
    </div>
</body>

À partir de ce code, il est possible de construire ce qui s’apparenterait à un arbre généalogique basé sur l’imbrication des balises.

À partir de cet arbre « généalogique », nous pouvons maintenant facilement déterminer les liens de parenté entre les différents éléments. Nous pouvons donc en déduire les informations suivantes :

• L’élément <body> est le parent de l’élément <div>, il est également son ancêtre ;
• L’élément <div> est l’enfant de l’élément <body> ;
• L’élément <p> a un parent <div> et deux ancêtres <div> et <body> ;
• L’élément <ul> a deux enfants, les deux éléments <li> ;
• L’élément <p> et l’élément <ul> sont frères.

Selon la règle déjà évoquée, les éléments HTML héritent des propriétés de leurs parents.

Prenons donc l’exemple, où l’on modifie la couleur de l’élément <div>. Ces enfants vont hériter de cette couleur. Leurs enfants vont également hériter de cette couleur par cascade.

Nous modifions maintenant la couleur de l’élément <ul> qui héritait initialement de la couleur de <div>.

La couleur spécifiée est prioritaire sur la couleur héritée. Dans notre exemple <ul> est désormais en vert.

Les enfants de <ul> vont donc hériter de sa couleur, ils seront donc également en vert.

Prenons un dernier exemple avec le code CSS et le code HTML suivant.

p {
    color: blue ;
}

<p>Lorem ipsum dolor sit amet,<strong> consectetur adipiscing</strong> elit. Curabitur in sapien eu <strong>nulla ipsum</strong>.</p>

L’élément <p> est mis en couleur, tous ces enfants seront donc dans la même couleur. Le paragraphe ci-dessous contient des éléments <strong>. Comme vous pouvez le voir, tout le texte est en bleu alors que la couleur n’a été ajoutée que pour l’élément <p>. Les éléments <strong> sont donc en bleu par héritage.

Compléments sur les sélecteurs

Chaînage des sélecteurs

Afin de limiter le nombre de classes à inscrire dans le code HTML, il est pratique d’utiliser la technique du chaînage de sélecteurs. C’est-à-dire que l’on va préciser un sélecteur en donnant son contexte.

Par exemple, le sélecteur p strong indique que l’on souhaite mettre en forme les éléments <strong> mais uniquement ceux qui se trouvent dans un élément <p>. Il est ainsi possible de chaîner plusieurs sélecteurs, body div p a correspond donc aux liens (commande <a>) qui se trouvent dans un paragraphe <p>, lui-même dans un élément <div> qui se trouve dans <body>. Il n’est pas recommandé d’abuser du chaînage, car ce n’est pas optimal pour le navigateur et cela complique les choses, mais il est très fréquent de trouver un chaînage sur deux niveaux.

Voici donc un dernier exemple complet :

ul em {
    color: red;
    font-weight: bold;
    text-transform: uppercase;
}

<p>Logique <em>syllogistique</em></p>
<ul>
   <li>Aucun prêtre n'est un <em>singe</em></li>
   <li>Or les chimpanzés sont des <em>singes</em></li>
   <li>Donc les chimpanzés ne sont pas prêtres.</li>
</ul>

Le chaînage ul em permet ici de cibler les éléments <em> à condition qu’ils se trouvent dans une liste <ul>. Le premier <em> contenant le mot syllogistique n’est donc pas concerné. Dans ce contexte, nous aurions également pu utiliser li em. La différence, ne se verrait que si l’on utilise des listes numérotées <ol>. Nous aurions aussi pu mettre ul li em, mais cela complique le chaînage inutilement.

Notez que nous avons pris que des exemples de chaînage de sélecteur de type élément, mais cette méthode fonctionne avec n’importe quel type de sélecteur.

Les sélecteurs d’initialisation

Lors de la création d’une feuille de style pour la mise en forme d’une page, il est souvent utile de donner les valeurs par défaut à utiliser pour la page. Deux sélecteurs de type éléments sont utilisés pour cela body et *.

Le sélecteur body va permettre de transmettre des valeurs par défaut par héritage, puisqu’il est l’ancêtre de tout le contenu de la page. Il est donc très fréquent de trouver des feuilles de style qui commencent par le sélecteur body. Il est généralement utilisé pour définir les valeurs par défaut pour le texte (police, taille et couleur) et pour la page (marges et arrière-plan).

body {
    font-family: arial, sans-serif; /* Police de caractère */
    color: black;                   /* Couleur du texte */
    font-size: 15px;                /* Taille des caractères */
    background-color: white;        /* Couleur d'arrière-plan de la page */
    margin: 0;                      /* Marges externes de la page */
}

Le sélecteur * est plus délicat à comprendre. Il s’agit du sélecteur universel qui correspond à tous les éléments HTML. C’est l’équivalent d’un sélecteur contenant tous les éléments HTML séparés par une virgule. Il ne fonctionne donc pas par héritage. Ce sélecteur est très souvent utilisé pour faire ce que l’on appelle un reset de CSS, c’est-à-dire une réinitialisation des propriétés par défaut. Aujourd’hui, cette technique classique est très largement déconseillée, car elle annule beaucoup de propriétés utiles. Il est donc recommandé d’utiliser un système de reset plus précis ( exemple de système de reset).

* {
    margin: 0;   /* Marges externes */
    padding: 0;  /* Marges internes */
}

Utilisation de plusieurs classes

Afin d’optimiser son code et de le rendre plus pratique à mettre à jour, il est très courant d’associer plusieurs classes au même élément HTML.

Voici un exemple avec une classe .message qui permet de présenter des messages à destination de l’internaute. Cette classe est accompagnée de deux autres classes .message-success et .message-error qui permettent quant à elles d’ajouter de la couleur aux messages sans toucher aux propriétés communes. Nous avons ainsi une classe générique avec la bordure et les marges et deux classes spécifiques pour la couleur d’arrière-plan.

.message {
    border: 3px solid black; 
    padding: 15px;
    margin: 15px;
}
.message-success {
    background-color: green;
}
.message-error {
    background-color: red;
}

<div class="message">
    Un message neutre
</div>
<div class="message message-success">
    Un message de réussite
</div>
<div class="message message-error">
    Un message d'erreur
</div>

Les déclarations multiples

Afin de gagner du temps, il est possible d’utiliser plusieurs sélecteurs dans la même déclaration CSS en les séparant par une ,. Les deux codes ci-dessous sont donc équivalents :

h1 {
   color: green ;
}
h2 {
   color: green ;
}
p {
   color: green ;
}
.super {
   color: green ;
}

h1, h2, p, .super { 
   color: green ; 
}

Conclusion

Les sélecteurs vont donc indiquer le ou les éléments à mettre en forme, mais sachez que la plupart du temps, vous aurez plusieurs manières pour arriver au même résultat… Certaines évidemment plus simple ou plus rapide que d’autres.

Nous avons vu plusieurs types de sélecteurs, mais la liste est loin d’être exhaustive. Vous pouvez trouver la liste complète à l’adresse http://www.w3schools.com/cssref/css_selectors.asp. Une bonne solution pour découvrir les sélecteurs CSS par la pratique consiste à essayer d’atteindre le dernier niveau du serious game CSS Diner.

Vous avez pu rencontrer via les différents exemples de code, plusieurs propriétés CSS. Il n’est pas intéressant de lister toutes les propriétés et cela serait par ailleurs beaucoup trop long. Lorsque vous avez besoin d’une propriété CSS que vous ne connaissez pas, n’essayez pas de la deviner, mais utilisez un moteur de recherche pour la trouver très facilement. Vous aurez ainsi des exemples d’utilisation et surtout les valeurs possibles.

Vous trouverez la liste complète sur cette page https://developer.mozilla.org/fr/docs/Web/CSS/Reference.

Sauf mention contraire*, l'article Présentation des CSS (cours) et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.