CSS flash cards: Freelancer level
64 CSS terms at the Freelancer level, as flash cards.
Updated
Terms in this deck
- !important
- Makes a declaration beat normal ones regardless of specificity.
- :has()
- Styles an element based on what it contains.
- :is()
- Matches any selector in its list.
- :not()
- Matches elements that don't match the selector inside.
- :where()
- Like :is() but with zero specificity, so easy to override.
- @container
- Writes a container query.
- @font-face
- Names a font and says where to download it.
- @layer
- Declares cascade layers or puts rules into one.
- @scope
- Limits rules to part of the page, with an optional inner boundary.
- all property
- Resets every property of an element at once.
- Aspect ratio
- Keeps width and height in proportion, like 16/9.
- Block axis
- The direction paragraphs stack.
- calc()
- Does math in CSS, even mixing units.
- Cascade layer
- A named group of styles ranked in the cascade, regardless of specificity.
- Cascade origin
- Where a style comes from: browser, user or site.
- clamp()
- Keeps a value between a minimum and maximum, flexible in between.
- Column count
- Sets how many columns text flows into.
- Column span
- Makes an element stretch across all the columns.
- Column width
- Sets an ideal column width; the browser fits as many as it can.
- Container name
- Names a query container so queries can target it.
- Container query
- Styles an element based on its container's size, not the screen's.
- Container query units
- Units like cqw that measure the container, like vw measures the screen.
- Container type
- Turns an element into a query container.
- CSS nesting
- Writing child rules inside a parent rule.
- Current color
- Means "the current text color".
- Custom font
- A font file your site loads so everyone sees the same typeface.
- Custom property
- A named, reusable value like --brand-color, read with var().
- Custom property fallback
- The backup value in var(), used when the property isn't set.
- exportparts
- An attribute that exposes selected part names from a nested shadow tree through its host.
- Fit content
- Sizes to the content, but no larger than the space available.
- Font fallback
- The next font in the list, used if the first isn't available.
- Functional pseudo-class
- A pseudo-class that takes selectors in brackets, like :not().
- inherit
- Takes the value from the parent element.
- initial
- Resets a property to CSS's built-in default.
- Inline axis
- The direction text runs along a line.
- Intrinsic sizing
- Sizing an element by its content rather than a set width.
- Logical border
- Borders like border-inline-start that follow text direction.
- Logical margin
- Margins like margin-inline-start that follow text direction.
- Logical padding
- Padding like padding-inline that follows text direction.
- Logical properties
- Properties that use start/end instead of left/right.
- Logical size
- inline-size and block-size: width and height that follow text direction.
- max()
- Uses the largest of several values.
- Maximum content size
- The size content wants with no wrapping.
- min()
- Uses the smallest of several values.
- Minimum content size
- The smallest size without content spilling out.
- Multi-column layout
- Flows text into newspaper-style columns.
- Nesting selector
- & in nested CSS: stands for the parent selector.
- part attribute
- An attribute naming parts inside a shadow tree so external CSS can select them.
- Query container
- An element whose size its contents can query.
- Relative color
- Builds a new color from an existing one, like a lighter brand color.
- revert
- Rolls a property back to the browser's own style.
- revert-layer
- Rolls a property back to the previous cascade layer's value.
- Scoped styles
- Styles that only apply inside one part of the page.
- Scoping proximity
- When scoped rules clash, the closer scope wins.
- Scroll margin
- Leaves space around an element when scrolled to it.
- Scroll padding
- Space inside a scroll area that scrolled-to items stay clear of.
- Scroll snapping
- Makes scrolling settle neatly on each item.
- Specificity calculation
- Count ids, then classes, then tags; compare left to right.
- Style query
- Applies styles based on a container's custom property values.
- Subgrid
- Lets a nested grid reuse its parent's rows or columns.
- unset
- Inherits if the property normally inherits, otherwise resets.
- var()
- Reads the value of a custom property.
- Variable font
- One font file holding a whole range of weights and widths.
- Writing mode
- Sets which way text flows: across or down.