Aller au contenu

1. Sélecteurs et Propriétés

Maintenant que vous êtes avez ajouté votre feuille de style à votre site Web, nous allons voir comment styliser tout ça. Alors que le HTML sert à structurer notre contenu au moyen de balises, le CSS sert lui à mettre en forme ce contenu.

Les sélecteurs

La première chose à définir en CSS est le sélecteur. Il s'agit de l'élément auquel nous allons appliquer un style :

CSS
p { }

Ici, je choisis de cibler les balises de type paragraphe. J'utilise donc le même sélecteur qu'en HTML : p.

Notez: Les crochets { et } qui suivent notre sélecteur. Ils définissent l'endroit où nous allons entrer les propriétés de style.

Nous reviendront plus bat dans ce chapitre les différents types de sélecteur et plus encore ...

Les propriétés

Les propriétés permettent de choisir quels aspects nous allons styliser. Par exemple, il est possible de changer la couleur, la police de caractère, la taille, le fond, ...

Ici, nous allons modifier la couleur de notre texte avec color:

CSS
p {
    color: ;
}

Les propriétés se mettent entre les crochets { et }, à la ligne avec une tabulation d'indentation.

La propriété est suivie de : qui permet de lui attribuer une valeur.

Les attributs ne peuvent être inventés. Vous ne pouvez pas taper un mot en anglais en espérant que ça marchera. Nous verrons dans les cours suivants les propriétés les plus utilisées.

Les valeurs

Nous allons maintenant changer la couleur de notre paragraphe. pour cela, nous allons entrer une couleur (ici red - rouge) à notre propriété :

CSS
p {
    color: red;
}

Et voilà le résultat :

Exemple de texte en rouge.

La valeur doit se mettre après les :. Aussi, il faut un ; pour fermer la ligne et pouvoir passer une autre propriété.

Récapitulatif

Voilà un schéma récapitulatif du fonctionnement du CSS :

Balise HTML

Les Types de sélecteur

Il y a plusieurs moyen de sélectionner un élément dans le DOM, donc les éléments du <body> d'une page HTML.

Les sélecteurs d'éléments (ou sélecteurs simples)

Nos premières manipulations le démontrent bien, les sélecteurs d'éléments ciblent les balises en fonction de leur nom. Vous connaissez tout un tas de balises HTML, vous pouvez dorénavant les sélectionner très facilement en CSS. Par exemple, le sélecteur p {} va cibler toutes les balises <p> de votre page HTML. Ce sera de même avec le sélecteur strong {} qui ciblera toutes les balises <strong> et ainsi de suite. Dès lors que la balise est présente dans le HTML, il est possible de la cibler en CSS.

Le sélecteur universel

Avant de continuer avec des choses plus complexes, prenons le temps de découvrir le sélecteur universel. Il permet de cibler toutes les balises sans exception. Le caractère qui identifie le sélecteur universel est *. Il s'utilise de manière très simple.

CSS
* {
  color: blue;
}

Le sélecteur d'identifiant (#id)

Nous savons cibler tous les éléments ou seulement les éléments répondant à un même nom de balise, mais comment différencier deux paragraphes par exemple ? Malheureusement, le sélecteur <p> cible tous les paragraphes sans exception.

Le sélecteur d'identifiant utilise l'attribut id="" d'une balise HTML pour sélectionner un élément spécifique. L'identifiant d'une balise devant être unique dans une page web, le sélecteur d'identifiant est donc utilisé pour sélectionner un élément unique. Pour sélectionner un élément avec un identifiant spécifique, il faut utiliser le caractère dièse : # suivi de l'identifiant de l'élément.

HTML
<p id="super-p">Mon super paragraphe.</p>
CSS
#super-p {
  color: pink;
}

Le nom d'une #id ne doit pas contenir :

  • des espaces,
  • des caractères spéciaux,
  • des accents.

Aussi, il doit commencer par une lettre (non pas un chiffre).

Attention! L'utilisation des id="" n'est pas recommandé comme sélecteur de style, car ils sont là avant tout pour pouvoir faire des manipulation JavaScript !

Le sélecteur de classe (.class)

A l'inverse d'un identifiant, un ou plusieurs éléments peuvent avoir la même classe. Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique. Le sélecteur de classe utilise l'attribut class="" d'une balise HTML pour sélectionner une ou plusieurs balises.

Pour sélectionner des éléments avec une classe spécifique, il faut utiliser le caractère point : . suivi du nom de la classe.

HTML
<p class="mega-p">Mon mega paragraphe.</p>
CSS
.mega-p {
  color: yellow;
}

Il est aussi possible de cumuler les .class :

CSS
/* Couleur rouge */
.red {
    color: red;
}
/* Texte en capitale */
.capitale {
    text-transform: uppercase;
}
HTML
<p class="red">
    Un super paragraphe avec <strong>du texte en gras</strong>.
</p>
<p class="red capitale">
    Un autre mega paragraphe rouge.
</p>
<ul>
    <li class="capitale">
        Élément de liste
    </li>
    <li class="red">
        Élément de liste rouge
    </li>
    <li>
        Élément de liste
    </li>
    <li>
        Élément de liste
    </li>
</ul>

Manipuler les sélecteurs

Le groupe de sélecteurs

Vous n'êtes pas obligé de faire une déclaration par élément. Il est même préférable de regrouper les sélecteurs pour minimiser le code. Pour grouper les sélecteurs, séparez chaque sélecteur par une virgule : ,. Ainsi, vous pourrez définir les mêmes styles pour plusieurs éléments en une seule déclaration.

CSS
h2, #super-p, .mega-p {
  color: red;
}

Les combinateurs

Le nom est assez explicite, les combinateurs permettent de combiner différents types de sélecteurs pour en former un nouveau plus précis. On peut donc inclure entre chaque sélecteur un combinateur. Il en existe 4 grands types mais nous nous focaliserons uniquement sur celui qui permet de sélectionner des enfants, à savoir l'espace. Les notions de parent et d'enfant sont clairement expliquées dans le prochain chapitre. Ainsi, dans l'exemple ci-dessous, tous les <p> ayant pour parent l'élément #super, seront ciblés.

CSS
#super p {
   color: red;
}

Mix des sélecteurs

Après avoir abordé les combinateurs, pour parachever la démonstration de la flexibilité des sélecteurs en CSS, il est bon de préciser que tous les types de sélecteurs peuvent être additionnés. Cela a tendance à créer un mélange assez complexe et très précis. La bonne pratique veut que les sélecteurs soient le moins précis possible. Dans l'exemple ci-après, seuls les éléments <p> avec la classe .crazy et ayant pour parent l'élément #super, seront ciblés. L'exemple ci-après est assez simple, on peut imaginer des exemples beaucoup plus complexes. On réserve tout ça pour les exercices.

CSS
#super p.crazy {
   color: pink;
}

Plusieurs propriétés et sélecteurs

Il est possible de définir plusieurs propriétés à un sélecteur. Pour cela, il faut les empiler, les uns à la suite des autres. Par exemple, nous allons changer la taille et la couleur de nos balises p :

CSS
p {
    color: red;
    font-size: 16px;
}

Si vous devez styliser différents sélecteurs, vous pouvez les mettre les uns après les autres :

CSS
p {
    color: red;
    font-size: 16px;
}

li {
    color: green;
    font-size: 14px;
}

Les commentaires

Comme en HTML et dans tous les langages de programmation, le CSS permet les commentaires. Ces derniers sont utilisés pour expliquer le code et peuvent vous aider lorsque vous modifierez le code ultérieurement. En CSS, un commentaire commence par /* et se termine par */. Ils peuvent couvrir plusieurs lignes. Exemple :

CSS
/* Mon premier commentaire CSS en une seule ligne */
h2, #super-p, .mega-p {
  color: red;
}

/*
   Mon premier commentaire CSS
   sur deux lignes
*/