Loading lesson path
Concept visual
Start from A
A
Formula
accent - color
Specifies an accent color for user - interface controls align - contentSpecifies the alignment between the lines inside a flexible container when the items do not use all available space align-items
Formula
Specifies the alignment for items inside a flexible container align - selfSpecifies the alignment for selected items inside a flexible container all
Formula
Resets all properties (except unicode - bidi and direction)animation A shorthand property for all the animation-*
Formula
properties animation - delay
Specifies a delay for the start of an animation animation - direction
Specifies whether an animation should be played forward, backward or in alternate cycles animation - duration
Specifies how long an animation should take to complete one cycle animation - fill - modeSpecifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
Formula
animation - iteration - count
Specifies the number of times an animation should be played animation - name
Specifies a name for the @keyframes animation animation - play - state
Specifies whether the animation is running or paused animation - timing - function
Specifies the speed curve of an animation aspect - ratioB
Formula
backdrop - filter
Defines a graphical effect to the area behind an element backface - visibilityDefines whether or not the back face of an element should be visible when facing the user background A shorthand property for all the background-*
Formula
properties background - attachment
Sets whether a background image scrolls with the rest of the page, or is fixed background - blend - mode
Specifies the blending mode of each background layer (color/image)
background - clip
Defines how far the background (color or image) should extend within an element background - color
Specifies the background color of an element background - image
Specifies one or more background images for an element background - origin
Specifies the origin position of a background image background - position
Specifies the position of a background image background - position - x
Specifies the position of a background image on x - axis background - position - y
Specifies the position of a background image on y - axis background - repeat
Sets if/how a background image will be repeated background - size
Specifies the size of the background images block - sizeSpecifies the size of an element in block direction border
Formula
A shorthand property for border - width, border - style and border - color border - block
A shorthand property for border - block - width, border - block - style and border - block - color border - block - color
Sets the color of the borders at start and end in the block direction border - block - endA shorthand property for border-block-end-width, border-block-end-style and border-block-end-color border-block-end-color
Formula
Sets the color of the border at the end in the block direction border - block - end - style
Sets the style of the border at the end in the block direction border - block - end - width
Sets the width of the border at the end in the block direction border - block - startA shorthand property for border-block-start-width, border-block-start-style and border-block-start-color border-block-start-color
Formula
Sets the color of the border at the start in the block direction border - block - start - style
Sets the style of the border at the start in the block direction border - block - start - width
Sets the width of the border at the start in the block direction border - block - style
Sets the style of the borders at start and end in the block direction border - block - width
Sets the width of the borders at start and end in the block direction border - bottom
A shorthand property for border - bottom - width, border - bottom - style and border - bottom - color border - bottom - color
Sets the color of the bottom border border - bottom - left - radius
Defines the radius of the border of the bottom - left corner border - bottom - right - radius
Defines the radius of the border of the bottom - right corner border - bottom - style
Sets the style of the bottom border border - bottom - width
Sets the width of the bottom border border - collapse
Sets whether table borders should collapse into a single border or be separated border - color
Sets the color of the four borders border - end - end - radius
Sets the radius of the corner between the block - end and the inline - end sides of the element border - end - start - radius
Sets the radius of the corner between the block - end and the inline - start sides of the element border - image
A shorthand property for all the border - image -*
properties border - image - outset
Specifies the amount by which the border image area extends beyond the border box border - image - repeat
Specifies whether the border image should be repeated, rounded or stretched border - image - slice
Specifies how to slice the border image border - image - source
Specifies the path to the image to be used as a border border - image - width
Specifies the width of the border image border - inline
A shorthand property for border - inline - width, border - inline - style and border - inline - color border - inline - color
Sets the color of the borders at start and end in the inline direction border - inline - endA shorthand property for border-inline-end-width, border-inline-end-style and border-inline-end-color border-inline-end-color
Formula
Sets the color of the border at the end in the inline direction border - inline - end - style
Sets the style of the border at the end in the inline direction border - inline - end - width
Sets the width of the border at the end in the inline direction border - inline - startA shorthand property for border-inline-start-width, border-inline-start-style and border-inline-start-color border-inline-start-color
Formula
Sets the color of the border at the start in the inline direction border - inline - start - style
Sets the style of the border at the start in the inline direction border - inline - start - width
Sets the width of the border at the start in the inline direction border - inline - style
Sets the style of the borders at start and end in the inline direction border - inline - width
Sets the width of the borders at start and end in the inline direction border - left
A shorthand property for all the border - left -*
properties border - left - color
Sets the color of the left border border - left - style
Sets the style of the left border border - left - width
Sets the width of the left border border - radius
A shorthand property for the four border -*- radius properties border - right
A shorthand property for all the border - right -*
properties border - right - color
Sets the color of the right border border - right - style
Sets the style of the right border border - right - width
Sets the width of the right border border - spacing
Sets the distance between the borders of adjacent cells border - start - end - radius
Sets the radius of the corner between the block - start and the inline - end sides of the element border - start - start - radius
Sets the radius of the corner between the block - start and the inline - start sides of the element border - style
Sets the style of the four borders border - top
A shorthand property for border - top - width, border - top - style and border - top - color border - top - color
Sets the color of the top border border - top - left - radius
Defines the radius of the border of the top - left corner border - top - right - radius
Defines the radius of the border of the top - right corner border - top - style
Sets the style of the top border border - top - width
Sets the width of the top border border - widthSets the width of the four borders bottom
Formula
Sets the elements position, from the bottom of its parent element box - decoration - break
Sets the behavior of the background and border of an element at page - break, or, for in - line elements, at line - break.
box - reflect
The box - reflect property is used to create a reflection of an element.
box - shadow
Attaches one or more shadows to an element box - sizingDefines how the width and height of an element are calculated: should they include padding and borders, or not break-after
Formula
Specifies whether or not a page -, column -, or region - break should occur after the specified element break - before
Specifies whether or not a page -, column -, or region - break should occur before the specified element break - inside
Specifies whether or not a page -, column -, or region - break should occur inside the specified elementC
Formula
caption - side
Specifies the placement of a table caption caret - colorSpecifies the color of the cursor (caret) in inputs, textareas, or any element that is editable @charset Specifies the character encoding used in the style sheet clear Specifies what should happen with the element that is next to a floating element clip
Formula
Deprecated in favor of clip - path. Clips an absolutely positioned element clip - pathClips an element to a basic shape or to an SVG source color
Formula
Indicates which operating system color scheme an element should render with column - count
Specifies the number of columns an element should be divided into column - fill
Specifies how to fill columns, balanced or not column - gapFormula
A shorthand property for all the column - rule -*
properties column - rule - color
Specifies the color of the rule between columns column - rule - style
Specifies the style of the rule between columns column - rule - width
Specifies the width of the rule between columns column - span
Specifies how many columns an element should span across column - width@container Define styles for elements in container, depending on the container's size or style content
Formula
Used with the :before and :after pseudo - elements, to insert generated content counter - increment
Increases or decreases the value of one or more CSS counters counter - reset
Creates or resets one or more CSS counters counter - setCreates or sets one or more CSS counters
Formula
@counter - styleLets you define your own counter styles cursor Specifies the mouse cursor to be displayed when pointing over an element D direction
Specifies how a certain HTML element should be displayed E
Formula
empty - cellsSpecifies whether or not to display borders and background on empty cells in a table F filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed flex
Formula
A shorthand property for the flex - grow, flex - shrink, and the flex - basis properties flex - basis
Specifies the initial length of a flexible item flex - direction
Specifies the direction of the flexible items flex - flow
A shorthand property for the flex - direction and the flex - wrap properties flex - grow
Specifies how much the item will grow relative to the rest flex - shrink
Specifies how the item will shrink relative to the rest flex - wrapSpecifies whether the flexible items should wrap or not float Specifies whether an element should float to the left, right, or not at all font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties
Formula
@font - face
Specifies a custom font to use to display text font - familyFormula
Allows control over advanced typographic features in OpenType fonts font - kerningControls the usage of the kerning information (how letters are spaced)
Formula
font - language - override
Controls the usage of language - specific glyphs in a typeface
@font - palette - values
Allows you to customize the default values of a font - palette font - sizeFormula
Preserves the readability and size of text when fallback font occurs font - stretch
Selects a normal, condensed, or expanded face from a font family font - styleFormula
Controls which missing typefaces (bold or italic) may be synthesized by the browser font - variant
Specifies whether or not a text should be displayed in a small - caps font font - variant - alternates
Controls the usage of alternate glyphs associated to alternative names defined in @font - feature - values font - variant - caps
Controls the usage of alternate glyphs for capital letters font - variant - east - asianControls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
Formula
font - variant - ligaturesControls which ligatures and contextual forms are used in textual content of the elements it applies to font-variant-numeric
Formula
Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers font - variant - positionControls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font font-weight
G gap
Formula
A shorthand property for the row - gap and the column - gap properties gridA shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns
Formula
Specifies how auto - placed items are inserted in the grid grid - auto - rowsFormula
A shorthand property for the grid - column - start and the grid - column - end properties grid - column - end
Specifies where to end the grid item grid - column - start
Specifies where to start the grid item grid - row
A shorthand property for the grid - row - start and the grid - row - end properties grid - row - end
Specifies where to end the grid item grid - row - start
Specifies where to start the grid item grid - template
A shorthand property for the grid - template - rows, grid - template - columns and grid - areas properties grid - template - areas
Specifies how to display columns and rows, using named grid items grid - template - columns
Specifies the size of the columns, and how many columns in a grid layout grid - template - rowsSpecifies the size of the rows in a grid layout H
Formula
hanging - punctuationSpecifies whether a punctuation character may be placed outside the line box height
Formula
Sets how to split words to improve the layout of text hyphenate - characterSets the character used at the end of line, before a hyphenation break I
Formula
image - renderingSpecifies the type of algorithm to use for image scaling @import
Formula
Allows you to import a style sheet into another style sheet initial - letterSpecifies the size of the initial-letter and optionally the number of lines the initial letter should sink (down in the text)
Formula
inline - sizeSpecifies the size of an element in the inline direction inset
Formula
Specifies the distance between an element and the parent element inset - block
Specifies the distance between an element and the parent element in the block direction inset - block - end
Specifies the distance between the end of an element and the parent element in the block direction inset - block - start
Specifies the distance between the start of an element and the parent element in the block direction inset - inline
Specifies the distance between an element and the parent element in the inline direction inset - inline - end
Specifies the distance between the end of an element and the parent element in the inline direction inset - inline - startSpecifies the distance between the start of an element and the parent element in the inline direction isolation Defines whether an element must create a new stacking content J
Formula
justify - contentSpecifies the alignment between the items inside a flexible container when the items do not use all available space justify-items
Formula
Is set on the grid container. Specifies the alignment of grid items in the inline direction justify - selfIs set on the grid item. Specifies the alignment of the grid item in the inline direction K @keyframes Controls the steps in an animation by defining styles for points along the animation sequence L @layer Controls how the CSS cascade layers evaluates the order of styles left
Formula
Specifies the left position of a positioned element letter - spacing
Increases or decreases the space between characters in a text line - breakFormula
Sets all the properties for a list in one declaration list - style - image
Specifies an image as the list - item marker list - style - position
Specifies the position of the list - item markers (bullet points)
list - style - typeM margin
Formula
Sets all the margin properties in one declaration margin - block
Specifies the margin in the block direction margin - block - end
Specifies the margin at the end in the block direction margin - block - start
Specifies the margin at the start in the block direction margin - bottom
Sets the bottom margin of an element margin - inline
Specifies the margin in the inline direction margin - inline - end
Specifies the margin at the end in the inline direction margin - inline - start
Specifies the margin at the start in the inline direction margin - left
Sets the left margin of an element margin - right
Sets the right margin of an element margin - topSets the top margin of an element marker Points to a marker that will be drawn on all vertices of an element's path (the first, middle, and last)
Formula
marker - end
Points to a marker that will be drawn on the last vertex of an element's path marker - mid
Points to a marker that will be drawn on all the middle vertices of an element's path marker - startPoints to a marker that will be drawn on the first vertex of an element's path mask A shorthand property for mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size and mask-composite mask-clip
Formula
Specifies which area is affected by a mask image mask - composite
Specifies a compositing operation used on the current mask layer with the mask layers below it mask - image
Specifies an image to be used as a mask layer for an element mask - mode
Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask mask - origin
Specifies the origin position (the mask position area) of a mask layer image mask - positionSets the starting position of a mask layer image (relative to the mask position area)
Formula
mask - repeat
Specifies how the mask layer image is repeated mask - size
Specifies the size of a mask layer image mask - type
Specifies whether an SVG < mask > element is treated as a luminance mask or as an alpha mask max - height
Sets the maximum height of an element max - width@media
Formula
Sets the style rules for different media types/devices/sizes max - block - size
Sets the maximum size of an element in the block direction max - inline - size
Sets the maximum size of an element in the inline direction min - block - size
Sets the minimum size of an element in the block direction min - inline - size
Sets the minimum size of an element in the inline direction min - height
Sets the minimum height of an element min - width
Sets the minimum width of an element mix - blend - modeSpecifies how an element's content should blend with its direct parent background N @namespace Defines an XML namespace to be used in the style sheet O
Formula
object - fitSpecifies how the contents of a replaced element should be fitted to the box established by its used height and width object-position Specifies the alignment of the replaced element inside its box offset A shorthand property for the offset-anchor, offset-distance, offset-path, offset-position, and the offset-rotate properties offset-anchor
Formula
Specifies a point on an element that is fixed to the path it is animated along offset - distance
Specifies the position along a path where an animated element is placed offset - path
Specifies the path an element is animated along offset - position
Specifies the initial position of an element along a path offset - rotateSpecifies rotation of an element as it is animated along a path opacity Sets the opacity level for an element order Sets the order of the flexible item, relative to the rest orphans Sets the minimum number of lines that must be left at the bottom of a page or column outline
Formula
A shorthand property for the outline - width, outline - style, and the outline - color properties outline - colorFormula
Offsets an outline, and draws it beyond the border edge outline - styleFormula
Specifies what happens if content overflows an element's box overflow - anchorSpecifies whether or not content in viewable area in a scrollable contianer should be pushed down when new content is loaded above overflow-wrap
Formula
Specifies whether or not the browser can break lines with long words, if they overflow the container overflow - xSpecifies whether or not to clip the left/right edges of the content, if it overflows the element's content area overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area overscroll-behavior
Formula
Specifies whether to have scroll chaining or overscroll affordance in x - and y - directions overscroll - behavior - block
Specifies whether to have scroll chaining or overscroll affordance in the block direction overscroll - behavior - inline
Specifies whether to have scroll chaining or overscroll affordance in the inline direction overscroll - behavior - x
Specifies whether to have scroll chaining or overscroll affordance in x - direction overscroll - behavior - y
Specifies whether to have scroll chaining or overscroll affordance in y - directionsP padding A shorthand property for all the padding-*
Formula
properties padding - block
Specifies the padding in the block direction padding - block - end
Specifies the padding at the end in the block direction padding - block - start
Specifies the padding at the start in the block direction padding - bottom
Sets the bottom padding of an element padding - inline
Specifies the padding in the inline direction padding - inline - end
Specifies the padding at the end in the inline direction padding - inline - start
Specifies the padding at the start in the inline direction padding - left
Sets the left padding of an element padding - right
Sets the right padding of an element padding - top@page
Formula
Customizes the dimension, orientation, and margins of printed pages page - break - after
Sets the page - break behavior after an element. Replaced by break - after property page - break - before
Sets the page - break behavior before an element. Replaced by break - before property page - break - inside
Sets the page - break behavior inside an element. Replaced by break - inside property paint - orderSets the order of how an SVG element or text is painted. perspective
Formula
Gives a 3D - positioned element some perspective perspective - origin
Defines at which position the user is looking at the 3D - positioned element place - content
Specifies align - content and justify - content property values for flexbox and grid layouts place - items
Specifies align - items and justify - items property values for grid layouts place - self
Specifies align - self and justify - self property values for grid layouts pointer - eventsDefines whether or not an element reacts to pointer events position Specifies the type of positioning method used for an element (static, relative, absolute or fixed) @property Defines custom CSS properties directly in the stylesheet without having to run any JavaScript Q quotes Sets the type of quotation marks for embedded quotations R resize Defines if (and how) an element is resizable by the user right Specifies the right position of a positioned element rotate
S scale Specifies the size of an element by scaling up or down @scope Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors scroll-behavior
Formula
Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump scroll - margin
Specifies the margin between the snap position and the container scroll - margin - block
Specifies the margin between the snap position and the container in the block direction scroll - margin - block - end
Specifies the end margin between the snap position and the container in the block direction scroll - margin - block - start
Specifies the start margin between the snap position and the container in the block direction scroll - margin - bottom
Specifies the margin between the snap position on the bottom side and the container scroll - margin - inline
Specifies the margin between the snap position and the container in the inline direction scroll - margin - inline - end
Specifies the end margin between the snap position and the container in the inline direction scroll - margin - inline - start
Specifies the start margin between the snap position and the container in the inline direction scroll - margin - left
Specifies the margin between the snap position on the left side and the container scroll - margin - right
Specifies the margin between the snap position on the right side and the container scroll - margin - top
Specifies the margin between the snap position on the top side and the container scroll - padding
Specifies the distance from the container to the snap position on the child elements scroll - padding - blockSpecifies the distance in block direction from the container to the snap position on the child elements scroll-padding-block-end Specifies the distance in block direction from the end of the container to the snap position on the child elements scroll-padding-block-start Specifies the distance in block direction from the start of the container to the snap position on the child elements scroll-padding-bottom
Formula
Specifies the distance from the bottom of the container to the snap position on the child elements scroll - padding - inlineSpecifies the distance in inline direction from the container to the snap position on the child elements scroll-padding-inline-end Specifies the distance in inline direction from the end of the container to the snap position on the child elements scroll-padding-inline-start Specifies the distance in inline direction from the start of the container to the snap position on the child elements scroll-padding-left Specifies the distance from the left side of the container to the snap position on the child elements scroll-padding-right Specifies the distance from the right side of the container to the snap position on the child elements scroll-padding-top
Formula
Specifies the distance from the top of the container to the snap position on the child elements scroll - snap - align
Specifies where to position elements when the user stops scrolling scroll - snap - stop
Specifies scroll behaviour after fast swipe on trackpad or touch screen scroll - snap - type
Specifies how snap behaviour should be when scrolling scrollbar - color
Specifies the color of the scrollbar of an element shape - outsideDefines a shape for wrapping for the inline content
Formula
@starting - styleDefines an element's starting styles before the element gets its first style update @supports Used to test whether a browser supports a CSS feature T
Formula
tab - size
Specifies the width of a tab character table - layout
Defines the algorithm used to lay out table cells, rows, and columns text - align