Création numérique
Atelier Conception et publication Web

Séance 4 - Introduction au CSS

Démonstration : Une page HTML avec plusieurs styles

La syntaxe CSS

Une règle CSS se compose d'un sélecteur et un bloc de déclaration:
Explication de la syntaxe CSS

Le sélecteur pointe l'élément HTML que vous voulez styler.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.

Une déclaration CSS se termine toujours par un point-virgule, et les blocs de déclaration sont entourés par des accolades.

Dans l'exemple suivant tous les éléments <p> seront alignés au centre, et écrits en rouge:

p {
    color: red;
    text-align: center;
}

Les sélecteurs

Les sélecteurs CSS sont utilisés pour « trouver » (ou sélectionner) des éléments HTML en fonction de leur nom d'élément, id, classe, attribut, et plus encore.

Le sélecteur d'élément

Le sélecteur d'élément sélectionne des éléments basés sur le nom de l'élément.

Vous pouvez sélectionner tous les éléments <h2> sur une page web. Ci-dessous tous les titres de niveaux 2 de la page web seront centrés et écrits en rouge :

h2 {
    color: red;
    text-align: center;
}

Le sélecteur id

Le sélecteur de id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.

L'identifiant d'un élément doit être unique dans une page, de sorte que le sélecteur de id est utilisé pour sélectionner un élément unique!

Pour sélectionner un élément avec un id spécifique, écrire un dièse (#), suivi par l'identifiant de l'élément.

La règle de style ci-dessous sera appliqué à l'élément HTML <p id="para1">...</p>:

#para1 {
  text-align: center;
  color: red;
}

Le sélecteur class

Le sélecteur de classe sélectionne tous les éléments avec l'attribut class spécifique.

Pour sélectionner des éléments avec une classe spécifique, écrire un point (.), Suivi du nom de la classe.

Dans l'exemple ci-dessous, tous les éléments HTML avec class="center" seront rouge et alignés au centre:

.center {
  text-align: center;
  color: red;
}

Il est également possible d'affecter à des éléments HTML spécifiques une classe.

Dans l'exemple ci-dessous, seulement les éléments <p> avec class="center" seront alignés au centre:

p.center {
  text-align: center;
  color: red;
}

Les éléments HTML peuvent également se référer à plus d'une classe.

Dans l'exemple ci-dessous, l'élément <p> sera stylé selon la class "center" et la class "large":

<p class="center large">Ce paragraphe fait référence à deux classes.</p>

Regroupement de sélecteurs

Si vous avez des éléments avec les mêmes définitions de style, comme ceci:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Il sera préférable de regrouper les sélecteurs, pour réduire au minimum le code.

Pour grouper les sélecteurs, séparer chaque sélecteur par une virgule.

Dans l'exemple ci-dessous, nous avons regroupé les sélecteurs du code ci-dessus:

h1, h2, p {
  text-align: center;
  color: red;
}

Exercice pour apprendre tous les selecteurs CSS

Les commentaires

Les commentaires sont utilisés pour expliquer le code, et peuvent aider lorsque vous modifiez le code source à une date ultérieure.

Les commentaires sont ignorés par les navigateurs.

Un commentaire CSS commence par /* et se termine par */. Les commentaires peuvent également s'étendre sur plusieurs lignes:

p {
  color: red;
  /* Ceci est un commentaire */
  text-align: center;
}

/* Ceci est
un commentaire
sur plusieurs ligne */

Comment ça marche ?

Quand un navigateur lit une feuille de style, il forme le document HTML en fonction de l'information contenu dans la feuille de style.

Trois façons d'insérer CSS

Feuille de style externe

Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site Web entier en changeant un seul fichier!

Chaque page doit inclure une référence au fichier externe de feuille de style à l'intérieur du <link>. L'élément <link> va dans la section <head>:

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

Une feuille de style externe peut être écrite dans un éditeur de texte. Le fichier ne doit pas contenir de balises HTML. Le fichier de feuille de style doit être enregistré avec une extension .css.

Feuille de style interne

Une feuille de style interne peut être utilisé si une seule page a un style unique.

Les styles internes sont définis dans l'élément <style>, à l'intérieur de la section <head> d'une page HTML:

<head>
<style>
body {
    background-color: linen;
}

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

Le style en ligne (inline)

Un style en ligne peut être utilisé pour appliquer un style unique pour un seul élément.

Pour utiliser les styles en ligne, ajoutez l'attribut de style à l'élément concerné. L'attribut de style peut contenir toute propriété CSS.

L'exemple ci-dessous montre comment changer la couleur et la marge gauche d'un élément <h1> :

<h1 style="color:blue;margin-left:30px;">Ceci est un titre</h1>

Le modèle de boîte

Le modèle de boîte CSS est le fondement de la mise en page sur le Web - chaque élément est représenté sous la forme d'une boîte rectangulaire, avec dans l'ordre :

Ces boîtes sont construites autour de la précédente comme les couches d'un oignon.
Schéma explicatif de la construction d'une boîte CSS

La taille et l'aspect de chaque "couche d'oignon" peuvent être modifiés en utilisant certaines propriétés CSS spécifiques. Les propriétés sont les suivantes:

Largeur et hauteur

Les propriétés width et height définissent la largeur et la hauteur de la zone de contenu, qui est la zone dans laquelle le contenu de la boîte est affiché - ce contenu inclut à la fois le contenu texte placé à l'intérieur de la boîte, et d'autres boîtes enfants représentant les éléments imbriqués à l'intérieur de la boîte parente.

/* Valeur absolue */
width: 300px;
width: 25em;

/* Valeur en pourcentage du parent */
width: 75%;

/* Valeur raccourcie */
height: auto;

/* Valeur absolue */
height: 120px;
height: 10em;

/* Valeur en pourcentage du parent */
height: 75%;

Marge intérieure

Le padding correspond à la marge intérieure d'une boîte CSS - la couche située entre le bord extérieur de la zone de contenu et le bord intérieur de la bordure. La taille de cette couche peut être réglée sur les quatre côtés à la fois avec le raccourci padding, ou d'un côté à la fois avec les propriétés padding-top, padding-right, padding-bottom et padding-left.

/* Applique aux quatre côtés */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em; 

/* top | right | bottom | left */
padding: 2px 1em 0 1em;

/* Valeurs global */
padding: inherit;
padding: initial;
padding: unset;

Bordure

Le border d'une boîte CSS est une couche à part, située entre la frontière extérieur du padding et la frontière intérieure du margin. Par défaut la bordure a une taille de 0 - la rendant invisible - mais vous pouvez régler l'épaisseur, le style et la couleur de la bordure pour la faire apparaitre. La propriété border vous autorise à définir tout cela dans la même déclaration CSS, par exemple : border: 1px solid black;. Cela peut être surchargé par les propriétés plus spécifiques suivantes :

border: 1px;
border: 2px dotted;
border: medium dashed green;

Marge extérieure

Le margin représente la zone externe entourant la boîte de CSS, elle touche les autres boîtes CSS dans la mise en page. Il se comporte un peu comme le padding; la propriété raccourcie est margin et les propriétés individuelles sont margin-top, margin-right, margin-bottom, and margin-left

Remarque: Les marges ont un comportement appelé marge d'éffondrement spécifique (margin collapsing): Lorsque deux boîtes se touchent l'une contre l'autre, la distance entre elles est la valeur de la plus grande des deux marges qui se touche, et non pas leur somme.
/* Appliqué sur les quatres côtés */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Valeurs global */
margin: inherit;
margin: initial;
margin: unset;

Débordement

Lorsque vous définissez la taille d'une boîte avec des valeurs absolues (par exemple une largeur / hauteur de pixel fixe), le contenu peut ne pas correspondre à la taille autorisée, dans ce cas, le contenu déborde de la boîte. Pour contrôler ce qui se passe dans de tels cas, nous pouvons utiliser la propriété overflow. Il existe plusieurs valeurs possibles, mais les plus courantes sont:

Les propriétés CSS de texte

Les couleurs

Manipuler les couleurs avec W3Schools

Vous pouvez définir la couleur d'un texte avec la déclaration CSS suivante :

Déclaration CSS

color: value;

Valeurs possible

L'espacement des lettres

Vous pouvez ajuster l'espace entre les lettres de la manière suivante. Régler la valeur à 0, empêche le texte de justifier. Vous pouvez utiliser des valeurs négatives.

Déclaration CSS

letter-spacing: value;

Valeurs possible

Exemple

p {
  letter-spacing: 5px;
}

Ces lettres sont espacées de 5 pixels.

L'alignement

Vous pouvez aligner un texte avec la déclaration CSS suivante :

Déclaration CSS

text-align: value;

Valeurs possible

Exemple

Texte aligné à gauche

Texte aligné à droite

Texte centré

Texte justifié

Décoration

Vous pouvez décorer le texte avec la déclaration CSS suivante :

Déclaration CSS

text-decoration: value;

Valeurs possible

Exemple

Ce texte est souligné

Ce texte est surligné

Ce texte est barré

Ce texte clignote (pas sur Internet Explorer)

Indentation

Vous pouvez indenter la première ligne d'un texte dans un élément HTML avec la déclaration CSS suivante :

Déclaration CSS

text-indent: value;

Valeurs possible

Exemple

p {
  text-indent: 50px;
}

Ce texte est indenté de 50 pixels sur la première ligne. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Transformation

Vous pouvez contrôler la taille des lettres dans un élément HTML avec la déclaration CSS suivante :

Déclaration CSS

text-transform: value;

Valeurs possible

Exemple

La première lettre de chaque mot est en capital.

Tout ce texte est en minuscule.

Tout ce texte est en majuscule.

Espace blanc

Vous pouvez contrôler les espaces blancs dans un élément HTML avec la déclaration CSS suivante :

Déclaration CSS

white-space: value;

Valeurs possible

Espace entre les mots

Vous pouvez contrôler les espaces entre les mots dans un élément HTML. Vous pouvez utiliser des valeurs négatives.

Déclaration CSS

word-spacing: value;

Valeurs possible

Exemple

Ces mots sont espacés de 30 pixels

Les propriétés CSS de police

Police

La propriété font peut définir le style, le poids, la variante, la taille, la hauteur de la ligne et la police:

Déclaration CSS

font: font-style font-variant font-weight font-size/line-height font-family;

Exemple

La déclaration CSS ci-dessous indique un texte formaté avec un style italique (italic), un poids gras (bold), variante normale (normal), une taille relative(small/), d'une hauteur de ligne de 1.4em et la police à Verdana ou une autre sans-serif (Verdana, sans-serif).

font: italic bold normal small/1.4em Verdana, sans-serif;

Paragraphe avec le style ci-dessus appliqué.

Famille de police

Vous pouvez définir quelle police sera affichée dans un élément avec la propriété font-family.

Il y a 2 choix pour les valeurs:

Si vous définissez un nom de famille, il est préférable d'ajouter également la famille générique à la fin. Comme si ceci était une liste priorisée. Donc, si le navigateur n'a pas le nom de la police spécifiée, il utilisera la même famille générique. (voir ci-dessous)

Déclaration CSS

 font-family: Verdana, sans-serif;

Valeurs possible

Exemple

Ceci est un paragraphe écrit en Arial.

Ceci est un paragraphe écrit en Time New Roman.

Ceci est un paragraphe écrit en Pacifico. (Google Font Pacifico)

Taille de police

Vous pouvez définir la taille du texte utilisé dans un élément en utilisant la propriété font-size.

Déclaration CSS

 font-size: value;

Valeurs possible

Exemple

a b c d e f g h i j k l m n o p q r s t u v w x y z

Style de police

Vous pouvez définir le style du texte dans un élément avec la propriété font-style.

Déclaration CSS

font-style: value;

Valeurs possible

Exemple

Ceci est un paragraphe, normal

Ceci est un paragraphe, italic

Ceci est un paragraphe, oblique

Variante de police

Vous pouvez définir la variante de texte dans un élément avec la propriété font-variant.

Déclaration CSS

font-variant: value;

Valeurs possible

Poids de police

Vous pouvez contrôler le poids du texte dans un élément avec la propriété font-weight:

Déclaration CSS

font-weight: value;

Valeurs possible

Cascades de styles

Quel style sera utilisé quand il y a plus d'un style spécifié pour un élément HTML?

D'une manière générale, nous pouvons dire que tous les styles seront "mis en cascade" dans une nouvelle feuille de style "virtuel" par les règles suivantes, où le numéro un a la plus haute priorité:

  1. style de ligne (dans un élément HTML)
  2. feuilles de style externes et internes (dans la section de l'en-tête HTML)
  3. navigateur par défaut

Donc, un style en ligne (dans un élément HTML spécifique) a la plus haute priorité, ce qui signifie qu'il va remplacer un style défini dans la balise <head>, ou dans une feuille de style externe, ou une valeur navigateur par défaut.

Ressources utilsées :