CSS glossary: Apprentice level
53 CSS terms at the Apprentice level, each with a short definition and a link to its full page.
Updated
- ::after
- Adds generated content at the end of an element.
- ::before
- Adds generated content at the start of an element.
- ::marker
- Styles the bullet or number of a list item.
- ::placeholder
- Styles the hint text in an empty input.
- :active
- Styles an element while it is being pressed.
- :checked
- Styles checkboxes and radio buttons that are selected.
- :disabled
- Styles form controls that are switched off.
- :first-child
- Selects an element that is the first child of its parent.
- :focus
- Styles the element that has keyboard focus.
- :hover
- Styles an element while the mouse is over it.
- :last-child
- Selects an element that is the last child of its parent.
- :nth-child()
- Selects children by position, like odd rows or every third item.
- :visited
- Styles links the user has already opened.
- Absolute positioning
- Places an element relative to the nearest positioned ancestor.
- Attribute selector
- Selects elements by an attribute, written in [brackets].
- Auto margin
- Takes up leftover space; margin: 0 auto centers a block.
- Background image
- Puts an image or gradient behind an element's content.
- Background position
- Sets where a background image sits.
- Background repeat
- Decides whether a background image tiles.
- Background size
- Sets how big a background image is, like cover.
- Border box
- Width and height include padding and border.
- Border radius
- Rounds an element's corners.
- Box shadow
- Draws a shadow around an element.
- Box sizing
- Decides whether width includes padding and border.
- Clear
- Moves an element below any floats instead of wrapping around them.
- display: none
- Hides an element completely; it takes no space.
- Fixed positioning
- Pins an element to the window so it stays put while scrolling.
- Float
- Pushes an element left or right with text wrapping around it.
- Inset
- Sets top, right, bottom and left at once.
- Letter spacing
- Adds or removes space between letters.
- Line height
- Sets the space between lines of text.
- Linear gradient
- A background that fades between colors along a line.
- List style
- Sets or removes list bullets and numbers.
- Margin collapsing
- Vertical margins between blocks merge into the larger one.
- Maximum size
- max-width and max-height stop an element growing past a size.
- Minimum size
- min-width and min-height stop an element getting smaller than a size.
- object-fit
- Decides how an image fills its box, like cover or contain.
- Opacity
- Makes an element see-through, from 0 to 1.
- Outline
- A line around an element that takes up no space, used for focus rings.
- Overflow
- Decides what happens when content doesn't fit: show, hide or scroll.
- Positioning scheme
- The position property: how an element is placed.
- Pseudo-class
- Styles an element in a state, like :hover, with one colon.
- Pseudo-element
- Styles part of an element, or adds decoration, with two colons.
- Radial gradient
- A background that fades outward from a center point.
- Relative positioning
- Nudges an element from its normal spot; anchors absolute children.
- Static positioning
- The default: the element sits in the normal flow.
- Sticky positioning
- Scrolls normally, then sticks once it reaches a set point.
- Text decoration
- Adds or removes lines on text, like underlines.
- Text transform
- Changes how text is capitalized when shown.
- Viewport
- The visible area of the page; vw and vh measure it.
- Visibility
- Makes an element invisible but keeps its space.
- White space
- Controls how spaces and line breaks are shown, and wrapping.
- Z-index
- Decides which overlapping elements sit in front.