Sélection d'éléments

Bases

balise { propriété: valeur; }
.classe { propriété: valeur; }
#id { propriété: valeur; }
[attribut] { propriété: valeur; }

Et

/* toutes les balises b appartenant à la classe c */
b.c { propriété: valeur; }

/* la balise ayant l'id i et appartenant à la classe c */
#i.c { propriété: valeur; }

/* toutes les balises appartenant aux deux classes c1 et c2 mais pas celles appartenant seulement à l'une des deux */
.c1.c2 { propriété: valeur; }

Ou

/*  toutes les balises appartenant à la classe c1 ou c2 */
.c1, .c2 { ... }

Enfant, descendant

/* toutes les balises b2 descendantes (enfants directes ou non) de balises b1 */
b1 b2 { propriété: valeur; }

/* toutes les balises b2 enfants directes (de 1er rang) de balises b1 */
b1>b2 { propriété: valeur; }

/* toutes les balises b premiers fils de leur parent */
b:first-child
/* toutes les balises b derniers fils de leur parent */
b:last-child

/* toutes les balises b 2ème fils de leur parent */
b:nth-child(2)
/* même chose en CSS 2 : toutes les balises b 2ème fils de leur parent */
b:first-child + b { ... }
/* toutes les balises b multiple de 2: 0,2,4,...  */
b:nth-child(2n) { ... }
/* toutes les balises b avant-derniers fils de leur parent */
b:nth-last-child(2)

Parent

/* toutes les balises b1 parent direct d'une balise b2 */
b1:has(b2) { propriété: valeur; }

Attribut

/* toutes les balises ayant un attribut a quelque soit sa valeur */
[a] { propriété: valeur; }

/* toutes les balises n'ayant pas un attribut a */
:not([a]) { propriété: valeur; }

/* toutes les balises b ayant un attribut a quelque soit sa valeur */
b[a] { propriété: valeur; }

/* toutes les balises b ayant un attribut a de valeur v */
b[a=v] { propriété: valeur; }

/* toutes les balises b ayant un attribut a dont la valeur contient v1 seule ou séparée par des espaces */
b[a~=v1] { propriété: valeur; }

/* toutes les balises b ayant un attribut a dont la valeur commence par v1 */
b[a^="v1"] { propriété: valeur; }

/* toutes les balises b ayant un attribut a dont la valeur contient v1 */
b[a*="v1"] { propriété: valeur; }

Actions

/* Rédefinit les couleurs du texte sélécionné (Pour Firefox) */ 
::-moz-selection { background: black; color: white; }

Autres

/* toutes les balises b qui n'appartiennent pas à la classe c */
b:not(.c) { ... }
b:not(.c):not(.d) { ... } /* ni à la classe d */

/* la balise b2 placée directement après une balise b1 au même niveau  */
b1+b2 { propriété: valeur; }

/* toutes les balises b2 placées après une balise b1 au même niveau  */
b1~b2 { propriété: valeur; }

/* toutes les 2ème occurrences de balises b (à la différence de nth-child seule les balises de type b sont prise en compte) */
b:nth-of-type(2) { ... }
/* toutes les avant-dernières occurrences de balises b */
b:nth-last-of-type(2)
/* toutes les occurrences de balises b sauf la première */
b:nth-of-type(n+2)
/* toutes les occurrences de balises b sauf la dernière */
b:nth-last-of-type(n+2)

/* Insert le contenu après chaque balise b */
b:after { content:... }
/* content:url(images/tape.gif);
   content:"Texte"; */

/* Quand le champs est sélectionné */
input:focus { }
input:not(:focus) { }

color, background-color, min-width, display, visibility, border-radius

color	couleur d'avant-plan
background-color	couleur d'arrière-plan
min-height; min-width	hauteur ou largeur minimal
display	type de box généré none: supprimé (l'espace n'est pas conservé) inline: pas de retour à la ligne avant et après (box par défaut) block: retour à la ligne avant et après inline-block: l'élément est inline et l'intérieur de l'élément est block. Utile pour avoir des éléments inline avec une width.
visibility	définit si l'élément est affiché ou non hidden: caché (l'espace est conservé) visible
border-radius	arrondis sur les blocks

Il n'est pas possible de définir le width d'un élément inline (ex: span)

w3schools

Margin, Padding, Border

	5px 5px 5px 5px → top right bottom left 5px 10px 20px → top right&left bottom 5px 10px → top&bottom right&left 5px → top&bottom&right&left

margin-top: 1px;
padding-bottom: 2px;

border: 1px solid #000;
border-bottom: 2px solid #603913;

border-width: 5px;
border-style: dotted solid double dashed;

border-radius: 15px; /* arrondis */
border-radius: 40px 10px; /* arrondis effet vague */

Border Style	Rendu
solid	ligne
none	pas de bordure
dotted	pointillés
dashed	tirets
double	ligne double
dotted solid double dashed	pointillés en haut, ligne à droite, ligne double en bas, tirets à gauche

Position

fixed

Positionné par rapport à la fenêtre, ne bouge pas lors du scroll.
L'élément sort du layout et n'est plus considéré comme prenant de la place par rapport aux autres éléments.

#column {
    position: fixed; /* par opposition à static */
    top: 0; /* remonte l'élément au besoin */
    background-color: #333333; /* force une couleur de fond au cas ou d'autres éléments viendrait à le chevaucher (scroll) */
}

relative

Déplace un élément par rapport à sa position normale.

#element {
    position: relative;
    left: 100px;
    top: -200px;
}

Laisse un espace vide là ou l'élément aurait du se trouver.

absolute

Positionné par rapport au premier élément parent positionné, à défaut le conteneur initial.
L'élément sort du layout et n'est plus considéré comme prenant de la place par rapport aux autres éléments.

#element {
    /* placer l'élément en bas */
    position: absolute;
    bottom: 0;
    /* centrer l'élément */
    left: 50%;
    margin-left: -200px;
}

sticky

Image

/* forcer une image à se redimensionner en fonction de son conteneur */
img {
    max-width: 100%;
    max-height: 100%;
}

Background-image

/* définit une couleur du fond, si on veut autre chose que blanc */
background-color: black;
background-image: url("mon-image.jpg");
/* n'afficher l'image qu'une seule fois */
background-repeat: no-repeat;
/* fixe l'image, elle ne se déplace plus lors de scroll */
background-attachment: fixed;
background-position: center;
background-size: 400px;

Crop image

.conteneur {
    overflow: hidden;
    margin: 0;
}
.conteneur > img {
    display: block;
    width: 100%;
    margin: -6% 0;
}

Texte

color: black;

text-decoration: underline;     /* souligner */
text-decoration: line-through;  /* barrer */
text-decoration: blink;	        /* texte qui clignote */

line-height: 150%;              /* espacement entre les lignes */

letter-spacing: 1px;            /* Espacement entre les lettres */
letter-spacing: normal;         /* valeur par défaut */

/* ajouter une image a gauche du texte */
background-image: url(mon_image.gif);
background-repeat: no-repeat;
padding-left: 11px;

Position du texte dans son conteneur

text-align: left / right / center / justify;

float: left / right;

Ombre

text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
/* décalage suivant X / décalage suivant Y / flou (0px par défaut) / couleur (noir par défaut) */

Retrait

/* Décalage à droite de la première ligne */
text-indent:10px;

/* Décalage à droite de toutes les lignes sauf la première */
text-indent:-10px;
padding-left:10px;

Ajoutez du texte

#monlabel:after { content: "Nouveau texte"; }

Utilisez after ou before.
Attribut content

Remplacer du texte

Il n'est pas possible à proprement parler de remplacer du texte en CSS, mais voici une astuce qui permet de faire sortir du flux le texte à remplacer et d'ajouter à la suite le nouveau texte.

/* Décalage à gauche du texte à remplacer */
#monlabel { text-indent: -10em; }
/* Ajout du nouveau texte avec un padding à gauche si besoin */
#monlabel:after { content: "Nouveau texte"; padding-left: 1em; }

Style du texte par défaut (placeholder) d'un conteneur input

/* Firefox 51+ */
input::placeholder {
  color: blue;
  opacity: 1;
}

::-moz-placeholder

Fonts

/* Si la police DejaVu Sans n'est installé chez le client, la police suivante est utilisée
 * sans-serif désigne la police sans-serif par défaut du système */
font-family: "DejaVu Sans", sans-serif;

/* taille */
font-size: xx-large x-large large medium small x-small xx-small;
font-size: 12px;
font-size: clamp(1.5rem, 2.5vw, 4rem);

/* gras */
font-weight: bold;

/* italique */
font-style: italic;

Familles

Serif : avec des petits traits sur les caractères
- Times New Roman, Times
- Georgia
- Palatino Linotype, Book Antiqua, Palatino

Sans-serif : sans les petits traits sur les caractères
- Arial, Helvetica
- Arial Black, Gadget
- Verdana, Geneva
- Comic Sans MS, cursive

Monospace : tous les caractères ont la même largeur
- Courier New, Courier
- Consolas, Lucida Console, Monaco

Fonts embarqués

Télécharger des fonts ralentit l'affichage de la page.
Comment utiliser une fonte «non-standard» sur un site Web ?

@font-face {
    font-family:'Nom du font';
    font-weight:normal; /* bold */
    font-style:normal; /* italic */
    src:url('chemin/font.eot'); /* compatibilité IE */
    src:local('font'), url('chemin/font.woff') format('woff');
    /* chargement du font en local ou depuis l'url qui peut être relative aux dossiers du serveur */
}

Formats :

`woff`	`woff`
`ttf`	`truetype`
`otf`	`opentype`
`svg`
`eot`

Téléchargez des fonts libre de droits sur fontex.

Ajoutez des Google fonts au site web

Récupérez l'url du google font à ajouter.
Puis l'ajoutez au site web via CSS ou HTML, exemple avec le font UnifrakturMaguntia :

@import url("http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin");

<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin'
      rel='stylesheet' type='text/css'>

px, em, ex, cm

px	taille d'un pixel.
cm, mm, in	1in = 96px = 2.54cm
em	relatif à la taille de la police de l'élément courant. Si la police est à 12px alors 1em = 12 px.
rem	relatif à la taille de la police de l'élément root.
vw	relatif en % à la largeur du viewport (taille de la fenêtre)
vh	relatif en % à la hauteur du viewport (taille de la fenêtre)

Débordement

/* définir une taille maximale */
display: block;
max-width: 100px;
overflow: auto;

overflow	Comportement si le contenu déborde
visible	débordement autorisé (défaut)
hidden	les parties des éléments qui débordent sont coupées et masquées
scroll	les parties des éléments qui débordent sont coupées et une barre de défilement est ajoutée
auto	les parties des éléments qui débordent sont coupées et une barre de défilement est ajoutée si nécessaire

table

table {
    width: 100%;
    table-layout: fixed;
    /* à combiner avec white-space: pre-wrap et word-wrap: break-word */
}

/* la suite ne semble pas nécessaire */

/* définir la taille des lignes */
table td:first-child {
    width: 40px;
}
/* définir l'overflow sur la div contenue dans la cellule */
div.class {
    overflow: auto;
}

texte

white-space: nowrap;

/* ajoute des points de suspension pour indiquer que le texte a été tronqué. À utiliser avec overflow: hidden */
text-overflow: ellipsis;

/* retour à la ligne entre les mots (comportement par défaut), puis coupe les mots qui dépassent */
word-wrap: break-word;

/* pas de retour à la ligne entre les mots, coupe les mots qui dépassent, */
word-break: break-all;

white-space	Description
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the pre tag in HTML
pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

Table

Bordures

/* bordure simple autour de la table */
table { border: 1px solid black; }

/* bordure autour de la table et bordures autours des cellules */
table, th, td { border: 1px solid black; }

/* bordure unique autour de la table et des cellules */
table, th, td { border: 1px solid black; }
table { border-collapse:collapse; }

Alignement du texte dans sa cellule

/* aligner horizontalement le contenu de la cellule (left, right, center) */
td { text-align: center; }

/* aligner verticalement le contenu de la cellule (top, middle, bottom) */
td { vertical-align: middle; }

Equivalent de cellpadding

th, td { padding: 10px; }

Attributs non-css

cellpadding, cellspacing, frame, rules voir HTML#Tableau

scrollbar dans une cellule

td {
    width: 600px; /* forcer la taille */
    display: block;
    overflow: auto; /* afficher une scrollbar si le contenu déborde */
}

flex

.container {
    display: flex;
    flex-direction: column; /*  */
}

.item {
    flex: 1; /* equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

Propriété	Description	Valeurs
flex-direction	sens d'affichage	row (distribution horizontale, valeur par défaut) row-reverse (distribution horizontale inversée) column (distribution verticale) column-reverse (distribution verticale inversée)
flex-wrap	distribution sur une ou plusieurs lignes	nowrap (les éléments ne passent pas à la ligne, valeur par défaut) wrap (les éléments passent à la ligne dans le sens de lecture) wrap-reverse (les éléments passent à la ligne dans le sens inverse)
flex-flow	regroupe les propriétés flex-direction et flex-wrap
justify-content	alignement dans l'axe primaire	flex-start (éléments positionnés au début du sens de lecture, valeur par défaut) flex-end (éléments positionnés à la fin) center (position centrale) space-between (répartition “justifiée”) space-around (variante de répartition “justifiée”)
align-items	alignement dans l'axe secondaire	flex-start (au début) flex-end (à la fin) center (au centre) baseline (généralement identique à flex-start) stretch (étirés dans l’espace disponible, valeur par défaut)
gap	espace entre les éléments
flex-grow	ratio d'étirement dans l'espace restant par rapport aux autres éléments	0 par défaut, ratio
flex-shrink	ratio de réduction par rapport aux autres éléments	1 par défaut, ratio
flex-basis	taille initiale de l’élément avant que l’espace restant ne soit distribué	auto par défaut, taille (px)
flex	regroupe les propriétés flex-grow, flex-shrink, flex-basis	0 1 auto par défaut, les items occupent la taille minimale de leur contenu.

flex avec une liste

ul {
    display: flex;
    padding-left: 0;
}
li {
    list-style: none;
}

Souris / mouse

/* lorsque la souris se retrouve sur un élément de classe class, 
   le curseur devient une main, puis redevient une flèche une fois que la souris a quittée l'élément */
.class:hover {
    cursor: pointer; /* finger */
    cursor: default; /* arrow */
    cursor: text;
    cursor: wait;    /* loader */
}

Valeurs des couleurs

/* Hexadecimal */
background-color: #3F3F3F;

/* RGB */
background-color: rgb(63, 63, 63);
/* RGBA (canal alpha: opacité)*/
background-color: rgba(63, 63, 63, 0);

/* HSL: hue (teinte), saturation, lightness */
background-color: hsl(0, 0, 25%);
/* HSLA */
background-color: hsla(0, 0, 25%, 0);

/* Nom de couleur */
background-color: black;

Noms des couleurs

Transparence

opacity: 0.5;

/* background transparent mais pas le contenu */
background-color: rgba(255, 255, 255, 0.5);

Dégradé

Ultimate CSS Gradient Generator

/* gradient de gauche a droite de white vers black */

background: white; /* pour les browsers qui ne supportent pas CSS3 */

background: linear-gradient(left, white 0%, black 100%); /* W3C */

background: -moz-linear-gradient(left, white 0%, black 100%); /* FF3.6+ */

background: -ms-linear-gradient(left, white 0%, black 100%); /* IE10+ */
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='black', GradientType=1);

background: -webkit-linear-gradient(left, white 0%, black 100%); /* Chrome10+,Safari5.1+ */
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, black));

Transformations 2D

Zoom

body {
    /* supporté par Chrome, Edge, IE, Safari */
    /* mais pas par Firefox ni Opera */
    zoom: 2;

    /* Pour Firefox transform scale peut être utilisé mais est appliqué après le rendu, alors que zoom est appliqué avant */
    -moz-transform: scale(2); /* x2 */
    -moz-transform-origin: 0 0; /* centrer le zoom */
}

How can I zoom an HTML element in Firefox

Rotation

-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);

Transition

div {
    width: 100px;
    transition: width 2s;
    /* transition: property  duration  timing-function (ease par défaut)  delay (0s par défaut); */
}
div:hover {
    width: 300px;
}

div {
    transition-property: top, left;
    transition-duration: 2s;
    transition-timing-function: linear;
    /* linear, ease (ralenti un peu au début et plus à la fin), ease-in (ralenti au début), 
       ease-out (ralenti à la fin), ease-in-out (ralenti au début et à la fin) */
    transition-delay: 2s;
}

transition-timing-function

Animation

@keyframes mon_animation
{
    0%   {font-size: 100%;}
    100% {font-size: 400%;}
}

#mon_texte {
    animation-name: mon_animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Ceaser CSS Easing Animation Tool

Centrer horizontalement un bloc

margin-left: auto;
margin-right: auto;
/* pour une image */
display: block;

/* Autre solution (à mettre dans la balise contenante) */
text-align: center;

Centrer verticalement un bloc

vertical-align: middle;

Comment centrer verticalement sur tous les navigateurs ?

Centrer la balise body

html, body {   
    height: 100%;
    width: 100%;
}
html {
    display: table;
}
body {
    display: table-cell;
    vertical-align: middle;
}

Aligner un bloc à droite

/* avec float */
float: right;

/* avec position */
position: absolute;
right: 0px;

Ombre d'un bloc

box-shadow: 0px 0px 7px 1px black;
/* box-shadow: h-shadow v-shadow blur spread color inset; */

h-shadow → position horizontale
v-shadow → position verticale
blur → distance de flou (0px par défaut, pas de flou)
spread → taille de l'ombre (0px par défaut, même taille que l'original)
color (noir par défaut)
inset → ombre externe (outset par défaut) ou interne (inset)

Remplacez une image

img {
    width: 0; /* on masque l'ancienne image en réduisant sa taille à 0 */
    height: 0;
    padding: 32px; /* création d'un espace pour afficher la nouvelle image (ici 64x64) */
    background: url("nouvelle-image.png");
}

Superposer 2 div

#div1, #div2 {
    position: absolute; /* superpose les div */
    width: 100%;        /* ajuster la taille des div */
    height: 100%;
    text-align: center; /* centrer horizontalement le texte si les div en contiennent */
}

#div1 {
    top: 50%; /* positionner verticalement la div1 */
}

Important

#id { display: none !important; }

Media

Permet d'appliquer un style en fonction du media :

screen → ordinateur
print → imprimante, pdf

@media print {
    body { ... }
}
@media screen {
    body { ... }
}

@media screen and (max-width : 320px){
    body { ... }
}
@media screen and (min-width : 320px){
    body { ... }
}

<head>
    <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
    <link rel="stylesheet" media="print" href="print.css" type="text/css" />

Colonnes

columns

.multicolumns {
    columns: 2;
    -moz-columns: 2;
    -webkit-columns: 2;
    column-gap: 50px;
    -moz-column-gap: 50px;
    -webkit-column-gap: 50px;
}

<div class="multicolumns">
  <p>Texte</p>
  <p>Texte</p>
  <p>Texte</p>
  <p>Texte</p>
</div>

float

<!-- colonne de droite -->
<div style="width:20%; float:right;"> ... </div>
<!-- colonne centrale -->
<div style="width:80%;"> ... </div>

4 Methods For Creating Equal Height Columns In CSS
Equal Height Columns with Cross-Browser CSS

Hyperlink: balise a

/* masque les pointillés */
a {
    outline: none;
}

/* ne pas afficher le texte du lien en bleu */
a {
    color: inherit;
}

/* ne pas souligner le texte */
a:hover {
    text-decoration: none;
}

a:link {
    color: cyan;
}
a:visited {
    color: cyan;
}

Lien d'une couleur et souligné d'une autre couleur

<!-- si le lien est composé de span -->
<a href="...">
    <span>...</span>
    <span>...</span>
</a>

/* souligné bleu */
a, a:visited {
    color: blue;
}
/* texte blanc */
a span {
    color: white;
}

Puces des listes

ul {
    list-style-type: square;  /* types prédéfinis: disc, circle, square */
    list-style-image: url(bullet.gif);
}

/* pour une gestion plus fine des puces utiliser une background-image */
ul {
    list-style-type: none;
    list-style-image: none;
    padding: 0;
    margin: 0;
    margin-left: .2em;
}

ul > li {
    background-image: url(icon.svg);
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: 0 .2em;
    padding-left: 1.4em;
}

Importer d'autres feuilles CSS

@import url("monstyle.css");

Debugger

Pour Firefox : add-on Firebug
Pour les autres navigateurs : Firebug Lite. Ajouter la fonction javascript dans un marque-page → aller sur la page à debugger et ouvrir le marque-page.

Réduire la taille d'un fichier css (minify)

esbuild

# installer esbuild
sudo pacman -S esbuild

esbuild --minify file.css --outfile=file.min.css

clean-css

# installer clean-css
npm -g install clean-css-cli

cleancss -o mon-fichier-min.css mon-fichier.css