Cheat sheet: Look and layout

The 35 terms of this lesson, part by part, with the French word a team in France would use.

1. One set of rules for every page

CSSCSS: the language of style rules that decide how each part of a page looks and where it is placed on the screen.
Style rulerègle CSS: an instruction in CSS that says how every element of one kind looks, such as "main buttons are blue".
Elementélément: one part of a page in the HTML, such as a heading, a paragraph, a link, a picture or a button.
Inspectinspecter: the right-click choice that opens the developer tools on one part of the page, with its live HTML and style rules.
Styles panelpanneau Styles: the part of the developer tools that lists every style rule applied to the selected element, with its file.
Quotedevis: a firm written offer with the price, the dates and the work included, signed before the work starts.

Design tokendesign token: a colour, font or spacing defined once under a name, such as "brand colour", which every style rule uses.
CSS variablevariable CSS: a named value in CSS, written like --brand and used as var(--brand), often to hold a design token.
Hex colour codecode couleur hexadécimal: a colour written as # and six characters, such as #c2410c for orange or #2563eb for blue.
Selectorsélecteur: the first part of a style rule, which says which elements it applies to, such as button or .buy.
Classclasse: a name given to elements in the HTML, such as class="buy", so that one style rule can apply to all of them.
Dark modemode sombre: a second set of colours for a site, with dark backgrounds and light text.
Design systemdesign system: the shared tokens and reusable blocks, such as buttons and cards, that a site's designers and developers both use.
Contrast ratiorapport de contraste: a measure of the difference in brightness between text and its background, at least 4.5 to 1 for main text.

Responsiveresponsive: describes a page that rearranges itself to fit every screen, from a small phone to a wide monitor.
Mockupmaquette: a picture of what a page will look like, made before the site is built.
Mobile firstmobile first: the method of designing the phone version of a page first, then adding columns as the screen gets wider.
Breakpointpoint de rupture: the width at which a layout changes, such as one column instead of three below 480 pixels.
Container querycontainer query: a CSS rule, written @container, that applies only when the space for a block is narrower or wider than a given width.
Media querymedia query: a CSS rule, written @media, that applies only when the screen is narrower or wider than a given width.
CSS gridgrille CSS: a CSS layout tool that places blocks in rows and columns, such as three projects side by side.
Device modemode responsive: the view of the developer tools, opened with Ctrl+Shift+M, that shows a page at any screen size.

remrem: a unit for sizes relative to the reader's chosen text size, so they grow when the reader chooses larger text.
Pixelpixel: the unit for fixed sizes on a screen, where a typical phone screen is about 375 pixels wide.
Tab keytouche Tab: the key that moves from one link, button or form field to the next, so that a page can be used without a mouse.
Focus outlineindicateur de focus: the visible outline that shows which link, button or form field the Tab key has reached.
Contrast ratiorapport de contraste: a measure of the difference in brightness between text and its background, at least 4.5 to 1 for main text.
Reduced motionréduire les animations: a system setting with which visitors ask for fewer animations, and which a well-made page respects.

Mockupmaquette: a picture of what a page will look like, made before the site is built.
Design tokendesign token: a colour, font or spacing defined once under a name, such as "brand colour", which every style rule uses.
Design systemdesign system: the shared tokens and reusable blocks, such as buttons and cards, that a site's designers and developers both use.
Focus outlineindicateur de focus: the visible outline that shows which link, button or form field the Tab key has reached.
Quotedevis: a firm written offer with the price, the dates and the work included, signed before the work starts.
Cascadecascade: the rules that CSS follows to decide which style rule wins when several apply to the same element.
!important!important: a marker that makes a style rule beat the usual rules, and makes every later change harder.

Web Technologies · How a page is made · wt.thomasjuldo.com/course/how-a-page-is-made/look-and-layout