🎓 Support de Cours CSS

Développement Web 1 - BC-2

ISAE-GAFSA
Année Universitaire 2025/2026
Enseignant : KHMILI Boubaker

📑 Table des Matières

1. Introduction au CSS

1.1 Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour décrire la présentation d'un document HTML. Il permet de séparer le contenu (HTML) de la présentation (CSS).

1.2 Syntaxe de base

Structure d'une règle CSS :
sélecteur { propriété: valeur; }

1.3 Méthodes d'intégration

Méthode Description Exemple
Inline Dans l'attribut style <p style="color: red;">
Interne Dans la balise <style> <style> p { color: red; } </style>
Externe Fichier .css séparé <link rel="stylesheet" href="style.css">

2. Propriétés de Texte et Police

2.1 Police de caractères

Propriété Valeurs Description
font-family Arial, Times, serif, sans-serif, monospace, etc. Définit la police de caractères
font-size px, em, rem, %, pt, small, medium, large, etc. Taille de la police
font-weight normal, bold, bolder, lighter, 100-900 Épaisseur de la police
font-style normal, italic, oblique Style de la police
font-variant normal, small-caps Variante de la police

2.2 Formatage du texte

Propriété Valeurs Description
color nom, #hex, rgb(), rgba(), hsl(), hsla() Couleur du texte
text-align left, right, center, justify Alignement horizontal du texte
text-decoration none, underline, overline, line-through Décoration du texte
text-transform none, uppercase, lowercase, capitalize Transformation du texte
text-indent px, em, rem, % Indentation de la première ligne
letter-spacing normal, px, em Espacement entre les lettres
word-spacing normal, px, em Espacement entre les mots
line-height normal, nombre, px, em, % Hauteur de ligne
text-shadow h-shadow v-shadow blur color Ombre du texte
white-space normal, nowrap, pre, pre-wrap, pre-line Gestion des espaces blancs
word-break normal, break-all, keep-all Coupure des mots
word-wrap normal, break-word Retour à la ligne des mots longs
vertical-align baseline, top, middle, bottom, sub, super, px, % Alignement vertical
Exemple :
p { font-family: Arial, sans-serif; font-size: 16px; color: #333; }

3. Couleurs et Arrière-plans

3.1 Couleurs

Format Syntaxe Exemple
Nom Nom de couleur color: red;
Hexadécimal #RRGGBB ou #RGB color: #ff0000;
RGB rgb(r, g, b) color: rgb(255, 0, 0);
RGBA rgba(r, g, b, a) color: rgba(255, 0, 0, 0.5);
HSL hsl(h, s%, l%) color: hsl(0, 100%, 50%);
HSLA hsla(h, s%, l%, a) color: hsla(0, 100%, 50%, 0.5);

3.2 Propriétés d'arrière-plan

Propriété Valeurs Description
background-color Couleurs (voir ci-dessus), transparent Couleur de fond
background-image url('image.jpg'), none Image de fond
background-repeat repeat, repeat-x, repeat-y, no-repeat Répétition de l'image
background-position left, center, right, top, bottom, px, % Position de l'image
background-size auto, cover, contain, px, % Taille de l'image
background-attachment scroll, fixed, local Fixation de l'image
background-origin padding-box, border-box, content-box Zone d'origine du fond
background-clip border-box, padding-box, content-box Zone de découpe du fond
Note : La propriété raccourcie background peut combiner plusieurs propriétés :
background: color image repeat position / size;

4. Box Model (Margin, Padding, Border)

4.1 Margins (Marges externes)

Propriété Valeurs Description
margin px, em, rem, %, auto Raccourci pour toutes les marges
margin-top px, em, rem, %, auto Marge supérieure
margin-right px, em, rem, %, auto Marge droite
margin-bottom px, em, rem, %, auto Marge inférieure
margin-left px, em, rem, %, auto Marge gauche
Syntaxe raccourcie :
margin: 10px; /* tous les côtés */
margin: 10px 20px; /* vertical horizontal */
margin: 10px 20px 30px; /* top horizontal bottom */
margin: 10px 20px 30px 40px; /* top right bottom left */

4.2 Padding (Marges internes)

Propriété Valeurs Description
padding px, em, rem, % Raccourci pour tous les padding
padding-top px, em, rem, % Padding supérieur
padding-right px, em, rem, % Padding droit
padding-bottom px, em, rem, % Padding inférieur
padding-left px, em, rem, % Padding gauche

4.3 Bordures

Propriété Valeurs Description
border width style color Raccourci pour toutes les bordures
border-width thin, medium, thick, px, em Épaisseur de la bordure
border-style none, solid, dashed, dotted, double, groove, ridge, inset, outset Style de la bordure
border-color Couleurs (voir section 3) Couleur de la bordure
border-radius px, em, % Arrondi des coins
Bordures individuelles :
border-top: 2px solid red;
border-right: 1px dashed blue;
border-bottom: 3px dotted green;
border-left: 2px double black;

4.4 Outline

Propriété Valeurs Description
outline width style color Contour (ne prend pas d'espace)
outline-width thin, medium, thick, px Épaisseur du contour
outline-style none, solid, dashed, dotted, double Style du contour
outline-color Couleurs Couleur du contour
outline-offset px Distance entre contour et bordure

4.5 Box Sizing

Propriété Valeurs Description
box-sizing content-box, border-box Modèle de calcul des dimensions
Content-box : width/height = contenu uniquement
Border-box : width/height = contenu + padding + border

5. Dimensions et Débordement

5.1 Dimensions

Propriété Valeurs Description
width auto, px, em, rem, %, vw Largeur
height auto, px, em, rem, %, vh Hauteur
min-width px, em, rem, %, vw Largeur minimale
max-width none, px, em, rem, %, vw Largeur maximale
min-height px, em, rem, %, vh Hauteur minimale
max-height none, px, em, rem, %, vh Hauteur maximale

5.2 Débordement (Overflow)

Propriété Valeurs Description
overflow visible, hidden, scroll, auto Gestion du débordement
overflow-x visible, hidden, scroll, auto Débordement horizontal
overflow-y visible, hidden, scroll, auto Débordement vertical

6. Positionnement et Disposition

6.1 Position

Valeur Description
static Position par défaut (flux normal)
relative Positionnement relatif à sa position normale
absolute Positionnement absolu par rapport au parent positionné
fixed Positionnement fixe par rapport à la fenêtre
sticky Mélange de relative et fixed

6.2 Propriétés de positionnement

Propriété Valeurs Description
top auto, px, em, rem, % Position depuis le haut
right auto, px, em, rem, % Position depuis la droite
bottom auto, px, em, rem, % Position depuis le bas
left auto, px, em, rem, % Position depuis la gauche
z-index auto, nombre Ordre d'empilement (axe Z)

6.3 Float et Clear

Propriété Valeurs Description
float none, left, right Flottement de l'élément
clear none, left, right, both Annulation du flottement

7. Flexbox

7.1 Propriétés du conteneur flex

Propriété Valeurs Description
display flex, inline-flex Active le mode flexbox
flex-direction row, row-reverse, column, column-reverse Direction de l'axe principal
flex-wrap nowrap, wrap, wrap-reverse Retour à la ligne des éléments
flex-flow direction wrap Raccourci flex-direction + flex-wrap
justify-content flex-start, flex-end, center, space-between, space-around, space-evenly Alignement sur l'axe principal
align-items stretch, flex-start, flex-end, center, baseline Alignement sur l'axe transversal
align-content stretch, flex-start, flex-end, center, space-between, space-around Alignement des lignes (multi-lignes)
gap px, em, rem, % Espacement entre les éléments
row-gap px, em, rem, % Espacement vertical
column-gap px, em, rem, % Espacement horizontal

7.2 Propriétés des éléments flex

Propriété Valeurs Description
flex-grow nombre (défaut: 0) Facteur d'agrandissement
flex-shrink nombre (défaut: 1) Facteur de rétrécissement
flex-basis auto, px, em, rem, % Taille de base
flex grow shrink basis Raccourci pour les 3 propriétés
align-self auto, stretch, flex-start, flex-end, center, baseline Alignement individuel
order nombre Ordre d'affichage
Exemple de conteneur Flexbox :
.container { display: flex; justify-content: space-between; align-items: center; }

8. CSS Grid

8.1 Propriétés du conteneur grid

Propriété Valeurs Description
display grid, inline-grid Active le mode grid
grid-template-columns px, %, fr, auto, repeat() Définit les colonnes
grid-template-rows px, %, fr, auto, repeat() Définit les lignes
grid-template-areas Noms de zones Définit les zones nommées
grid-column-gap px, em, rem, % Espacement entre colonnes
grid-row-gap px, em, rem, % Espacement entre lignes
grid-gap row-gap column-gap Raccourci pour les espacements
justify-items start, end, center, stretch Alignement horizontal dans la cellule
align-items start, end, center, stretch Alignement vertical dans la cellule
justify-content start, end, center, stretch, space-around, space-between, space-evenly Alignement de la grille horizontalement
align-content start, end, center, stretch, space-around, space-between, space-evenly Alignement de la grille verticalement

8.2 Propriétés des éléments grid

Propriété Valeurs Description
grid-column-start nombre, nom de ligne Ligne de départ de colonne
grid-column-end nombre, nom de ligne, span n Ligne de fin de colonne
grid-row-start nombre, nom de ligne Ligne de départ de rangée
grid-row-end nombre, nom de ligne, span n Ligne de fin de rangée
grid-column start / end Raccourci colonne
grid-row start / end Raccourci rangée
grid-area nom ou row-start / column-start / row-end / column-end Zone ou position complète
justify-self start, end, center, stretch Alignement horizontal individuel
align-self start, end, center, stretch Alignement vertical individuel
Exemple de grille simple :
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

9. Propriétés de Liste

Propriété Valeurs Description
list-style-type none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman Type de puce
list-style-position inside, outside Position de la puce
list-style-image none, url('image.png') Image comme puce
list-style type position image Raccourci pour les listes
Exemple :
ul { list-style: square inside; }

10. Propriétés de Tableau

Propriété Valeurs Description
border-collapse separate, collapse Fusion des bordures
border-spacing px, em Espacement entre cellules
caption-side top, bottom Position de la légende
empty-cells show, hide Affichage des cellules vides
table-layout auto, fixed Algorithme de calcul du tableau

11. Affichage et Visibilité

11.1 Display

Valeur Description
block Élément en bloc (prend toute la largeur)
inline Élément en ligne (ne prend que l'espace nécessaire)
inline-block En ligne mais accepte width/height
none Élément caché (n'occupe pas d'espace)
flex Conteneur flexbox
inline-flex Flexbox en ligne
grid Conteneur grid
inline-grid Grid en ligne
table Comme un tableau
table-row Comme une ligne de tableau
table-cell Comme une cellule de tableau

11.2 Visibilité

Propriété Valeurs Description
visibility visible, hidden, collapse Visibilité (conserve l'espace)
opacity 0 à 1 Transparence (0 = invisible, 1 = opaque)
Différence :
  • display: none - L'élément n'occupe pas d'espace
  • visibility: hidden - L'élément reste dans le flux mais est invisible
  • opacity: 0 - L'élément est transparent mais occupe de l'espace et peut recevoir des événements

11.3 Curseur

Propriété Valeurs Description
cursor auto, default, pointer, text, move, not-allowed, wait, help, crosshair, etc. Type de curseur

12. Transformations

12.1 Transform

Fonction Syntaxe Description
translate() translate(x, y) Déplacement en X et Y
translateX() translateX(valeur) Déplacement horizontal
translateY() translateY(valeur) Déplacement vertical
scale() scale(x, y) ou scale(valeur) Mise à l'échelle
scaleX() scaleX(valeur) Échelle horizontale
scaleY() scaleY(valeur) Échelle verticale
rotate() rotate(angle) Rotation (deg, rad, turn)
skew() skew(x-angle, y-angle) Inclinaison
skewX() skewX(angle) Inclinaison horizontale
skewY() skewY(angle) Inclinaison verticale
Exemples de transformations :
transform: translate(50px, 100px);
transform: scale(1.5);
transform: rotate(45deg);
transform: translate(50px, 100px) rotate(45deg) scale(1.2);

12.2 Propriétés associées

Propriété Valeurs Description
transform-origin left, center, right, top, bottom, px, % Point d'origine de la transformation

13. Propriétés Diverses

13.1 Ombres

Propriété Valeurs Description
box-shadow h-offset v-offset blur spread color inset Ombre de boîte
text-shadow h-offset v-offset blur color Ombre de texte
Exemples :
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 0 0 10px 2px rgba(0,0,0,0.2) inset;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

13.2 Filtres

Fonction Syntaxe Description
blur() blur(px) Flou
brightness() brightness(%) Luminosité (100% = normal)
contrast() contrast(%) Contraste
grayscale() grayscale(%) Niveaux de gris
hue-rotate() hue-rotate(deg) Rotation de teinte
invert() invert(%) Inversion des couleurs
opacity() opacity(%) Opacité
saturate() saturate(%) Saturation
sepia() sepia(%) Effet sépia
Exemple :
filter: blur(5px) brightness(120%) contrast(110%);

13.3 Colonnes (Multi-column)

Propriété Valeurs Description
column-count auto, nombre Nombre de colonnes
column-width auto, px, em Largeur des colonnes
column-gap normal, px, em, % Espacement entre colonnes
column-rule width style color Ligne de séparation

13.4 Divers

Propriété Valeurs Description
resize none, both, horizontal, vertical Redimensionnement par l'utilisateur
pointer-events auto, none Interaction avec les événements souris
user-select auto, none, text, all Sélection du texte
clip-path circle(), ellipse(), polygon(), etc. Découpage de forme
object-fit fill, contain, cover, none, scale-down Ajustement d'image dans son conteneur
object-position position (px, %, left, right, etc.) Position de l'image

📚 Unités de Mesure CSS

Unités Absolues

Unité Description
px Pixels (1px = 1/96ème de pouce)
pt Points (1pt = 1/72ème de pouce)
cm Centimètres
mm Millimètres
in Pouces (1in = 2.54cm)

Unités Relatives

Unité Description
em Relatif à la taille de police de l'élément parent
rem Relatif à la taille de police de l'élément racine (html)
% Pourcentage de l'élément parent
vw 1% de la largeur de la fenêtre (viewport width)
vh 1% de la hauteur de la fenêtre (viewport height)
vmin 1% de la plus petite dimension de la fenêtre
vmax 1% de la plus grande dimension de la fenêtre

🎯 Pseudo-classes Importantes

Pseudo-classe Description Exemple
:hover Élément survolé par la souris a:hover { color: red; }
:active Élément actif (cliqué) button:active { transform: scale(0.95); }
:focus Élément qui a le focus input:focus { border-color: blue; }
:visited Lien visité a:visited { color: purple; }
:first-child Premier enfant li:first-child { font-weight: bold; }
:last-child Dernier enfant li:last-child { border-bottom: none; }
:nth-child(n) N-ième enfant tr:nth-child(even) { background: #f0f0f0; }
:not(selector) Négation input:not([type="submit"]) { width: 100%; }

🔍 Pseudo-éléments

Pseudo-élément Description Exemple
::before Contenu avant l'élément p::before { content: "→ "; }
::after Contenu après l'élément p::after { content: " ✓"; }
::first-line Première ligne du texte p::first-line { font-weight: bold; }
::first-letter Première lettre du texte p::first-letter { font-size: 2em; }
::selection Texte sélectionné ::selection { background: yellow; }
⚠️ Important : Ce support couvre les propriétés CSS fondamentales. Pour un développement web moderne, il est recommandé de :

Pour imprimer ce document : Ctrl + P (Windows) ou Cmd + P (Mac)
Sélectionnez "Enregistrer au format PDF" pour créer un fichier PDF