Engineering Tools for AI

Programming

CSS Editing Terms for Page Changes

A searchable reference for naming headers, buttons, spacing, hover states, responsive behavior, and other CSS concepts when asking for page edits.

63 matching terms

Page structure

Header

Header

Meaning

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

What changes

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.

Related CSS

headerpaddingheightpositionborder-bottom

Request example

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

Page structure

Footer

Footer

Meaning

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

What changes

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

Related CSS

footerpaddingborder-topmargin-top

Request example

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

Page structure

Section

Section

Meaning

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

What changes

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

Related CSS

sectionpadding-blockborder-topbackground

Request example

Reduce the vertical padding of the tools section on mobile.

Page structure

Container

Container

Meaning

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

What changes

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

Related CSS

max-widthmargin-inlinepadding-inline

Request example

Make the main container a little narrower on desktop.

Page structure

Card

Card

Meaning

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

What changes

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

Related CSS

borderborder-radiuspaddingbackgroundbox-shadow

Request example

Make the reference cards more compact by reducing their padding.

Page structure

Panel

Panel

Meaning

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

What changes

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

Related CSS

borderbackgroundpaddingdisplay

Request example

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

Page structure

Navigation

Navigation

Meaning

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

What changes

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

Related CSS

navdisplaygapalign-items

Request example

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

Page structure

Menu

Menu

Meaning

A list of links or actions that opens from a button.

What changes

Position, width, and z-index decide where the menu opens and whether it appears above other content.

Note

If the menu is placed in normal document flow, it can push the whole page down.

Related CSS

positionrighttopz-indexwidth

Request example

Make the menu open as a floating panel aligned to the right.

Page structure

Sidebar

Sidebar

Meaning

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

What changes

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

Related CSS

asidewidthpositiongrid-template-columns

Request example

Move the filter sidebar below the content on mobile.

Page structure

Hero

Hero

Meaning

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

What changes

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

Related CSS

paddingbackgroundmin-heightgrid

Request example

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

Spacing and size

Padding

Padding

Meaning

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

What changes

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

Note

More padding usually increases the visible size of the element.

Related CSS

paddingpadding-toppadding-rightpadding-bottompadding-left

Request example

Increase the top padding of the header slightly.

Spacing and size

Margin

Margin

Meaning

Space outside an element, between it and neighboring elements.

What changes

Increasing margin-bottom pushes the next element farther down.

Related CSS

marginmargin-topmargin-rightmargin-bottommargin-left

Request example

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

Spacing and size

Gap

Gap

Meaning

The space between items inside a flex or grid layout.

What changes

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

Related CSS

gaprow-gapcolumn-gap

Request example

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

Spacing and size

Width

Width

Meaning

The horizontal size of an element.

What changes

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

Related CSS

widthmin-widthmax-width

Request example

Make the menu panel width match its longest item.

Spacing and size

Height

Height

Meaning

The vertical size of an element.

What changes

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

Related CSS

heightmin-heightmax-height

Request example

Keep the header height stable while making the title smaller.

Spacing and size

Max width

Max width

Meaning

The largest width an element is allowed to reach.

What changes

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

Related CSS

max-widthwidth

Request example

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

Spacing and size

Top / Right / Bottom / Left

Top / Right / Bottom / Left

Meaning

Position offsets used with positioned elements.

What changes

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

Related CSS

toprightbottomleftinset

Request example

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

Text

Font size

Font size

Meaning

The size of text.

What changes

Reducing font-size helps long labels fit in tight spaces such as mobile headers.

Related CSS

font-sizetext-smtext-lg

Request example

Make the mobile site title smaller but keep it on one line.

Text

Font weight

Font weight

Meaning

How thick or bold the text appears.

What changes

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

Related CSS

font-weightfont-boldfont-semibold

Request example

Make the category labels a little bolder.

Text

Line height

Line height

Meaning

The vertical space each line of text occupies.

What changes

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

Related CSS

line-heightleading

Request example

Increase the paragraph line-height in the hero description.

Text

Letter spacing

Letter spacing

Meaning

The space between individual letters.

What changes

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

Related CSS

letter-spacingtracking

Request example

Remove negative letter spacing from compact buttons.

Text

Text align

Text align

Meaning

The horizontal alignment of text inside its container.

What changes

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

Related CSS

text-align

Request example

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

Text

Wrap / No wrap

Wrap / No wrap

Meaning

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

What changes

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

Related CSS

white-spaceword-breakoverflow-wrap

Request example

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

Text

Truncate / Ellipsis

Truncate / Ellipsis

Meaning

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

What changes

Truncation prevents layout breakage when labels are longer than expected.

Related CSS

overflowtext-overflowwhite-space

Request example

Truncate the site title on very small screens.

Color and background

Color

Color

Meaning

The color of text or icons.

What changes

Changing color affects readability and visual priority.

Related CSS

color

Request example

Make the selected language text visible in dark mode.

Color and background

Background

Background

Meaning

The color or image behind an element's content.

What changes

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

Related CSS

backgroundbackground-color

Request example

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

Color and background

Opacity

Opacity

Meaning

How transparent an element is.

What changes

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

Related CSS

opacityrgbacolor-mix

Request example

Make disabled controls look dimmer without making the text unreadable.

Color and background

Gradient

Gradient

Meaning

A smooth transition between two or more colors.

What changes

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

Related CSS

linear-gradientradial-gradientbackground-image

Request example

Keep the hero background subtle and avoid a strong gradient.

Color and background

Accent color

Accent color

Meaning

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

What changes

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

Related CSS

colorbackgroundborder-coloraccent-color

Request example

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

Color and background

Contrast

Contrast

Meaning

The difference between foreground and background colors.

What changes

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

Related CSS

colorbackground-color

Request example

Increase the contrast of dropdown items in dark mode.

Border and shape

Border

Border

Meaning

A line around an element.

What changes

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

Related CSS

borderborder-colorborder-widthborder-style

Request example

Make the menu panel border slightly darker in dark mode.

Border and shape

Border radius

Border radius

Meaning

How rounded the corners of a box or button are.

What changes

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

Related CSS

border-radius

Request example

Keep cards at an 8px border radius.

Border and shape

Box shadow

Box shadow

Meaning

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

What changes

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

Related CSS

box-shadow

Request example

Add a subtle shadow to the floating menu panel.

Border and shape

Outline

Outline

Meaning

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

What changes

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

Related CSS

outlineoutline-offset:focus-visible

Request example

Keep a visible focus outline on icon buttons.

Border and shape

Divider

Divider

Meaning

A line used to separate sections or groups.

What changes

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

Related CSS

border-topborder-bottomhr

Request example

Add subtle dividers between menu categories.

Layout and position

Display

Display

Meaning

The basic layout mode of an element.

What changes

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

Related CSS

displaydisplay: nonedisplay: flexdisplay: grid

Request example

Hide the desktop navigation on mobile screens.

Layout and position

Flex

Flex

Meaning

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

What changes

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

Related CSS

display: flexflex-directionflex-wrapgap

Request example

Keep the header controls in a flex row.

Layout and position

Grid

Grid

Meaning

A layout method for arranging content in rows and columns.

What changes

Changing grid columns controls how many cards appear per row.

Related CSS

display: gridgrid-template-columnsgrid-columngap

Request example

Show four tool cards per row on wide desktop screens.

Layout and position

Align items

Align items

Meaning

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

What changes

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

Related CSS

align-itemsplace-items

Request example

Vertically center the title and header buttons.

Layout and position

Justify content

Justify content

Meaning

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

What changes

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

Related CSS

justify-contentjustify-itemsmargin-left: auto

Request example

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

Layout and position

Position

Position

Meaning

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

What changes

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

Related CSS

positionrelativeabsolutefixedsticky

Request example

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

Layout and position

Z-index

Z-index

Meaning

The stacking order of positioned elements.

What changes

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

Note

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

Related CSS

z-indexposition

Request example

Raise the language dropdown above the menu panel.

Layout and position

Overflow

Overflow

Meaning

What happens when content is larger than its container.

What changes

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

Related CSS

overflowoverflow-xoverflow-ymax-height

Request example

Make long dropdown menus scroll inside a max-height.

Responsive

Breakpoint

Breakpoint

Meaning

A screen width where the layout changes.

What changes

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

Related CSS

@mediasmmdlgxl

Request example

Treat tablets as desktop for the top navigation.

Responsive

Mobile

Mobile

Meaning

Styles intended for small phone-sized screens.

What changes

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

Related CSS

@mediamax-widthsm

Request example

On mobile, stack the cards in one column.

Responsive

Desktop

Desktop

Meaning

Styles intended for wider laptop or desktop screens.

What changes

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

Related CSS

@mediamin-widthlgxl

Request example

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

Responsive

Viewport

Viewport

Meaning

The visible area of the browser or device screen.

What changes

Viewport units make sizes relative to the visible screen.

Related CSS

vwvh100vw100vh

Request example

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

Responsive

Responsive

Responsive

Meaning

A design that adjusts to different screen sizes.

What changes

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

Related CSS

@mediaclampmin()max()

Request example

Make the controls responsive without changing their order.

Interaction states

Hover

Hover

Meaning

The state when a mouse pointer is over an element.

What changes

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.

Related CSS

:hoverbackgroundcolortransition

Request example

Add a background color change when hovering over menu items.

Interaction states

Active

Active

Meaning

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

What changes

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

Related CSS

:activetransformbackground

Request example

Add a slight pressed effect to toolbar buttons.

Interaction states

Focus

Focus

Meaning

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

What changes

Focus styles make keyboard navigation visible and accessible.

Related CSS

:focus:focus-visibleoutline

Request example

Make the search input focus ring match the accent color.

Interaction states

Disabled

Disabled

Meaning

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

What changes

Disabled styles often reduce contrast and remove pointer interaction.

Related CSS

:disabledopacitycursorpointer-events

Request example

Make disabled buttons visibly inactive but still readable.

Interaction states

Selected

Selected

Meaning

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

What changes

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

Related CSS

aria-currentdata-statebackgroundcolor

Request example

Make the selected category chip clearly different from the others.

Interaction states

Open / Closed

Open / Closed

Meaning

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

What changes

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

Related CSS

aria-expandeddisplayheightvisibility

Request example

Keep all menu categories closed by default.

UI components

Button

Button

Meaning

A control that performs an action when clicked or tapped.

What changes

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

Related CSS

buttonpaddingborderbackgroundcursor

Request example

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

UI components

Icon button

Icon button

Meaning

A button represented mainly by an icon instead of text.

What changes

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

Related CSS

buttonwidthheightaria-labeldisplay: grid

Request example

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

UI components

Dropdown

Dropdown

Meaning

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

What changes

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

Related CSS

positiontoprightz-indexbox-shadow

Request example

When the language dropdown opens, close the site menu.

UI components

Accordion

Accordion

Meaning

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

What changes

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

Related CSS

aria-expandedheightdisplayoverflow

Request example

Add open and close behavior to each menu category.

UI components

Tabs

Tabs

Meaning

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

What changes

Selected tab styling must clearly show which view is active.

Related CSS

role=tablistdisplayborderbackground

Request example

Make the active tab background darker than inactive tabs.

UI components

Modal

Modal

Meaning

A focused overlay panel that appears above the page.

What changes

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

Related CSS

dialogposition: fixedinsetz-indexbackdrop

Request example

Center the modal and keep it narrower than the viewport.

UI components

Tooltip

Tooltip

Meaning

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

What changes

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

Related CSS

positiontitlearia-describedbyz-index

Request example

Add a tooltip that labels the menu icon button.

UI components

Input

Input

Meaning

A field where the user types text or values.

What changes

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

Related CSS

inputborderpaddingplaceholder:focus

Request example

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

UI components

Badge / Chip

Badge / Chip

Meaning

A small rounded label or filter control.

What changes

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

Related CSS

border-radiuspaddingbackgroundfont-size

Request example

Make active category chips visually stronger.