Les propriétés CSS et comment s'en servir

Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).

La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.

p {
   font-family: "Times New Roman", georgia, sans-serif;
   font-size: 24px;
}

Dans l'exemple précédent,  p est un sélecteur qui applique un style à tous les éléments <p> en même temps. Les propriétés CSS font-family et font-size sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.

Il existe plus de 250 propriétés pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.

Pédagogie active

Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.

Aller plus loin

Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.

Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les sélecteurs les plus précis prend le dessus sur les règles avec les sélecteurs plus basiques.

Le sélecteur d'élément

Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.

Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :

<h1>Je suis un exemple.</h1>
<p>Dans cet exemple, je suis un paragraphe.</p>
<p>Et je suis un second paragraphe.</p>

Dans la règle CSS qui suit, le sélecteur d'élement p applique les styles définis à tous les éléments <p> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété font-family (qui définit la police avec laquelle le texte apparait) et font-size (qui définit pour sa part la taille du texte).

p {
  font-family: "Helvetica", Arial, sans-serif;
  font-size  : 12px;
}

La prochaine règle CSS s'applique uniquement à l'élément <h1>. On fait appel à la propriété font-size pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété font-weight pour qu'il soit également en gras.

h1 {
  font-size  : 24px;
  font-weight: bold;
}

La règle CSS suivante applique les styles demandés à la fois aux éléments <h1> et aux éléments <p>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété color pour appliquer la même couleur au texte des h1 et à celui des paragraphes.

h1, p {
  color: darkmagenta;
}

Voici le résultat obtenu avec ce code :

Le sélecteur id

L'attribut id d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur id est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.

Pour notre prochain exemple, prenons le fragment de code HTML suivant :

<p id="coucou">Coucou monde !</p> 

La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur id, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (id). Nous faisons appel à trois propriétés : text-align pour centrer le texte dans le paragraphe,  border pour encadrer le paragraphe d'un cadre fin, et padding afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.

#coucou {
  text-align: center;
  border    : 1px solid black;
  padding   : 8px;
}

Voici le résultat final obtenu:

Le sélecteur class

À l'intérieur du code HTML, l'attribut class permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.

Pour notre prochain exemple, analysez le fragment de code HTML suivant :

<h1 class="coucou">Coucou !</h1>
<p class="coucou salut">Retrouvons-nous !</p>
<p class="salut">Et déplaçons des montagnes.</p>

Nous allons appliquer une règle CSS à tous les éléments contenant la classe coucou. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété font-style pour mettre le texte en italique.

.coucou {
  font-style: italic;
}

En voici une autre pour tous les éléments avec la classe salut. Ici, nous utilisons la propriété text-decoration pour barrer le texte d'une ligne.

.salut {
  text-decoration: line-through;
}

Voici le résultat obtenu :

Prochaines étapes

Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en apprendre davantage sur le formatage du texte ou commencer à explorer nos tutoriels CSS dès maintenant.