The CSS properties that actually matter
The language has hundreds of properties. A small set is enough to build almost every interface. Here they are, what they actually do, and the traps that cost the most time.
Text
It is the first thing a visitor reads, and the last thing that is set correctly. A handful of properties carry most of readability: size, weight, line height, and line length.
color
The colour of text. It is inherited by child elements, so you can set it once on a container.
color: #8e66f1;
color: rgb(142 102 241 / 60%);font-size
The size of text. In rem it stays relative to the browser setting, which respects people who raised their default. The clamp() function bounds a fluid size between a minimum and a maximum.
font-size: 1rem;
font-size: clamp(1.5rem, 4vw, 3rem);font-weight
The weight. Numeric values are more precise than keywords, and a variable font accepts every value in between.
font-weight: 400;
font-weight: 700;
font-weight: 550;line-height
The leading. Unitless, it is computed from the text size and stays right when that size changes — almost always the form to prefer.
line-height: 1.6;
line-height: 1.15; /* titres */text-align
Horizontal alignment. Justified text opens white rivers in narrow columns: avoid it on mobile.
text-align: left;
text-align: center;text-decoration
Underlines and strikethroughs. Removing the underline from a link inside a paragraph removes the only clue that sets it apart for many readers.
text-decoration: underline;
text-decoration: line-through;text-wrap
How lines break. The balance value spreads a short heading over lines of similar length; pretty avoids a lone word at the end of a paragraph.
text-wrap: balance;
text-wrap: pretty;The box: dimensions, margins, borders
Every element is a box made of content, inner padding, a border, and an outer margin. The declaration that follows is worth setting once and for all: it makes the requested width the obtained width, border and padding included.
*, *::before, *::after { box-sizing: border-box; }width / height
The dimensions. A fixed height always ends up cutting text that runs longer than expected: let the content decide, and bound it with min-height or max-width.
width: 100%;
max-width: 65ch;
min-height: 100svh;padding
The inner padding, between content and border. Values read clockwise from the top.
padding: 16px;
padding: 16px 24px;
padding-block: 16px;margin
The outer margin. Two adjacent vertical margins collapse rather than add up — a classic surprise, which using gap inside a flex or grid container avoids entirely.
margin: 0 auto;
margin-top: 24px;border
The border: width, style, colour. It takes up space, so it counts towards the total width.
border: 1px solid rgb(255 255 255 / 12%);
border-bottom: 2px solid #ffbf0f;border-radius
The corner radius. As a percentage on a square, it produces a circle.
border-radius: 10px;
border-radius: 50%;background
The background: colour, image or gradient, stacked from front to back if there are several.
background: #0d0d12;
background: linear-gradient(180deg, #1a1a24, #0d0d12);aspect-ratio
The width-to-height ratio. On an image or a video it reserves the space before loading and stops the page jumping when the media arrives.
aspect-ratio: 16 / 9;
aspect-ratio: 1;Position, stacking, and overflow
These few properties decide the place an element occupies, what passes in front, and what overflows. They are also the ones that produce the longest bugs to diagnose, because their effect depends on the parent.
position
relative leaves the element in the flow and mostly serves as an anchor for its children. absolute takes it out of the flow and positions it against the nearest positioned parent. fixed pins it to the viewport, sticky lets it follow then stop.
position: relative;
position: absolute;
position: sticky;inset
The offset of a positioned element, in one declaration rather than top, right, bottom and left separately.
inset: 0;
inset: auto auto 16px 16px;z-index
The stacking order. It only acts on a positioned element, and only within its own stacking context: a very high value will not push a child in front of another parent. Keep to a short, documented scale.
position: relative;
z-index: 10;overflow
What happens to content that overflows. Keep auto for the container of a table or a wide code block, so the page itself never scrolls sideways.
overflow: hidden;
overflow-x: auto;Layout: flex and grid
The short rule: flex distributes items on a single row or column and lets their sizes adapt; grid lays a frame of rows and columns and places content in it. A navigation bar belongs to the first, a card gallery to the second.
In both cases, gap replaces margins to space children — no margin collapse, no leftover margin on the last item.
display
The layout mode. none removes the element from display and from reading order, but not from the HTML — a menu hidden this way is still in the document.
display: flex;
display: grid;
display: none;gap
The space between the children of a flex or grid container. Two values separate vertical from horizontal spacing.
gap: 16px;
gap: 24px 16px;justify-content / align-items
Distribution along the main axis, and alignment on the cross axis. In horizontal flex the first acts horizontally and the second vertically; switching to column swaps them.
justify-content: space-between;
align-items: center;flex
How a child takes up the remaining space: how much it can grow, how much it can shrink, its base size. A value of 1 lets children share the room equally.
flex: 1;
flex: 0 0 240px;grid-template-columns
The columns of the grid. The fr unit is a fraction of the available space; auto-fit with minmax produces a grid that reflows on its own, with no breakpoint to write.
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));Effects and motion
The last group sets what moves and what answers the pointer. Two principles: animate only transform and opacity, the only properties the browser handles without recalculating layout; and respect people who asked for less animation, which is what the query below does.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}transition
The gradual passage from one state to another: which property, how long, what curve. Naming the property rather than using all avoids animating, by accident, whatever was just added.
transition: opacity .2s ease-out;
transition: transform .3s cubic-bezier(.2, .8, .2, 1);transform
Move, resize or rotate without disturbing the layout around it. This is the property to reach for whenever something moves.
transform: translateY(-4px);
transform: scale(1.03) rotate(2deg);opacity
Transparency, from 0 to 1. It applies to the whole element, children included: stacking twenty shapes at low opacity gives an opaque mass, not a veil.
opacity: 1;
opacity: .5;box-shadow
A drop shadow: horizontal offset, vertical offset, blur, then colour. A transparent colour reads truer than a flat grey.
box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);cursor
The cursor shown on hover. The pointer value signals what is clickable; do not put it on what is not.
cursor: pointer;
cursor: not-allowed;pointer-events
How the element reacts to the mouse. The none value lets the cursor through — useful for a decorative layer sitting over clickable content.
pointer-events: none;
pointer-events: auto;Les points qui restent à trancher
Must every CSS property be known?
No. The set gathered here covers the vast majority of interfaces. The rest is learned case by case, when a precise need appears — more effective than trying to memorise an exhaustive list.
px, rem, em, or percentage?
rem for text sizes and spacing, because it follows the browser setting; px for details that must not move, such as border thickness; percentages and fr for widths in a layout; ch to cap a line length.
Flex or grid?
Flex when items follow one axis and their size depends on their content: a navigation bar, a row of buttons. Grid when the frame exists independently of the content: a gallery, a dashboard, a page in columns.
How do you avoid writing !important?
By checking stylesheet load order first, then targeting the component class rather than a long selector chain. A priority declaration remains acceptable to neutralise an inline style set by a third-party tool, with a comment that explains what it bypasses.
Confronter le guide à un projet réel.
Quelques lignes suffisent : contexte, contrainte principale et résultat attendu.