DEVELOPPEMENT WEB :

PRESENTATION DU CSS

Membres du groupe : Professeur :

CONOMBO Wendkuni Assetou M. DIENG Abdoulaye
DABGO Pougwendé Ariane Elodie
DAOUDA Nazir Iyabo Olatoyossi
DIAKHATE Mohamed Bassirou

1
PLAN
1. Présentation du CSS
1.1. Définition
1.2. Historique
2. Concepts
2.1. Sélecteur CSS
2.2. Propriété CSS
2.3. Valeur CSS
2.4. Règle CSS
2.5. Application du CSS
2.6. Sélecteur de type
2.7. Sélecteur d’attribut
2.8. Sélecteur d’identificateur
2.9. Sélecteur de classe
2.10. Combinateurs
2.11. Modèle de boîte
2.12. Positionnement Flexbox
2.13. Références

2
 1. Présentation du CSS
1.1. Définition
Le sigle CSS signifie Cascading Style Sheet autrement dit en français, feuille de
styles en cascade. Cela indique bien que les CSS permettent de styler, de mettre
en forme une page web.
Le langage CSS est destiné à gérer le contenu et la structure d’une page web. Il
est techniquement possible de faire la mise en forme en HTML, mais les
possibilités restent très limitées. Le langage CSS est donc là pour étendre
considérablement les possibilités graphiques.

1.2Historique
CSS1 : Début 1995, le W3C (WWW Consortium) devient opérationnel. Au
mois de mais1995, pour développer les feuilles de style, il crée une équipe
qui publie en novembre 1995 le projet « draft» devenu une
« recommandation » du W3C sous le nom de CSS1. Sa spécification finale
est publiée le 17 décembre 1996 et définit une cinquantaine de propriétés.

CSS 2 : Au début de 1997, le W3C crée un groupe de travail dédié aux feuilles
de style. Un complément (appelé CSS 2) est mis en chantier et une première
proposition est publiée par le W3C en novembre 1997. En 2001, les retours
d’implémentation de CSS2 conduisent le groupe de travail du W3C à rédiger
une version révisée (CSS 2.1) sur la base de ce qui était effectivement
adopté par les navigateurs.

CSS 3 : Le développement du troisième niveau des feuilles de styles en

cascade commence dès 1999, parallèlement à celui de CSS 2.1

CSS 4 : L’écriture du quatrième niveau des feuilles de styles en cascade

débute parallèlement à celui de CSS2.1

2. Concepts du CSS
2.1. Sélecteur CSS
Un sélecteur est un modèle qui cible un ou plusieurs éléments HTML spécifiques
auxquels vous souhaitez appliquer le style. Le sélecteur peut être le nom de

3
l'élément (ex. p pour les paragraphes), une classe (ex. .ma-classe pour tous les
éléments avec la classe "ma-classe") ou un ID (ex. #mon-id pour l'élément avec
l'identifiant "mon-id").
CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très
fine dans la façon de cibler les éléments. Nous les aborderons dans la suite.

2.2. Propriété
Une propriété CSS est une caractéristique (telle que color) dont la valeur
associée définit un aspect de la manière dont le navigateur doit afficher
l’élément. Elle désigne au navigateur ce qu'il faut modifier. Les propriétés se
mettent entre les crochets. Nous distinguons plusieurs types de propriétés.
Propriétés de texte :
color : Définit la couleur du texte.
font-family : Définit la police de caractères utilisée.
font-size : Définit la taille de la police.
font-weight : Définit l'épaisseur de la police (gras ou normal).
text-align : Définit l'alignement horizontal du texte (left, right, center, justify).
text-decoration : Définit la décoration du texte (souligné, barré, etc.)…
Propriétés de fond :
background-color : Définit la couleur de fond de l'élément.
background-image : Définit l'image de fond de l'élément.
background-repeat : Définit la répétition de l'image de fond.
background-size : Définit la taille de l'image de fond.
background-position : Définit la position de l'image de fond.
Propriétés de bordure :
border : Définit les propriétés de la bordure (épaisseur, style, couleur).
border-radius : Définit le rayon des coins arrondis de l'élément.
Propriétés de dimensionnement :
width : Définit la largeur de l'élément.
height : Définit la hauteur de l'élément.
margin : Définit la marge autour de l'élément.
padding : Définit l'espacement à l'intérieur de l'élément.
Propriétés de positionnement :
position : Définit le type de positionnement de l'élément (relative, absolute,
fixed, static).

4
top, right, bottom, left : Définissent la position de l'élément par rapport à son
conteneur ou à la fenêtre du navigateur.

2.2. Valeur
Les valeurs CSS sont des données utilisées pour définir les styles et les propriétés
visuelles des éléments HTML sur une page web. Un ensemble de propriétés et
de valeurs séparées par des points-virgules est appelé bloc de déclaration. Voici
une liste de certaines des valeurs CSS couramment utilisées pour différentes
propriétés :
Valeurs de longueur :
em : taille de police relative à l'élément parent
rem : taille de police relative à la racine du document (html)
vw : 1% de la largeur de la fenêtre d'affichage
vh : 1% de la hauteur de la fenêtre d'affichage
% : pourcentage de la taille de l'élément parent
Valeurs de couleur :
hex : valeurs hexadécimales (#RRGGBB)
rgb : valeurs RVB (rouge, vert, bleu) (rgb(255, 0, 0))
rgba : valeurs RVB avec transparence (rgba(255, 0, 0, 0.5))
Noms prédéfinis : "red", "blue", "green", etc.
Valeurs booléennes :
true / false : valeurs booléennes, parfois utilisées dans des propriétés comme
display, visibility, etc.
Valeurs pour le positionnement :
static : positionnement par défaut
relative : positionnement relatif
absolute : positionnement absolu
fixed : positionnement fixe
Valeurs pour la gestion du texte :
normal : style de police par défaut ;
bold : style de police gras ;
italic : style de police italique ;
…

5
 2.3. Règles de CSS
Une règle CSS est une structure composée d'un sélecteur et d'un bloc de
déclarations. La règle est utilisée pour définir comment les éléments HTML
correspondants doivent être stylisés.
Voici une représentation générale d’une règle CSS :

Voici un exemple concret :

2.4. Application du CSS

Incorporer un code CSS directement dans un fichier HTML est une pratique
courante et utile pour plusieurs raisons : facilité de gestion, portabilité, rapidité
de chargement etc.
Pour incorporer du code CSS dans un document HTML, vous avez plusieurs
options, mais la méthode la plus courante consiste à utiliser la balise <style>
dans l'en-tête (head) de votre fichier HTML. Voici comment procéder :
- Créez votre fichier HTML et ouvrez-le avec un éditeur de texte ou un éditeur
de code.
- Dans la section <head> de votre fichier HTML, ajoutez une balise <style>. Cela
permettra d'inclure votre code CSS directement dans le document.
À l'intérieur de la balise <style>, écrivez votre code CSS. Par exemple :

6
CSS permet de contrôler l'apparence des éléments d'une page web, tels que les
couleurs, les polices de caractères, les marges, les alignements, etc. Voici
quelques exemples courants d'application du CSS :
 Stylisation du texte : Vous pouvez utiliser CSS pour définir différentes
propriétés de texte comme la couleur, la taille, le style de police, le
soulignement, la mise en italique, etc. Exemple.

 Mise en forme des éléments : CSS permet de modifier l'apparence de

différents éléments HTML en ciblant leurs balises, leurs identifiants ou
leurs classes.

7
 Positionnement des éléments : CSS permet de contrôler le
positionnement des éléments sur une page, que ce soit en utilisant des
marges, des positions absolues ou relatives, etc.

 Création d'effets spéciaux : CSS permet de créer des animations, des

transitions, des ombres, des dégradés et d'autres effets visuels pour
rendre le contenu de la page plus interactif et attrayant.

8
 2.5. Sélecteur de type

Un sélecteur de type en CSS permet de cibler tous les éléments d'un type
spécifique dans votre page HTML. Pour voir plus clair, voici un exemple donné.

Dans cet exemple, nous avons utilisé un sélecteur de type p pour cibler tous les
éléments de paragraphe (<p>) dans le document. Les propriétés CSS définies
dans le style seront appliquées à tous les paragraphes de la page.

9
Ainsi, tous les paragraphes du document auront un texte en bleu, une taille de
police de 18 pixels et seront affichés en utilisant la police de caractères Arial (ou
une police sans-serif par défaut si Arial n'est pas disponible).
Les sélecteurs de type sont très utiles lorsque vous souhaitez appliquer un style
à tous les éléments d'un type particulier dans votre page sans avoir à attribuer
des classes ou des identifiants à chacun d'eux.

2.6. Sélecteur d’attribut

Un sélecteur d'attribut en CSS permet de cibler des éléments HTML qui ont un
attribut spécifique ou un attribut avec une valeur particulière. Cela vous permet
de styliser des éléments en fonction de leurs attributs.
Syntaxe :

élément : C'est le nom de l'élément HTML que vous souhaitez cibler. Par
exemple, a pour les liens, img pour les images, input pour les champs de saisie,
etc.
attribut : C'est le nom de l'attribut de l'élément que vous souhaitez cibler. Par
exemple, href pour les liens, src pour les images, type pour les champs de saisie,
etc.
"valeur" : C'est la valeur spécifique de l'attribut que vous souhaitez cibler. Vous
pouvez utiliser des guillemets simples ou doubles autour de la valeur si
nécessaire.
Les exemples :
1. Pour cibler tous les liens (<a>) avec un attribut « target » :

2. Pour cibler toutes les images (<img>) avec un attribut alt contenant le mot
"chat" :

10
 3. Pour cibler tous les champs de saisie (<input>) de type "text" :

2.7. Sélecteur d'identificateur

Le sélecteur d'identificateur est utilisé pour cibler un élément HTML spécifique

en fonction de son attribut 'id'.
L'attribut 'id' est utilisé pour donner un identifiant unique à un élément, ce qui
signifie qu'un même identifiant ne peut être utilisé que pour un seul élément sur
une page HTML.
Le sélecteur d'identificateur est précédé d'un symbole dièse ('#') suivi de
l'identifiant de l'élément que vous souhaitez cibler.

Voici un exemple de syntaxe :

Dans cet exemple, tous les éléments ayant l'attribut <id="mon-element">

recevront les styles spécifiés dans le bloc CSS.

Voici un exemple HTML:

11
Dans cet exemple, le texte à l'intérieur de la balise '<div>' sera stylisé selon les
règles spécifiées dans le sélecteur d'identificateur CSS (#mon-element).

2.8. Sélecteur de classe

Le sélecteur de classe est utilisé pour cibler un ou plusieurs éléments HTML qui
partagent la même classe.
Contrairement à l'identificateur qui est unique pour un seul élément, la classe
peut être utilisée pour plusieurs éléments dans une page HTML.
Le sélecteur de classe est précédé d'un point <.> suivi du nom de la classe que
vous souhaitez cibler.

Voici un exemple de syntaxe :

12
Dans cet exemple, tous les éléments ayant la classe nom-de-classe recevront les
styles spécifiés dans le bloc CSS.
Pour appliquer cette classe à un élément HTML, vous devez ajouter l'attribut
'class' à l'élément avec la valeur correspondant au nom de la classe.
Voici comment cela peut être fait dans le code HTML :

Dans cet exemple, le premier paragraphe sera stylisé en bleu avec une taille de
police de 16px car il a la classe "ma-classe".
Le deuxième paragraphe n'a pas cette classe et ne sera donc pas affecté par le
CSS spécifié pour ".ma-classe".
Les sélecteurs de classe sont largement utilisés en CSS car ils permettent de
réutiliser facilement des styles sur plusieurs éléments, ce qui facilite la
maintenance et la cohérence de la mise en page sur le site web.
De plus, on peut également cibler un élément appartenant à plus d'une classe
de CSS.
13
Pour cibler un élément HTML qui appartient à plusieurs classes en CSS, on peut
simplement concaténer les noms des classes dans le sélecteur, sans espace entre
eux. Cela indique que l'élément doit appartenir à toutes les classes spécifiées
pour être ciblé.

Voici la syntaxe pour cibler un élément appartenant à plusieurs classes :

Dans cet exemple, seuls les éléments qui ont à la fois la classe "classe1" et la
classe "classe2" recevront les styles spécifiés dans le bloc CSS.

Exemple d'utilisation en HTML :

14
Dans cet exemple, le premier paragraphe est le seul à avoir à la fois les classes
"rouge" et "gras", donc il sera stylisé en rouge et en gras.
Les autres paragraphes n'ont pas les deux classes ensemble, donc ils ne
recevront pas les styles spécifiés pour .rouge.gras.

2.9. Les combinateurs

Les combinateurs sont des opérateurs qui permettent de cibler des éléments
HTML en fonction de leur relation avec d'autres éléments.
Plus simplement, le combinateur va permettre d’associer plusieurs sélecteurs
afin d’appliquer une valeur spécifique sur un élément précis.
On distingue quatre types de combinateurs :

Combinateur descendant ou Sélecteurs Contextuels (' ')ou('espace')

Le combinateur descendant— en général représenté par un seul espace ( ) —

combine deux sélecteurs de sorte que les éléments choisis par le second
sélecteur sont sélectionnés s’ils ont un élément ancêtre (parent, parent de
parent, parent de parent de parent, etc…) qui correspond au premier sélecteur.
Exemple :

Supposons qu’on veuille changer uniquement la couleur des 'li' de la deuxième

liste.
15
 li {color: red;}
Ceci ne marchera pas, car elle change la couleur des 'li' dans les deux listes.
On utilisera un sélecteur composé de deux sélecteurs simples :
#liste2 li {color: red;}
L’espace entre '#liste2' et 'li' est très important car il veut dire <descendant de>.
Donc '#liste2 li' ici veut dire “tous les li qui sont descendants de '#liste2'.

Autre Exemple :
.HTML :
<div>
<p>Je suis un paragraphe à l'intérieur d'un élément div </p>
<div>
<p>Je suis un autre paragraphe à l'intérieur d'un élément
div qui fait partie lui-même du premier élément div</p>
</div>
</div>

.CSS :
div p{
background-color: purple;
color: white;
}

div>>p{

16
 Les combinateurs enfants ('>')

Le combinateur enfant ('>') est placé entre deux sélecteurs CSS. Il cible
uniquement les éléments correspondant au second sélecteur qui sont les
enfants directs des éléments correspondants au premier.
Les éléments descendants plus bas dans la hiérarchie ne correspondent pas.
Autrement dit, permet de sélectionner des éléments qui sont des enfants directs
d'un autre élément spécifié.
Par exemple, pour sélectionner uniquement les éléments <p> qui sont des
enfants directs des éléments <article> on a :

Autre exemple :

17
 Les combinateurs frères adjacents ou combinateurs directs (+)
Il permet de sélectionner un élément qui suit immédiatement un autre élément
spécifié.
Les sélecteurs de voisin direct sont représentés par le combinateur '+'.

18
Par exemple, pour cibler tous les paragraphes ('<p>') qui suivent immédiatement
un titre de niveau 2
('<h2>'), on peut utiliser le combinateur + comme ceci :

Autre exemple :

19
 -Combinateur général de frères ou combinateur voisin général (~)
Il permet de sélectionner des éléments qui suivent un autre élément spécifié,
peu importe leur position.

Par exemple, pour cibler tous les paragraphes ('<p>') qui suivent un titre de
niveau 2 ('<h2>'),
on peut utiliser le combinateur '~' comme ceci :

Autre exemple :

20
21
 2.11. Modèle de boite

Le modèle de boîte (box model en anglais) en CSS est un concept important qui
définit la façon dont les éléments HTML sont rendus dans une page web. Chaque
élément HTML est considéré comme une boîte rectangulaire avec quatre
couches :
-le contenu (content)
-la bordure (border)
-le rembourrage (padding)
-la marge (margin)
Ces couches sont disposées autour du contenu de l'élément.
Description de chaque couche du modèle de boîte :
 Le contenu : C'est la partie interne de la boîte qui contient le texte, les
images ou autres éléments HTML enfants présents à l’intérieur de la boîte
en question.
Exemple : La taille du contenu peut être ajustée en utilisant les propriétés 'width'
et 'height' en CSS.
 Le rembourrage (ou marges internes) : Il s’agit d’une zone vierge créée à
l’intérieur de la boîte pour espace le contenu des bordures de la boîte en
question, manipulables avec la propriété CSS 'padding' et les propriétés
associées.
Exemple : 'padding-top','padding-right','padding-bottom' et 'padding-left'.
 La bordure : Les bordures correspondent aux traits qui encadrent la boîte,
manipulables avec la propriété CSS 'border' et les propriétés associées.
Exemple : la taille 'border-width' ; la couleur 'border-color' ;le style 'border-style'

 La marge (ou marges externes): Elle permet de déterminer une zone

vierge autour de la boîte qui permet ainsi d’espacer les boîtes les unes par
rapport aux autres, manipulables avec la propriété CSS 'margin' et les
propriétés associées.

22
Exemple : on peut définir la taille de la marge avec les propriétés 'margin-
top','margin-right','margin-bottom' et 'margin-left'.
3.2. Illustration de modèle de boîte :

Exemple codé du modèle de boîte :

Ce code définira un élément avec la classe "ma-boite" de 200px de large, 100px

de haut, avec un rembourrage de 20px autour du contenu, une bordure noire de
2px de large et une marge de 10px autour de la boîte.

23
+-----------------------------------------+
| Marge (margin) |
| |
| +---------------------------------+ |
| | Bordure (border) | |
| | | |
| | +-----------------------+ | |
| | | Rembourrage | | |
| | | | | |
| | | Contenu | | |
| | | | | |
| | +-----------------------+ | |
| | | |
| +---------------------------------+ |
| |
+-----------------------------------------+
En CSS,on distingue 2 types de modèle de boîte : les boîtes en bloc ("block
boxes") et les boîtes en ligne ("inline boxes")
Si une boîte est définie en bloc, elle suivra alors les règles suivantes :
La boîte s'étend en largeur pour remplir totalement l'espace offert par son
conteneur. Dans la plupart des cas, la boîte devient alors aussi large que
son conteneur, occupant 100% de l'espace disponible.

La boîte occupe sa propre nouvelle ligne et crée un retour à la ligne, faisant

ainsi passer les éléments suivants à la ligne d'après.

Les propriétés de largeur (width) et de hauteur (height) sont toujours

respectées.

24
 Les propriétés padding, margin et border (correspondantes
respectivement aux écarts de padding , à la marge et à la bordure de la
boîte) auront pour effet de repousser les autres éléments.
Si une boîte est positionnée en ligne, alors :

La boîte ne crée pas de retour à la ligne, les autres éléments se suivent

donc en ligne.
Les propriétés de largeur (width) et de hauteur (height) ne s'appliquent
pas.
Le padding, les marges et les bordures verticales (en haut et en bas)
seront appliquées mais ne provoqueront pas de déplacement des
éléments alentours.
Le padding, les marges et les bordures horizAontales (à gauche et à
droite) seront appliquées et provoqueront le déplacement des éléments
alentours.
Le type de boîte appliqué à un élément est défini par la valeur de la propriété
display tel que block ou inline, et se réfère à la valeur extérieure de
positionnement.

2.12. Positionnement Flexbox

Flexbox est une introduction à un nouveau modèle de boîte, avec ses règles et
fonctionnalités différentes du modèle de boîte historique en CSS. Il s’agit d’une
technique de mise en page en CSS qui permet de créer des designs plus flexibles
et réactifs pour les interfaces web.
 Architecture
Flexbox (ce modèle de boîte flexible, donc) se fonde schématiquement sur une
architecture de
ce type :
 Un flex-container créant le contexte général d’affichage pour ses
enfants ;

25
 C'est l'élément parent qui contient les éléments que vous souhaitez
organiser en flexbox https://lesdocs.fr/principales-proprietes-et-
valeurs-css/
 Des flex-item qui ne sont rien d’autre que les enfants directs du
conteneur, quels qu’ils soient.
Ce sont les enfants directs du conteneur flex. Ils seront positionnés
et distribués en fonction des propriétés définies pour le conteneur
flex. Chaque enfant est considéré comme un élément flexible qui
peut être redimensionné en largeur et en hauteur pour s'adapter à
la disposition.

 Propriétés appliques au container

La propriété Display
Pour activer Flexbox, la propriété CSS display: flex; ou display: inline-flex doit être
applique à l'élément parent qui agira comme conteneur flexible. Les éléments
enfants de ce conteneur deviennent automatiquement des "éléments flex" (Flex
Items).
La propriété Flex-direction
L'axe principal est défini par la propriété flex-direction qui peut prendre quatre
valeurs :
 row
 row-reverse
 column
 column-reverse
En ajoutant la propriété flex-direction au conteneur flexible, on peut modifier la
direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-
direction: row-reverse, les éléments seront affichés le long d'une ligne
horizontale mais les lignes de début et de fin seront inversées.
26
Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et
les éléments sont affichés sur une colonne. Si on utilise column-reverse, les
lignes de début et de fin seront également inversées.
La propriété Flex-wrap
Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est
possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur
plusieurs lignes ou colonnes (plutôt que de dépasser).
Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau
conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra
pas compte des autres lignes/colonnes.
Pour obtenir ce « passage à la ligne », on ajoute la propriété flex-wrap avec la
valeur wrap.

La propriété raccourcie flex-flow

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la
propriété raccourcie flex-flow. La première valeur de cette propriété sera
utilisée pour flex-direction et la seconde pour flex-wrap.

 Propriétés appliquées aux éléments flexibles

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec
trois propriétés :
 flex-grow
 flex-shrink
 flex-basis

La propriété flex-basis
La propriété flex-basis définit la taille de l'élément en termes d'espace occupé.
La valeur initiale de cette propriété est auto.
 flex-basis: auto : C'est la valeur par défaut. L'élément conserve sa
taille intrinsèque (largeur ou hauteur) naturelle en fonction de son
contenu.

27
  flex-basis: content : L'élément s'ajuste automatiquement à la taille
de son contenu.

La propriété flex-grow
Elle indique combien d'espace supplémentaire l'élément est autorisé à occuper
le long de l'axe principal lorsque les éléments flex sont disposés dans le
conteneur.
La valeur de flex-grow est un nombre positif qui représente le facteur de
croissance de l'élément. Par défaut, la valeur est 0, ce qui signifie que l'élément
n'occupera pas d'espace supplémentaire même s'il y en a. Lorsque plusieurs
éléments ont une valeur de flex-grow supérieure à 0, l'espace supplémentaire
est réparti en fonction de leurs valeurs respectives.

La propriété flex-shrink
Elle indique combien d'espace l'élément est autorisé à perdre le long de
l'axe principal lorsque les éléments flex sont disposés dans le conteneur et que
l'espace disponible est insuffisant pour accueillir tous les éléments à leur taille
de base (flex-basis).
La valeur de flex-shrink est un nombre positif ou nul. Par défaut, la valeur est 1,
ce qui signifie que l'élément rétrécira proportionnellement avec les autres
éléments flex du conteneur si l'espace est insuffisant pour les accueillir à leur
taille de base. Si la valeur est 0, l'élément ne rétrécira pas, même si cela entraîne
un débordement du conteneur.

 Alignement et justification de l'espace disponible entre les éléments

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et
la justification des éléments le long des axes principal et secondaire tout en
distribuant l'espace entre les éléments flexibles.
Align-items

28
La propriété align-items permet d'aligner les éléments le long de l'axe
secondaire.
Les valeurs qu’elle peut prendre sont entre autres :
 flex-start
 flex-end
 center
 baseline
 stretch

justify-content
La propriété justify-content est utilisée afin d'aligner les éléments le long de l'axe
principal dans la direction définie par flex-direction.
Les valeurs possibles pour justify-content sont :
 flex-start
 flex-end
 center
 space-between
 space-around
 space-evenly

2.13.References

 Css flexbox :plongez dans les Css modernes, 1e edition,Raphael

Goetter
 Les concepts de base pour flexbox - CSS : Feuilles de style en
cascade | MDN (mozilla.org)
 https://lesdocs.fr/principales-proprietes-et-valeurs-css/
 https://chat.openai.com

29