Un titre
Lorem ipsum, dolor sit amet consectetur adipisicing elit
Retour
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
Il est conseillé d'avoir suivi le tutoriel:
HTML: Initiation.
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.
Le traitement se fait en plusieurs phases que nous détaillons ci-dessous:
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.
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:
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>
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é:
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:
color
peut prendre différentes valeurs (rgb, hex...), et permet de modifier la couleur d'un texte.font-size
accepte 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.
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
.
background-color
permet de changer la couleur de fond d'un élément.border
: Permet d'ajouter une bordure à un élément. Sa valeur est divisée en trois parties:
Lorem ipsum, dolor sit amet consectetur adipisicing elit
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);
}
Lorem ipsum, dolor sit amet consectetur adipisicing elit
La propriété permet de modifier l'apparence du texte (barré, souligné...).
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.