Les bases des CSS

Donc, que sont les CSS, réellement ?

De la même façon que HTML, CSS n’est pas vraiment un langage de programmation. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d’une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

p {
  color: red;
}

Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n’affectera pas l’affichage de la page HTML dans la navigateur (si vous n’avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l’article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).

Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l’élément head (c’est-à-dire entre les balises <head> et </head>) :

<link href="styles/style.css" rel="stylesheet" type="text/css">

Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :

Si le texte de votre paragraphe s’affiche en rouge, félicitations ! Vous venez d’écrire votre premier CSS fonctionnel !

Anatomie d’une règle CSS

Regardons un peu plus en détails ce que nous avons écrit en CSS :

Diagramme expliquant les différents éléments d'une déclaration CSS

Cette structure s’appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment : Sélecteur C’est le nom de l’élément HTML situé au début de l’ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l’occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur. Déclaration C’est une règle simple comme color: red; qui détermine les propriétésde l’élément que l’on veut mettre en forme. Propriétés Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS. Valeur de la propriété À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d’autres pour une propriété donnée (par exemple, il y a d’autres couleurs que red pour la propriété color).

Les autres éléments importants de la syntaxe sont :

  • chaque ensemble de règles, à l’exception du sélecteur, doit être entre accolades ({}).
  • pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
  • pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.

Ainsi, si on veut modifier plusieurs propriétés d’un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Sélectionner plusieurs éléments

Il est aussi possible de sélectionner plusieurs types d’éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

p,li,h1 {
  color: red;
}

Les différents types de sélecteurs

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n’avons vu que les sélecteurs d’élément qui permettent de sélectionner les éléments HTML d’un type donné dans un document HTML. Mais ce n’est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

Nom du sélecteurCe qu’il sélectionneExemple
Sélecteur d’élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)Tous les éléments HTML d’un type donné.p
sélectionne tous les <p>
Sélecteur d’IDL’élément d’une page qui possède l’ID fourni (pour une page HTML donné, on ne peut avoir qu’un seul élément pour un ID donné).#my-id
sélectionne <p id="my-id"> ou <a id="my-id">
Sélecteur de classeLes éléments d’une page qui sont de la classe donnée (pour une page donnée, il est possible d’avoir plusieurs éléments qui partagent une même classe)..my-class
sélectionne <p class="my-class"> et <a class="my-class!">
Sélecteur d’attributLes éléments de la page qui possèdent l’attribut donné.img[src]
sélectionne <img src="monimage.png"> mais pas <img>
Sélecteur de pseudo-classeLes éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).a:hover
sélectionne <a> mais uniquement quand le pointeur de la souris est au-dessus du lien.

Il existe plein d’autres sélecteurs, pour tous les découvrir, vous pouvez lire notre guide sur les sélecteurs.

Les polices (fontes) et le texte

Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d’abord, améliorons les polices et le texte.

  1. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l’élément <link ... > quelque part au sein de head dans le fichier index.html (c’est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à :

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Ensuite, supprimez la règle existante dans votre fichier style.css. Cette règle était pratique pour tester mais afficher du texte en rouge n’est pas la meilleure des mises en forme. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec modèle avec la ligne fournie par Google Fonts qui contient font-family (font-family représente la (ou les) police(s) qu’on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<html> est l’élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même font-size et font-family) :

html {
  font-size: 10px; 
  font-family: 'Open Sans', sans-serif; 
}


%d blogueurs aiment cette page :