Antisèche CSS
Une référence CSS consultable et imprimable — sélecteurs, modèle de boîte, flexbox, grid, typographie, transitions et fonctionnalités modernes. Gratuit.
Selectors
13.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list
Box model
7box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows
Flexbox
8display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item
Grid
8display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)
Colors & background
7color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors
Positioning
6position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order
Transitions & animation
5transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize
Responsive & modern
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query
Aucune entrée ne correspond à « :q ».
À propos de Antisèche CSS
Cet aide-mémoire CSS regroupe sur une seule page consultable les propriétés utilisées au quotidien : sélecteurs, modèle de boîte, flexbox, grid, typographie, couleurs et arrière-plans, positionnement, transitions et animation, et une section sur le CSS moderne et responsive.
Il est organisé pour que la réponse à « comment s'appelait cette propriété déjà ? » soit à une recherche de distance — les sections flexbox et grid en particulier listent les propriétés d'alignement et de mise en page avec des valeurs que vous pouvez copier directement dans une feuille de style, et la section moderne garde les fonctionnalités récentes à portée de main.
La fiche est gratuite, se charge côté client, filtre en direct pendant que vous tapez, et permet de copier n'importe quelle déclaration d'un clic. Un sommaire flottant permet de sauter entre les sections et le bouton d'impression produit une référence papier soignée.
Comment utiliser Antisèche CSS
- Parcourez la liste des sections — Sélecteurs, Modèle de boîte, Flexbox, Grid, Typographie et plus.
- Tapez une propriété ou un concept comme grid, hover ou transition dans le champ de recherche pour filtrer chaque ligne.
- Sautez vers une section comme Positionnement via le sommaire flottant.
- Cliquez sur un extrait ou son icône de copie pour copier la déclaration CSS.
- Imprimez la fiche pour une référence CSS à garder sur votre bureau.
Questions fréquentes
Neuf sections : sélecteurs, modèle de boîte, flexbox, grid, typographie, couleurs et arrière-plans, positionnement, transitions et animation, et CSS responsive et moderne.
Oui — les deux ont leur propre section avec les propriétés de conteneur et d'élément, les valeurs d'alignement et les formes abrégées, qui sont les recherches les plus fréquentes des développeurs.
Oui. Au-delà du socle classique, une section dédiée au responsive et au CSS moderne couvre les fonctionnalités récentes que vous rencontrez dans les feuilles de style actuelles, ainsi que les patterns de media queries.
Oui. Cliquez sur le code ou l'icône de copie au survol et la déclaration est dans votre presse-papiers, confirmée par un bref message « Copié ! ».
Oui, entièrement gratuit — une page côté client avec recherche en direct, sans connexion et sans limite d'utilisation.
Recherches populaires
css cheat sheet
liste des sélecteurs css
propriétés flexbox css
propriétés grid css
référence du modèle de boîte css
valeurs de position css
syntaxe des transitions et animations css
référence des propriétés css
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.