CSS glossary: Journeyman level
65 CSS terms at the Journeyman level, each with a short definition and a link to its full page.
Updated
- Align content
- Spaces out the rows of wrapped items.
- Align items
- Lines items up along the cross axis, like centered.
- Align self
- Lets one item align differently from the others.
- Animation fill mode
- Decides what an element looks like before and after an animation.
- Animation iteration count
- Sets how many times an animation plays.
- Animation name
- Picks which @keyframes animation to play.
- Auto-fill
- Fits as many grid columns as there is room for, keeping empty ones.
- Auto-fit
- Fits as many columns as fit, stretching items to fill the row.
- Breakpoint
- A screen width where the layout changes.
- Cross axis
- The direction across the main axis; align-items works along it.
- CSS Grid
- A layout system for rows and columns together.
- Explicit grid
- The rows and columns you define yourself.
- Flex basis
- A flex item's starting size before growing or shrinking.
- Flex container
- An element with display: flex; its children follow Flexbox.
- Flex direction
- Sets whether flex items run in a row or a column.
- Flex flow
- Sets flex-direction and flex-wrap together.
- Flex grow
- How much leftover space a flex item takes.
- Flex item
- A direct child of a flex container.
- Flex shorthand
- Sets grow, shrink and basis at once, like flex: 1.
- Flex shrink
- How much a flex item shrinks when space is short.
- Flex wrap
- Lets flex items wrap onto new lines instead of squashing.
- Flexbox
- A layout system for lining items up in a row or column.
- Fraction unit
- fr: a share of the leftover space in a grid.
- Gap
- Sets the space between flex or grid items.
- Grid area
- A rectangle of grid cells, often named.
- Grid auto flow
- Decides how unplaced items fill the grid.
- Grid cell
- One square where a row and column cross.
- Grid container
- An element with display: grid.
- Grid item
- A direct child of a grid container.
- Grid line
- A numbered dividing line between grid tracks.
- Grid placement
- Putting an item in chosen rows and columns.
- Grid span
- Makes an item stretch across a number of tracks.
- Grid template areas
- Draws a grid layout with named areas, row by row.
- Grid template columns
- Sets a grid's columns and their widths.
- Grid template rows
- Sets a grid's rows and their heights.
- Grid track
- One full row or column of a grid.
- Implicit grid
- Extra tracks the browser adds for items that don't fit.
- Justify content
- Spreads items along the main axis: start, center, space-between.
- Keyframe animation
- An animation described in steps with @keyframes.
- Main axis
- The direction flex items flow in; justify-content works along it.
- Media feature
- The condition inside a media query, like min-width.
- Media query
- Applies CSS only when a condition is true, like a minimum screen width.
- minmax()
- Gives a grid track a minimum and maximum size.
- Mobile-first design
- Phone layout first, then media queries for bigger screens.
- Order
- Changes the visual order of items without changing the HTML.
- Orientation query
- Checks whether the screen is portrait or landscape.
- Place content
- Sets align-content and justify-content together.
- Place items
- Sets align-items and justify-items together.
- Place self
- Sets align-self and justify-self together for one item.
- prefers-color-scheme
- Checks whether the user prefers a light or dark theme.
- prefers-reduced-motion
- Checks whether the user asked for less animation.
- repeat()
- Repeats a track size, like repeat(4, 1fr).
- Resolution query
- Checks how sharp the screen is, for high-density images.
- Responsive design
- One page that adapts its layout to any screen size.
- Rotate
- Turns an element around a point.
- Scale
- Makes an element look bigger or smaller.
- style attribute
- A global attribute containing CSS declarations applied directly to one element.
- Stylesheet link
- A link element that loads an external CSS stylesheet.
- Timing function
- The speed curve of a transition, like ease-in-out.
- Transform
- Moves, rotates or scales an element without affecting layout.
- Transform origin
- Sets the point an element rotates or scales around.
- Transition
- Makes a property change smoothly instead of jumping.
- Transition duration
- Sets how long a transition takes.
- Transition property
- Says which properties animate when they change.
- Translate
- Slides an element from where it sits.