Aller au contenu

13 Cours CSS

Introduction⚓︎

Les feuilles de style en cascade, généralement appelées CSS de l’anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, css devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

L’utilisation de ces deux langages, CSS et HTML, répond à un principe de séparation du fond et de la forme qui est utilisé depuis longtemps dans le monde de l’édition. D’abord on écrit du contenu (le fond), ensuite, on met en forme le contenu.

Le document HTML décrit le contenu du document : le fond, et le document CSS décrit sa forme.

Intégration de code CSS dans une page html⚓︎

Première méthode (recommandée) : utilisation d’une feuille de style externe⚓︎

On écrit le code CSS dans un fichier avec l’extension .css, par exemple style.css et on la lie dans l’en-tête du fichier HTML.

C’est la méthode préférée lorsque l’on a un ensemble de pages qui contiennent des styles identiques, cela permet d’alléger l’écriture du code et les requêtes vers le serveur de documents.

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

Deuxième méthode : utilisation d’une feuille de style interne⚓︎

On intègre le code CSS au sein de balises <style> dans l’entête du document.

Méthode pratique lorsque l’on a des documents HTML d’une seule page ou avec des styles spécifiques.

HTML
<head>
    <style>
        body {
              background-color: linen;
             }
        h1 {
            color: maroon;
            margin-left: 40px;
            }
    </style>
</head>

Troisième méthode (à éviter) : insertion directe dans les balises HTML⚓︎

On utilise alors l’attribut style au sein de la balise ouvrante de l’élément à styler.

Cette méthode est peu recommandée car on mélange le fond et la forme, et aussi parce que cela rend le code HTML plus illisible qu’il ne l’est !
Mais bon, des fois, on fait ce qu'on peut...

HTML
<p style="color: red; font-weight: bold;">
    Maintenant mon texte est écrit en rouge et en gras.
</p>

Syntaxe⚓︎

Une règle CSS est constituée d’un sélecteur suivi d’un bloc de déclaration entre accolades. Chaque déclaration se termine par un point-virgule.

Remarque. Les points-virgules sont obligatoires, mais pas l’indentation, elle est cependant conseillée pour rendre le code plus lisible.

CSS
selecteur de balises {
    attribut-css: valeur;
    attribut-css2: valeur2;
    ...
}

Les sélecteurs⚓︎

Pour préciser quelles balises doivent être mises en forme dans le document HTML, on utilise des sélecteurs. Par exemple :

  • body sélectionnera tout le contenu de la page web ;
  • div sélectionnera chaque partie séparée par une balise division ;
  • p sélectionnera toutes les balises paragraphe p ;
  • h1, h3 sélectionnera toutes les balises h1 et h3.

Le bloc de déclaration⚓︎

Il s'agit des règles de style à appliquer sur les éléments sélectionnés. L’ensemble des mots-clés en CSS est listé sur l’excellent site w3schools.com.

On peut spécifier une taille, des marges, etc :

  • height: 100\%;
  • width: 800px;
  • margin-top: 50px;
  • margin: auto;

On peut préciser la police de caractères, la taille de police, la couleur du texte, du fond, l'alignement du texte :

  • font-family: arial;
  • font-size: 24px;
  • color: red;
  • background:yellow;
  • text-align: center;

Commentaires⚓︎

Les commentaires utilisent la syntaxe suivante: /* Un commentaire */

Sélecteurs plus élaborés⚓︎

Plusieurs sélecteurs à la fois⚓︎

Il est possible de sélectionner plusieurs balises à la fois pour leur appliquer une règle commune, ces balises doivent alors être séparées par des virgules.

CSS
h1, h2, h3 {
    color: lime;
}

La virgule est très importante, car si on sépare les sélecteurs par des espaces il s’agit d’une sélection par descendance. Le code CSS suivant par exemple ne sélectionne que les paragraphes contenus dans une balise div.

CSS
div p {
    background-color: red;
}

Classe ou id ?⚓︎

Pour appliquer un même style à plusieurs éléments on peut leur ajouter un attribut HTML class="ma-classe", qui pourra être sélectionné en css avec le sélecteur .ma-classe.

Pour appliquer un style specifique à un unique élément on lui ajoute un attribut HTML id="mon-id", qui pourra être sélectionné en css avec le sélecteur #mon-id.

La notion d’id (syntaxe : #mon_id)⚓︎

Comment changer le style d’un seul paragraphe à l’exclusion de tous les autres ?

Fichier CSS⚓︎
CSS
#mon_par_de_police_rouge {
    color: red;
}

#mon_par_au_fond_bleu {
    background-color: cyan;
}
Fichier HTML⚓︎
HTML
<p id="mon_par_de_police_rouge">
Pellentesque dapibus suscipit ligula.
Donec posuere augue in quam.
</p>

<p>
Integer placerat tristique nisl.
Praesent augue.  Fusce commodo.
</p>

<p id="mon_par_au_fond_bleu">
Mauris mollis tincidunt felis.
Aliquam feugiat tellus ut neque.
</p>

La notion de classe (syntaxe : .ma_classe)⚓︎

Comment changer le style de quelques paragraphes mais pas de tous ?

Fichier CSS⚓︎
CSS
.italique {
    font-style: italic;
}

.gras {
    font-weight: bold;
}

#mon_intro {
    text-transform: uppercase;
}
Fichier HTML⚓︎
HTML
<p class="italique" id="mon_intro">
Pellentesque dapibus suscipit ligula.
Donec posuere augue in quam.
</p>

<p class="gras">
Integer placerat tristique nisl.
Praesent augue.  Fusce commodo.
</p>

<p class="italique gras">
Mauris mollis tincidunt felis.
Aliquam feugiat tellus ut neque.
</p>

Ordre d’application des règles⚓︎

Ce n’est pas pour rien qu’on parle de feuilles de styles en cascade, car en fait la difficulté en CSS est souvent que l’on définit des règles différentes pour des tags identiques, et qu’il faut savoir quelle règle va s’appliquer sur notre élément.

La priorité d'application des règles dépend :

Tout d'abord du degré de précision du sélecteur :
1) style défini dans l'attribut HTML style
2) #id
3) .class
4) sélecteur d'élément

Ensuite de l'ordre d'écriture des règles :
Si il y a égalité sur les autres critères, c'est le dernier style décrit qui prime sur les autres.
On notera qu'une feuille de style externe sera moins prioritaire qu'une feuille de style interne car, par convention, dans le head, on définit le link avant le style...

A noter que si aucune règle de style n'est définie par le créateur de la page web, des règles par défaut du navigateur s'appliqueront.

Déboguer son code CSS⚓︎

Inspecteur de styles du navigateur⚓︎

Pour savoir quelle règle a été utilisée par le navigateur, la console web du navigateur est d’un grand secours. On peut par exemple inspecter un élément et savoir quelles règles CSS s’appliquent et quelles règles CSS ont été supplantées (elles apparaissent barrées dans l’inspecteur de styles).

Validation du code css⚓︎

Le site du W3C propose comme pour le language HTML un validateur de fichier CSS.