Programmation

Termes d'édition CSS pour modifier une page

Référence consultable pour nommer header, boutons, espacements, hover, responsive et autres notions CSS.

63 résultats

Structure de page

Header

Sens

The top area of a page, usually holding the site title, navigation, theme controls, language controls, and menu button.

Modification

Changing header padding, height, border, or position changes how tall and fixed the top area feels.

Note

A taller header can reduce the visible content area, especially on mobile.

CSS lié

headerpaddingheightpositionborder-bottom

Exemple de demande

Make the mobile header title smaller while keeping the header height the same.

Structure de page

Footer

Sens

The bottom area of a page, often used for links, legal text, contact information, or small navigation.

Modification

Footer padding and border changes affect the amount of breathing room and the separation from the content above.

CSS lié

footerpaddingborder-topmargin-top

Exemple de demande

Add more top padding to the footer so it does not feel attached to the content.

Structure de page

Section

Sens

A large content area that groups related content such as a hero, tools list, reference cards, or article block.

Modification

Section padding changes the vertical rhythm of the page. Background changes make the section feel separate.

CSS lié

sectionpadding-blockborder-topbackground

Exemple de demande

Reduce the vertical padding of the tools section on mobile.

Structure de page

Container

Sens

An inner wrapper that keeps page content from stretching too wide on large screens.

Modification

Increasing max-width makes content wider. Increasing side padding keeps content away from screen edges.

CSS lié

max-widthmargin-inlinepadding-inline

Exemple de demande

Make the main container a little narrower on desktop.

Structure de page

Card

Sens

A framed block that presents one repeated item, such as a tool, reference entry, or result.

Modification

Card padding, border, radius, and shadow control how dense or prominent each item feels.

CSS lié

borderborder-radiuspaddingbackgroundbox-shadow

Exemple de demande

Make the reference cards more compact by reducing their padding.

Structure de page

Panel

Sens

A framed working area, usually holding controls, inputs, settings, or output.

Modification

Panel spacing and layout changes affect how easy repeated tool use feels.

CSS lié

borderbackgroundpaddingdisplay

Exemple de demande

Align the panel controls in one row on desktop and stack them on mobile.

Structure de page

Navigation

Sens

A group of links or buttons used to move between major pages or categories.

Modification

Gap, alignment, and visibility rules change how the navigation behaves on desktop and mobile.

CSS lié

navdisplaygapalign-items

Exemple de demande

Hide the navigation links on small screens and keep the menu button visible.

Structure de page

Sidebar

Sens

A vertical area at the left or right side of the page, often used for navigation or filters.

Modification

Sidebar width and responsive rules decide whether it stays visible, collapses, or moves below content.

CSS lié

asidewidthpositiongrid-template-columns

Exemple de demande

Move the filter sidebar below the content on mobile.

Structure de page

Hero

Sens

The first large section of a page that introduces the main purpose or action.

Modification

Hero padding, title size, and layout affect the first impression and how much content fits in the first viewport.

CSS lié

paddingbackgroundmin-heightgrid

Exemple de demande

Reduce the hero title size on mobile so the action buttons stay visible.

Espacement et taille

Padding

Sens

Space inside an element, between the border and the content.

Modification

Increasing padding-top adds more space above the content inside the element.

Note

More padding usually increases the visible size of the element.

CSS lié

paddingpadding-toppadding-rightpadding-bottompadding-left

Exemple de demande

Increase the top padding of the header slightly.

Espacement et taille

Margin

Sens

Space outside an element, between it and neighboring elements.

Modification

Increasing margin-bottom pushes the next element farther down.

CSS lié

marginmargin-topmargin-rightmargin-bottommargin-left

Exemple de demande

Add more margin between the hero section and the tools list.

Espacement et taille

Gap

Sens

The space between items inside a flex or grid layout.

Modification

Increasing gap spreads sibling items apart without adding extra space around the whole group.

CSS lié

gaprow-gapcolumn-gap

Exemple de demande

Reduce the gap between the theme button, language button, and menu button.

Espacement et taille

Width

Sens

The horizontal size of an element.

Modification

A fixed width keeps the element stable. max-width lets it shrink on small screens.

CSS lié

widthmin-widthmax-width

Exemple de demande

Make the menu panel width match its longest item.

Espacement et taille

Height

Sens

The vertical size of an element.

Modification

Fixed height can keep a header stable. max-height with overflow can keep dropdowns from becoming too tall.

CSS lié

heightmin-heightmax-height

Exemple de demande

Keep the header height stable while making the title smaller.

Espacement et taille

Max width

Sens

The largest width an element is allowed to reach.

Modification

Lowering max-width makes text lines shorter and panels narrower on large screens.

CSS lié

max-widthwidth

Exemple de demande

Set a max-width on the dropdown so it does not cover too much of the page.

Espacement et taille

Top / Right / Bottom / Left

Sens

Position offsets used with positioned elements.

Modification

right: 0 aligns a floating panel to the right edge of its positioned parent.

CSS lié

toprightbottomleftinset

Exemple de demande

Align the open menu panel to the right side of the header controls.

Texte

Font weight

Sens

How thick or bold the text appears.

Modification

Increasing font-weight makes labels more prominent without changing their size.

CSS lié

font-weightfont-boldfont-semibold

Exemple de demande

Make the category labels a little bolder.

Texte

Line height

Sens

The vertical space each line of text occupies.

Modification

Increasing line-height makes paragraphs easier to read. Reducing it makes compact UI labels tighter.

CSS lié

line-heightleading

Exemple de demande

Increase the paragraph line-height in the hero description.

Texte

Letter spacing

Sens

The space between individual letters.

Modification

Small positive spacing can help uppercase labels feel clearer. Too much spacing can make Korean text awkward.

CSS lié

letter-spacingtracking

Exemple de demande

Remove negative letter spacing from compact buttons.

Texte

Text align

Sens

The horizontal alignment of text inside its container.

Modification

Right-aligned menu text can make a floating menu feel attached to the right edge.

CSS lié

text-align

Exemple de demande

Right-align the menu item text inside the menu panel.

Texte

Wrap / No wrap

Sens

Whether long text can move to the next line or must stay on one line.

Modification

No-wrap keeps a header stable, while wrapping can show more text but usually increases height.

CSS lié

white-spaceword-breakoverflow-wrap

Exemple de demande

Keep the mobile title on one line and truncate the overflow.

Texte

Truncate / Ellipsis

Sens

A way to cut off overflowing single-line text and show dots.

Modification

Truncation prevents layout breakage when labels are longer than expected.

CSS lié

overflowtext-overflowwhite-space

Exemple de demande

Truncate the site title on very small screens.

Couleur et arrière-plan

Color

Sens

The color of text or icons.

Modification

Changing color affects readability and visual priority.

CSS lié

color

Exemple de demande

Make the selected language text visible in dark mode.

Couleur et arrière-plan

Background

Sens

The color or image behind an element's content.

Modification

Background changes can separate panels, highlight active states, or improve contrast.

CSS lié

backgroundbackground-color

Exemple de demande

Use a darker background for the selected language item in dark mode.

Couleur et arrière-plan

Opacity

Sens

How transparent an element is.

Modification

Lower opacity makes elements quieter, but it can reduce readability.

CSS lié

opacityrgbacolor-mix

Exemple de demande

Make disabled controls look dimmer without making the text unreadable.

Couleur et arrière-plan

Gradient

Sens

A smooth transition between two or more colors.

Modification

Subtle gradients can add depth, but strong gradients can make tools feel less practical.

CSS lié

linear-gradientradial-gradientbackground-image

Exemple de demande

Keep the hero background subtle and avoid a strong gradient.

Couleur et arrière-plan

Accent color

Sens

A repeated highlight color used for labels, active states, or important actions.

Modification

Changing the accent color changes the page's visual identity and emphasis.

CSS lié

colorbackgroundborder-coloraccent-color

Exemple de demande

Use the same green accent for category labels and active chips.

Couleur et arrière-plan

Contrast

Sens

The difference between foreground and background colors.

Modification

Higher contrast improves readability, especially in dark mode and on mobile screens.

CSS lié

colorbackground-color

Exemple de demande

Increase the contrast of dropdown items in dark mode.

Bordure et forme

Border

Sens

A line around an element.

Modification

Border width and color control how strongly a box or button is separated from the background.

CSS lié

borderborder-colorborder-widthborder-style

Exemple de demande

Make the menu panel border slightly darker in dark mode.

Bordure et forme

Border radius

Sens

How rounded the corners of a box or button are.

Modification

A small radius feels practical and compact. A large radius feels softer and more playful.

CSS lié

border-radius

Exemple de demande

Keep cards at an 8px border radius.

Bordure et forme

Box shadow

Sens

A shadow around an element that makes it feel raised above the page.

Modification

Stronger shadows make floating menus or modals feel layered. Too much shadow can feel heavy.

CSS lié

box-shadow

Exemple de demande

Add a subtle shadow to the floating menu panel.

Bordure et forme

Outline

Sens

A line shown around an element, often when it is focused by keyboard navigation.

Modification

A clear outline helps keyboard users know which control is active.

CSS lié

outlineoutline-offset:focus-visible

Exemple de demande

Keep a visible focus outline on icon buttons.

Bordure et forme

Divider

Sens

A line used to separate sections or groups.

Modification

A divider can make category boundaries clearer without adding much visual weight.

CSS lié

border-topborder-bottomhr

Exemple de demande

Add subtle dividers between menu categories.

Mise en page et position

Display

Sens

The basic layout mode of an element.

Modification

display: none hides an element. flex and grid arrange child items.

CSS lié

displaydisplay: nonedisplay: flexdisplay: grid

Exemple de demande

Hide the desktop navigation on mobile screens.

Mise en page et position

Flex

Sens

A layout method for arranging items in a row or column.

Modification

flex-direction: column stacks items vertically. flex-wrap allows items to move to the next line.

CSS lié

display: flexflex-directionflex-wrapgap

Exemple de demande

Keep the header controls in a flex row.

Mise en page et position

Grid

Sens

A layout method for arranging content in rows and columns.

Modification

Changing grid columns controls how many cards appear per row.

CSS lié

display: gridgrid-template-columnsgrid-columngap

Exemple de demande

Show four tool cards per row on wide desktop screens.

Mise en page et position

Align items

Sens

How items are aligned on the cross axis inside flex or grid.

Modification

align-items: center vertically centers controls in a header row.

CSS lié

align-itemsplace-items

Exemple de demande

Vertically center the title and header buttons.

Mise en page et position

Justify content

Sens

How items are distributed on the main axis inside flex or grid.

Modification

justify-content: space-between pushes groups to opposite sides.

CSS lié

justify-contentjustify-itemsmargin-left: auto

Exemple de demande

Keep the title on the left and controls on the right.

Mise en page et position

Position

Sens

How an element is placed in relation to the page or another element.

Modification

position: absolute lets a dropdown float without pushing the page layout down.

CSS lié

positionrelativeabsolutefixedsticky

Exemple de demande

Make the menu panel absolute so it does not push the page down.

Mise en page et position

Z-index

Sens

The stacking order of positioned elements.

Modification

A higher z-index can place dropdowns above page content.

Note

z-index only works predictably when positioning and stacking contexts are considered.

CSS lié

z-indexposition

Exemple de demande

Raise the language dropdown above the menu panel.

Mise en page et position

Overflow

Sens

What happens when content is larger than its container.

Modification

overflow-y: auto allows a long menu to scroll instead of extending beyond the screen.

CSS lié

overflowoverflow-xoverflow-ymax-height

Exemple de demande

Make long dropdown menus scroll inside a max-height.

Responsive

Breakpoint

Sens

A screen width where the layout changes.

Modification

Changing a breakpoint decides whether tablets behave more like mobile or desktop.

CSS lié

@mediasmmdlgxl

Exemple de demande

Treat tablets as desktop for the top navigation.

Responsive

Mobile

Sens

Styles intended for small phone-sized screens.

Modification

Mobile styles often reduce font size, stack columns, and keep controls touch-friendly.

CSS lié

@mediamax-widthsm

Exemple de demande

On mobile, stack the cards in one column.

Responsive

Desktop

Sens

Styles intended for wider laptop or desktop screens.

Modification

Desktop styles can use more columns, horizontal navigation, and wider content containers.

CSS lié

@mediamin-widthlgxl

Exemple de demande

On desktop, keep the category navigation visible in the header.

Responsive

Viewport

Sens

The visible area of the browser or device screen.

Modification

Viewport units make sizes relative to the visible screen.

CSS lié

vwvh100vw100vh

Exemple de demande

Limit the menu width to the viewport so it does not overflow on phones.

Responsive

Sens

A design that adjusts to different screen sizes.

Modification

Responsive rules can make the same component horizontal on desktop and vertical on mobile.

CSS lié

@mediaclampmin()max()

Exemple de demande

Make the controls responsive without changing their order.

États d'interaction

Hover

Sens

The state when a mouse pointer is over an element.

Modification

Hover styles can change background, text color, border, or shadow to show that an item is interactive.

Note

Touch devices do not have reliable hover behavior, so important actions should also work by click or tap.

CSS lié

:hoverbackgroundcolortransition

Exemple de demande

Add a background color change when hovering over menu items.

États d'interaction

Active

Sens

The short state while a button or link is being pressed.

Modification

Active styles can make buttons feel tactile with a small color or position change.

CSS lié

:activetransformbackground

Exemple de demande

Add a slight pressed effect to toolbar buttons.

États d'interaction

Focus

Sens

The state when an input, button, or link is currently selected for keyboard or typing.

Modification

Focus styles make keyboard navigation visible and accessible.

CSS lié

:focus:focus-visibleoutline

Exemple de demande

Make the search input focus ring match the accent color.

États d'interaction

Disabled

Sens

A state where a control is visible but cannot be used.

Modification

Disabled styles often reduce contrast and remove pointer interaction.

CSS lié

:disabledopacitycursorpointer-events

Exemple de demande

Make disabled buttons visibly inactive but still readable.

États d'interaction

Selected

Sens

The state of the currently chosen item in a list, tab group, or menu.

Modification

Selected styles usually need stronger background or text color than normal items.

CSS lié

aria-currentdata-statebackgroundcolor

Exemple de demande

Make the selected category chip clearly different from the others.

États d'interaction

Open / Closed

Sens

Whether a dropdown, menu, or accordion panel is currently visible.

Modification

Open and closed states need clear indicators such as plus/minus icons or arrow rotation.

CSS lié

aria-expandeddisplayheightvisibility

Exemple de demande

Keep all menu categories closed by default.

Composants UI

Button

Sens

A control that performs an action when clicked or tapped.

Modification

Button padding, border, color, and states determine how easy and important it feels.

CSS lié

buttonpaddingborderbackgroundcursor

Exemple de demande

Make the primary action button more prominent than the secondary button.

Composants UI

Icon button

Sens

A button represented mainly by an icon instead of text.

Modification

Stable width and height prevent icon buttons from shifting as states change.

CSS lié

buttonwidthheightaria-labeldisplay: grid

Exemple de demande

Keep the menu icon button square and aligned with the language button.

Composants UI

Dropdown

Sens

A floating list that appears after pressing a button or select control.

Modification

Dropdown position, width, max-height, and z-index control placement and layering.

CSS lié

positiontoprightz-indexbox-shadow

Exemple de demande

When the language dropdown opens, close the site menu.

Composants UI

Accordion

Sens

A section that can be opened or closed to show or hide its content.

Modification

Accordions make long menus shorter by keeping categories closed until needed.

CSS lié

aria-expandedheightdisplayoverflow

Exemple de demande

Add open and close behavior to each menu category.

Composants UI

Tabs

Sens

A control for switching between related views without leaving the page.

Modification

Selected tab styling must clearly show which view is active.

CSS lié

role=tablistdisplayborderbackground

Exemple de demande

Make the active tab background darker than inactive tabs.

Composants UI

Modal

Sens

A focused overlay panel that appears above the page.

Modification

Modal width, backdrop, and z-index control how strongly it interrupts the page.

CSS lié

dialogposition: fixedinsetz-indexbackdrop

Exemple de demande

Center the modal and keep it narrower than the viewport.

Composants UI

Tooltip

Sens

A small hint shown near a control, often on hover or focus.

Modification

Tooltips help explain icon-only buttons without adding permanent text.

CSS lié

positiontitlearia-describedbyz-index

Exemple de demande

Add a tooltip that labels the menu icon button.

Composants UI

Input

Sens

A field where the user types text or values.

Modification

Input padding, border, placeholder color, and focus style affect comfort and clarity.

CSS lié

inputborderpaddingplaceholder:focus

Exemple de demande

Make the search input full width and easier to tap on mobile.

Composants UI

Badge / Chip

Sens

A small rounded label or filter control.

Modification

Chip size, radius, and active color affect how scannable filters feel.

CSS lié

border-radiuspaddingbackgroundfont-size

Exemple de demande

Make active category chips visually stronger.

Termes d'édition CSS pour modifier une page

Header

Sens

Modification

Note

CSS lié

Exemple de demande

Footer

Sens

Modification

CSS lié

Exemple de demande

Section

Sens

Modification

CSS lié

Exemple de demande

Container

Sens

Modification

CSS lié

Exemple de demande

Card

Sens

Modification

CSS lié

Exemple de demande

Panel

Sens

Modification

CSS lié

Exemple de demande

Navigation

Sens

Modification

CSS lié

Exemple de demande

Menu

Sens

Modification

Note

CSS lié

Exemple de demande

Sidebar

Sens

Modification

CSS lié

Exemple de demande

Hero

Sens

Modification

CSS lié

Exemple de demande

Padding

Sens

Modification

Note

CSS lié

Exemple de demande

Margin

Sens

Modification

CSS lié

Exemple de demande

Gap

Sens

Modification

CSS lié

Exemple de demande

Width

Sens

Modification

CSS lié

Exemple de demande

Height

Sens

Modification

CSS lié

Exemple de demande

Max width