Un titre
Lorem ipsum, dolor sit amet consectetur adipisicing elit
1/ CSS: Introduction
Retour
1/ CSS: Introduction
Apprendre à styliser vos pages web en utilisant le CSS.
Cet article explique ce qu'est le CSS à l'aide d'exemples de syntaxe simple et couvre également quelques-uns des termes clés du langage.
Dépot GITHUB
Prérequis
Il est conseillé d'avoir suivi le tutoriel:
HTML: Initiation.
Qu'est-ce que CSS ?
CSS: (Cascading Style Sheetsou ou "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web.
Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme.
Par exemple, pour modifier la police, la disposition, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs.
Comment ça marche?
Le traitement se fait en plusieurs phases que nous détaillons ci-dessous:
- Le navigateur charge le HTML (par exemple, il le reçoit à travers le réseau).
- Il traduit le HTML en un DOM (Document Object Model) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section.
- Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page, et la feuille CSS externe. JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation.
- Le navigateur parse le CSS, classe les différentes règles par types de sélecteur (par exemple, élément, classe, ID, etc.) dans des « buckets ». En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM.
- Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'arbre de rendu (render tree).
- Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle « painting »).
À propos du DOM
Chaque élément, ainsi que ses attributs et son texte est traduit en un nœud du DOM dans une structure en arbre.
Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les parents de nœuds enfants (child nodes) et les nœuds enfants peuvent avoir des frères et sœurs (siblings):
Par exemple, partons du code ci-dessous :
<article>
<h1>Un titre</h1>
<p>
Lorem ipsum, dolor sit amet <strong>consectetur</strong> adipisicing elit
</p>
</article>
Dans le DOM, le nœud correspondant à l'élément <article> est un parent. Ses enfants (children) sont les nœuds <h1> et <p>.
Le nœud <h1> et le nœud <p> sont considérées comme frères/soeurs (siblings).
Le nœud <h1> possède un unique enfant, un nœud texte.
Le nœud <p> est aussi un parent, avec pour enfants les nœuds associés au texte et le nœud <strong>, qui lui-même est parent d'un nœud texte.
Comprendre le DOM vous aidera à concevoir, déboguer et maintenir votre CSS, car le DOM est le point de jonction entre CSS et le contenu HTML du document.
Avec les DevTools de votre navigateur, vous pourrez naviguer à travers le DOM en sélectionnant les éléments pour les inspecter et voir quelles règles s'appliquent sur eux.
1/ Comment CSS est structuré
Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement.
Il est temps d'explorer la structure du langage lui-même. Prenons ce simple code HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS: Initiation</title>
</head>
<body>
<article>
<h1>Un titre</h1>
<p>Lorem ipsum, dolor sit amet <strong>consectetur</strong> adipisicing elit</p>
</article>
</body>
</html>
Il existe trois méthodes pour appliquer du CSS à un document:
1.1/ Style en ligne
Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut style:
<h1 style="color:rgb(34, 29, 171); font-size:40px;">Un titre</h1>
Un titre
Lorem ipsum, dolor sit amet consectetur adipisicing elit
Dans l'attribut style, on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété: valeur;.
Chaque paire précise une propriété de l'élément, suivie de la valeur choisie pour cette propriété:
- Propriétés : des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (font-size, width, background-color, par exemple) que vous souhaitez modifier.
- Valeurs : une valeur est attribuée à chaque propriété spécifiée. Elle indique comment modifier ces caractéristiques stylistiques.
La propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule.
À chaque propriété définie par CSS correspondent différentes valeurs possibles. Dans l'exemple:
- la propriété
colorpeut prendre différentes valeurs (rgb, hex...), et permet de modifier la couleur d'un texte. - La propriété
font-sizeaccepte différentes tailles comme valeurs, et permet de changer la taille de la police d'un texte. Dans notre exemple, nous avons utilisé des pixels en unité.
De manère générale, cette approche est vraiment à proscrire. Le code produit n'est pas maintenable.
Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile.
1.2/ Feuille de style interne
Les règles CSS peuvent être écrites directement dans l'en-tête HTML <head> dans un élément <style>. On parle alors de feuille de style interne.
<style>
/*Sélecteur de la balise article */
article{
/*Propriétes et valeurs appliquer a la balise article */
background-color: rgb(200, 200, 200);
border: 2px solid rgb(23, 215, 16);
}
/*Sélecteur de la balise p */
p{
/*Propriétes et valeursr appliquer a la balise p */
color:rgb(215, 16, 16);
font-size: 25px;
}
</style>
CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.
La règle commence par un sélecteur, les éléments HTML mis en forme.
Ici, le style s'applique aux articles (<article>) et paragraphes (<p>).
Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme de paire propriété: valeur.
- la propriété
background-colorpermet de changer la couleur de fond d'un élément. - La propriété
border: Permet d'ajouter une bordure à un élément. Sa valeur est divisée en trois parties:- La taille de la bordure, ici 2 pixels.
- Le style de la couleur, ici unie.
- La couleur de la bordure.
1.2/ Feuille de style externe
de manière générale, séparer le style dans un fichier dédié est la meilleur solution. Cette technique permet, par exemple, de réutiliser les règles CSS dans d'autres page, et éviter la duplication de code.
nous allong créer un fichier styles.css, notre structure de dossier ressemble a ceci:
📦1.css-introduction
┣ 📜styles.css
┗ 📜index.html
On doit signaler au document HTML que nous souhaitons utiliser des règles CSS présentent dans un autre fichier, pour cela nous allons ajouter a la section <head>, la balise <link> qui permet de lier le fichier styles.css et index.html
<link rel="stylesheet" href="./styles.css">
Dans notre fichier styles.css, ajoutons les règles suivantes:
strong{
text-decoration: underline;
color: rgb(141, 12, 141);
}
Un titre
Lorem ipsum, dolor sit amet consectetur adipisicing elit
La propriété permet de modifier l'apparence du texte (barré, souligné...).
Conclusion
Maintenant que vous avez compris ce qu'est CSS et comment il fonctionne, nous pouvons aller à l'étape suivante, ou nous allons voire les différents sélécteurs et comment ils fonctionnent.
Aller plus loin
1
