Réaliser un style CSS

Cette page HTML a été rédigée de manière à vous donner un exemple concret mais simple de page HTML avec un style CSS.

Vous pouvez voir le code de la page avec le raccourci Ctrl + u. Vous pouver voir le fichier CSS de cette page en cliquant ici. De plus, le raccourci Ctrl + Shift + I affiche un outil d'inspection du code.

Vous pouvez annuler le style CSS en cliquant .

Le fichier CSS

Un fichier CSS indique le style de plusieurs pages d'un même site. Dans chacune des pages HTML qui utilisent un style CSS, il faut indiquer au navigateur que le style doit s'appliquer à la page. Cela se fait par la balise non-englobante link à laquelle il faut donner deux paramètres : le paramètre rel avec la valeur stylesheet et le paramètre href avec l'adresse du fichier qui contient le style CSS. La balise link doit se trouver à l'intérieur de la balise head

Exemple :

La page actuelle contient la balise suivante dans son en-tête :

<link id="css-style" rel="stylesheet" href="styles.css" />

Le parmètre supplémentaire id est utilisé pour désactiver le style CSS.

Le sélecteur

Un fichier CSS est constitué de plusieurs blocs. Chaque bloc commence par un sélecteur, suivi d'une accolade { suivie d'une ou plusieurs lignes d'attributs et terminé par une accolade }.

Le sélecteur indique à quelles parties des page HTML s'appliquent les attributs qui suivent.

Le sélecteur le plus simple consiste en un nom de balise.

Exemple :

Le code CSS suivant indique que tous les paragraphes doivent être écrits en rouge.

p {
    color: red;
}

Il arrive souvent que l'on veuille des styles différents lorsque la même balise est utilisée pour des choses différentes. On peut distinguer les balises en leur ajoutant un paramètre class auquel on donne le nom de notre choix. On utilise alors le même nom dans le fichier CSS, après le nom de la balise suivi par un point.

Exemple :

Si on a le code HTML suivant :

<p class="un">Premier paragraphe.</p>
<p class="deux">Second paragraphe.</p>

Et qu'on utilise le style CSS suivant :

p.un {
    color: red;
}
p.deux {
    color: blue;
}

Alors, le premier paragraphe sera écrit en rouge et le second en bleu.

Vous pouvez trouver plus d'informations sur les sélecteurs sur le site de Mozilla.

Les couleurs

Deux attributs permettent de changer la couleur :

color: Change la couleur d'écriture.
background-color: Change la couleur du fond.

Les couleurs sont représentées soit par un nom en anglais comme red ou blue, soit par un code composé d'un dièse # suivi de 6 caractères. Pour déterminer un tel code, vous pouvez utiliser ce site.

Exemple :

Le style CSS suivant affiche un fond violet foncé à tous les paragraphes.

p {
    background-color: #99004d;
}

L'écriture des caractères

Les attributs suivants permettent de changer l'écriture du texte. Vous pouvez cliquer sur le nom d'un attribut pour avoir plus d'informations.

font-size: La taille de l'écriture.
font-family: La police utilisée.
font-style: Pour écrire en italique.
font-weight: Pour écrire en gras.

Dimensionner les images

Pour fixer les dimensions d'une image, vous pouvez utiliser les attributs suivants.

width: Fixe la largeur de l'élément.
height: Fixe la hauteur de l'élément.
object-fit: Indique comment l'image doit être transformée pour avoir la taille demandée.

Les bordures

Les attributs suivants permettent de tracer une bordure autour des éléments.

border-top, border-right, border-bottom et border-left: Indique comment tracer la bordure du haut, de droite, du bas et de gauche.
border-radius: Permet de faire des coins arrondis.

Les espaces

Il y a deux types d'espace autour d'un élément : la marge qui est à l'extérieur de la bordure et l'espace intérieur qui est à l'intérieur de la bordure.

margin-top, margin-right, margin-bottom et margin-left: Indique la marge du haut, de droite, du bas et de gauche.
padding-top, padding-right, padding-bottom et padding-left: Indique l'espace intérieur du haut, de droite, du bas et de gauche.