Dernière modification : 04/06/2024

Cascading Style Sheets (CSS) - Mémo

 

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Nous allons aborder dans cet article la plupart des commandes du langage CSS.

 

1. Insertion d'une feuille de style

<link rel="stylesheet" href="style.css">

 

2. Meta viewport (responsive)

<meta name="viewport" content="width=device-width, initial-scale=1">

 

3. Sélecteurs

select-a,
select-b,
select-father > child,
sélecteur-ancestor heir {
  prop-1 : valeur;
  prop-2 : valeur;
}

.my-class {
}

my-html-node {
}

#my-id{
}

 

Sélecteur Description
* Tous les éléments
div Toutes les balises div
div, span Toutes les balises div et span
div span Toutes les balises span contenues dans une balise div
div > span Toutes les balises span enfants de balise div
#element Toutes les balises ayant pour identifiant "element"
.element Toutes les balises ayant pour classe "element"
ul#element Toutes les balises ul ayant pour id "element"
span.element Toutes les balises span ayant comme classe "element"
#element * Tous les éléments dans un bloc ayant pour id "element"
a:link Tous les liens n'ayant pas été visités
a:active Tous les liens activés par l'utilisateur
a:visited Tous les liens visités par l'utilisateur
a:hover Tous les liens survolés par l'utilisateur

 

4. Propriétés de l’élément

Element property

.example {
  padding: 40px;
  border: 2px solid #e40;
  margin: 11px 12px 13px 14px;
}

Valeurs possibles pour les propriétées margin et padding :

  • valeur : les 4 marges identiques
  • haut = bas & droite = gauche
  • haut, droite = gauche & bas
  • haut, droite, bas et gauche

 

5. Unités

5.1 Unités absolues

Unité Description
cm Le centimètre
in Le pouce (en anglais « inch ») = 2,54 cm
mm Le millimètre
pt Le point = 1/72 in
pc Le pica = 12 pt

 

5.2 Unités relatives

Unité Description
em

Unité relative à la taille de police de l'élément.

1 em équivaut à 100% de cette taille.

Exception : si la propriété "font-size" est définie, alors elle se rapporte à la taille de la police de l'élément parent.

ex

Unité relative à la hauteur de la minuscule de l'élément.

Exception : si la propriété "font-size" est définie, alors elle se rapporte à la hauteur de la minuscule de l'élément parent.

px Le pixel. Unité dont le rendu dépend de la résolution du périphérique d'affichage.
% Le pourcentage est une unité relative à la taille de l'élément ou de son parent.

 

6. Variables

:root {
  --main-bg-color: brown;
}

.element {
  background-color: var(--main-bg-color);
}

 

7. Pseudo-classes

Une pseudo-classe est un mot-clé pouvant être ajouté à un sélecteur en vue d'indiquer l'état spécifique dans lequel l'élément doit être afin d'être ciblé par la déclaration.

Par exemple, la pseudo-classe ":hover", permettra d'appliquer une mise en forme spécifique quand l'utilisateur survole l'élément ciblé par le sélecteur.

Pseudo-classe Description
::after Insertion de contenu après
::before Insertion de contenu avant
::first-letter Selection de la première lettre
::first-line Sélection de la première ligne
::selection Sélection
:active Actif
:checked Coché/checké
:disable Désactivé
:empty Vide
:enable Activé
:first-child Premier enfant
:first-of-type Premier du type
:focus Curseur dedans
:hover Au dessus
:in-range Dans une plage de valeurs
:invalid Invalide
:lang(language) Dans la langue (fr/en/it/...)
:last-child Dernier enfant
:last-of-type Dernier du type
:link Lien
:not(selector) N’est pas un sélecteur
:nth-child(n) Chaque (n) enfant
:nth-last-child(n) Dernier de chaque (n) enfant
:nth-last-of-type(n) Dernier de chaque (n) du type
:nth-of-type(n) Chaque (n) du type
:only-of-type Seulement du type
:only-child Seulement si un seul enfant
:optional Optionnel
:out-of-range En dehors des valeurs
:read-only Lecture seule
:read-write Lecture et écriture
:required Requis
:root Racine du document
:target Cible
:valid Valide
:visited Visité

 

Liste des pseudo-classes standards : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes#liste_des_pseudo-classes_standards

 

8. Opérateurs

Opérateur Description
and et
only seulement
not non
, ou

Exemple : La règle concerne les moniteurs de plus de 500px de large et les médias printables en couleur.

@media screen and (min-width : 500px), print and (color) {
  div {
    border : solid 2px black;
  }
}

 

9. Médias

La règle @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média.

@media (max-width: 500px) {
  .article {
    display: none;
  }
}

 

Média Description
all Tous les appareils
braille Plages braille
embossed Imprimantes braille
handheld Mobiles / Petits périphériques
print Documents consultés en aperçu avant impression.
projection Projecteurs (ou slides)
screen Appareils dotés d'un écran.
speech Outils de synthèse vocale
tty Terminal
tv Téléviseur

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries

 

10. Calculs

La fonction "calc()" permet de réaliser des opérations mathématiques en CSS.

div {
    width: calc(100% - 20px);
    padding: 10px;
}

 

11. Mise en page avec display

11.1 Block

.item {
  display:block;
}

Display block

 

11.2 Inline block

.item {
  display:inline-block;
}

Display inline block

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/display

 

11.3 Flex

11.3.1 Flex simple

.parent {
  display:flex;
}

Display flex

*avec margin-left : auto

 

11.3.2 Flex avec space-between

.parent {
  display:flex;
  justify-content:space-between;
}

Display flex space between

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/justify-content

 

11.3.3 Flex avec flex-wrap

.parent {
  display:flex;
  flex-wrap:wrap;
}

Display flex wrap

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap

 

11.3.4 Flex avec flex-direction

.parent {
  display:flex;
  flex-direction:column;
}

Display flex firection

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction

 

12. Général

12.1 Box-sizing et flex

Calcul simplifié de la taille des blocs

body {
  box-sizing: border-box;
}

*,*::before,*::after {
  width: 100%;
  border: solid #5B6DCD 10px;
  padding: 5px;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

 

12.2 Mobile

p{
  color: #333;
}

@media (min-width:640px){ 
  .article p {
    columns: 3;
  } 
}

@media (min-width:960px){ 
  .article p {
    columns: 4;
  } 
}

 

12.3 Margin auto

Centrer un élément verticalement :

.element {
  width: 1000px;
  margin: 0 auto;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/margin

 

13. Nouveauté CSS 3

13.1 @font-face

Définition et chargement d'une typographie

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/font-family

 

13.2 border-radius

Définition des coins arrondis pour la bordure d'un élément.

border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 30% 50% 70%;
border-radius: 10% / 50%;
border-radius: 10px 100px / 120px;
border-radius: 50% 20% / 10% 40%;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/border-radius

 

13.3 box-shadow

Ajout d'ombres à la boîte d'un élément via une liste d'ombres. Une liste d'ombre est séparée par des virgules.

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Une liste d'ombres, séparées par des virgules */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow

 

13.4 gradient

Le type de donnée CSS "gradient" permet de représenter une "image" contenant un dégradé entre deux ou plusieurs couleurs.

background: linear-gradient(#f69d3c, #3f87a6); # Dégradé linéaire
background: radial-gradient(#f69d3c, #3f87a6); # Dégradé radiaux
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px); # Dégradé linéaire répété
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px); # Dégradé radiaux répété
background: conic-gradient(#f69d3c, #3f87a6); # Dégradé conique

Outil : https://cssgradient.io/

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/gradient

 

13.5 opacity

Transparence d'un élément.

/* Totalement transparent  */
opacity: 1;
opacity: 1.0;

/* Légèrement transparent */
opacity: 0.6;

/* Complètement transparent */
opacity: 0.0;
opacity: 0;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/opacity

 

13.6 text-shadow

Obrage d'un text.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Utiliser les défauts pour la couleur et le rayon de flou */
text-shadow: 5px 10px;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/text-shadow

 

13.7 transform

transform modifie l'espace de coordonnées utilisé pour la mise en forme visuelle

transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn);
transform: skew(10deg, 10deg);
transform: scale(0.5) translate(-100%, -100%);

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/transform

 

13.8 transition

/* nom de la propriété | durée */
transition: margin-right 4s;

/* nom de la propriété | durée | retard */
transition: margin-right 4s 1s;

/* nom | durée | fonction */
transition: margin-right 4s ease-in-out;

/* nom | durée | fonction | retard */
transition: margin-right 4s ease-in-out 1s;

/* S'applique à deux propriétés */
transition: margin-right 4s, color 1s;

/* S'applique à toutes les propriétés modifiées */
transition: all 0.5s ease-out;

# Exemple de transition
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/transition

 

14. Mise en forme du texte

Propriété Exemple de valeurs Description
font-family police1, police2, serif, sans-serif, monospace Nom de police
@font-face Nom et source de la police Police personnalisée
font-size 1.2em, 10px, 90% Taille du texte
font-weight bold / bolder, normal, lighter, 100, 900 Définition de la graisse du texte
font-style italic, oblique, normal, bolder, lighter, 100, 900 Style du texte
font-variant small-caps, normal Propriété raccourcie représentant les propriétés : font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures et font-variant-east-asian.
text-decoration underline, overline, line-through, blink, none Soulignement, ligne au-dessus, barré ou clignotant
text-transform capitalize, uppercase, lowercase, full-width, full-size-kana Transformation du texte
font   Propriété raccourcie permettant de définir rapidement font-style, font-variant, font-weight,  font-stretch, font-size, line-height et font-family
text-align left, center, right, justify Alignement horizontal
vertical-align baseline, middle, sub, super, top, bottom Alignement vertical d'une boîte en ligne (inline) ou d'une cellule de tableau.
line-height 18px, 120%, 3em, normal Hauteur de la boîte d'une ligne.
text-indent 0, 30%, -3em Indentation de la première ligne
white-space pre, nowrap, normal Description de la façon dont les blancs sont gérés. Césure.
word-wrap break-word, normal Césure forcée
color #F00, rgb(214, 122, 127), red Couleur
letter-spacing normal, ,2rem, 0px, -1px interlettre utilisée pour les caractères composant le texte.

 

15. Arriere-plan

Propriété Exemple de valeurs Description
background   Super propriété du fond. Combine :  background-image, background-repeat, background-attachment, background-position.
background-color Identique à color Couleur de fond
background-image url('image.png') Image de fond
background-repeat repeat-x, repeat-y, no-repeat, repeat Répétition du fond
background-attachment fixed, scroll Fond fixe
background-position (x y), top, center, bottom, left, right Position du fond

 

16. Positionnement et tailles

Propriété Exemple de valeurs Description
width 150px, 80%... Largeur (px/em)
min-width 150px, 80%... Largeur minimale
max-width 150px, 80%... Largeur maximale
height 150px, 80%... Hauteur (px/em)
min-height 150px, 80%... Hauteur minimale
max-height 150px, 80%... Hauteur maximale
position relative, absolute, static Position (absolute, relative)
top 20px Référence au haut
right 20px Référence à la droite
bottom 20px Réference au bas
left 20px Référence à la gauche
float left, right, none Element flottant (left/right)
display block, inline, inline-block, table, table-cell, none... Mode d’affichage (block)
z-index 10 Profondeur/niveau
overflow auto, scroll, visible, hidden Dépassement hors conteneur
visibility visible, hidden, collapse Visibilité

 

17. Espacement & bordures

Propriété Exemple de valeurs Description
margin 23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de marge. Combine : margin-top  , margin-right  , margin-bottom  , margin-left  .
margin-top 23px Marge en haut
margin-right 23px Marge à droite
margin-bottom 23px Marge en bas
margin-left 23px Marge à gauche
padding 23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de marge intérieure. Combine : padding-top, padding-right, padding-bottom, padding-left.
padding-left 23px Marge intérieure à gauche
padding-right 23px Marge intérieure à droite
padding-bottom 23px Marge intérieure en bas
padding-top 23px Marge intérieure en haut
border 3px solid red Super-propriété de bordure. Combine, border-width, border-color, border-style. Existe aussi en versionborder-top, border-right, border-bottom, border-left.
border-width 3px Épaisseur de bordure
border-color nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20... Couleur de bordure
border-style solid, dotted, dashed, double, groove, ridge, inset, outset Type de bordure

 

18. Propriétés des listes

Propriété Exemple de valeurs Description
list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Type de liste
list-style-position inside, outside Position en retrait
list-style-image url('img.png') Puce personnalisée
list-style   Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image.

 

19. Propriétés des tableaux

Propriété Exemple de valeurs Description
border-collapse collapse, separate Fusion des bordures
empty-cells hide, show Affichage des cellules vides
caption-side bottom, top Position du titre du tableau

 

20. Autres propriétés

Propriété Exemple de valeurs Description
cursor crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto Curseur de souris

 

Pour aller plus loin :

 

Outils :

 

LauLem.com - Conditions Générales d'Utilisation - Informations Légales - Charte relative aux cookies - Charte sur la protection des données personnelles - A propos